柱状图
饼状图
折线图
柱状图
基本的柱状图设置
<template>
<div ref="ec" id="ec"></div>
</template>
<script>
import * as echarts from "echarts"; //引用echarts
export default {
mounted(){
let mc = echarts.init(this.$refs.ec) //初始化echarts
//设置echarts的数据
//设置轴数据
let xData = ["x1","x2","x3","x4"];
//定义数据
let yData = [100,120,80,60];
//设置echarts配置项
let option = {
title:{
text:"主标题"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category" //坐标轴类型 value数据轴 category类目轴
},
yAxis:{//y轴相关配置
},
series:[//系列 配置图表的类型
{
name:"展示",
type:"bar", //系列名：当前的系列类别 bar柱状图
data:yData //数据
}
]
}
//绘制图表
mc.setOption(option)
}
}
</script>
<style>
#ec{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>效果：
柱状图的更多效果
标注大值和最小值
series:[//系列 配置图表的类型
{
name:"展示",
type:"bar", //系列名：当前的系列类别 bar柱状图
data:yData, //数据
//设置最大值/最小值
markPoint:{
data:[//标注的数据数组,每一项都是一个对象
{//最大值
type:"max",
name:"最大值"
},
{//最小值
type:"min",
name:"最小值"
}
]
标注平均值
series:[//系列 配置图表的类型
{
name:"展示",
type:"bar", //系列名：当前的系列类别 bar柱状图
data:yData, //数据
//图表标线
markLine:{
data:[
{//平均值
type:"average",
name:"平均值"
}
]
}
}
]
水平柱状图设置 （将x轴的配置放在y轴配置中）
<template>
<div ref="ec" id="ec"></div>
</template>
<script>
import * as echarts from "echarts"; //引用echarts
export default {
mounted(){
let mc = echarts.init(this.$refs.ec) //初始化echarts
//设置echarts的数据
//设置轴数据
let xData = ["x1","x2","x3","x4"];
//定义数据
let yData = [100,120,80,60];
//设置echarts配置项
let option = {
title:{
text:"主标题"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{//y轴相关配置
data:xData,
type:"category" //坐标轴类型 value数据轴 category类目轴
},
series:[//系列 配置图表的类型
{
name:"展示",
type:"bar", //系列名：当前的系列类别 bar柱状图
data:yData, //数据
barWidth:20,//设置每个数据柱形的宽度
//color:"pink", //设置每个数据柱形的颜色
//单独数据柱形的样式设置
itemStyle:{
normal:{
color:function(p){
//创建一个数组
let cc = [ //里面装颜色
"#c26541",
"#52f541",
"#a26641",
"#d26541"
]
//添加
return cc[p.dataIndex]
}
}
}
}
]
}
//绘制图表
mc.setOption(option)
}
}
</script>
<style>
#ec{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>效果：
饼状图
基本的柱状图设置
<template>
<div ref="ec" id="sec"></div>
</template>
<script>
import * as echarts from "echarts" //引用
export default {
mounted(){
let mc = echarts.init(this.$refs.ec) //初始化
//设置数据
let data = [
{value:67,name:"植物"},
{value:101,name:"动物"},
{value:150,name:"细菌"},
{value:170,name:"真菌"}
]
//设置配置项
let option = {
title:{
text:"饼状图",
x:"center"
},
legend:{//图例
left:"left",//设置位置
//设置图例的布局朝向
orient:"verical" //纵向：verical
},
series:[//分类
{
name:"销量统计",
type:"pie", //饼状图：pie
data //放入数据
}
]
}
//绘图
mc.setOption(option)
}
}
</script>
<style>
#sec{
width: 600x;
height: 500px;
border: 1px solid royalblue;
}
</style>
饼状图的更多样式
设置内外半径
series:[//分类
{
name:"销量统计",
type:"pie", //饼状图：pie
data, //放入数据
radius:["40%","70%"] //设置饼图的半径 参数：radius:["内半径","外半径"]
}
]
环形图标签设置
series:[//分类
{
name:"销量统计",
type:"pie", //饼状图：pie
data, //放入数据
//设置环形图的文本标签
label:{
position:"inside"//设置标签位置 outside外侧展示 inside内部展示 center中心展示
}
}
]
设置南丁格尔玫瑰图根据占比更直观的看到数据
series:[//分类
{
name:"销量统计",
type:"pie", //饼状图：pie
data, //放入数据
roseType:"area" //是否设置成南丁格尔图
}
]
折线图
折线图的基本设置
<template>
<div ref="ec" id="sec"></div>
</template>
<script>
import * as echarts from "echarts" //引用
export default {
mounted(){
let mc = echarts.init(this.$refs.ec) //初始化
//设置数据
let xData = ['x1','x2','x3','x4']
let yData = [120,100,70,99]
let option ={
title:{//设置标题
text:"折线图",
x:"center"
},
xAxis:{//x设置
type:"category", //category类目轴
data:xData //类目数据
},
yAxis:{
type:"value", //设置数值
},
series:[//设置系列
{
type:"line", //折线图line
data:yData //展示数据
}
]
}
//配置项绘制
mc.setOption(option)
}
}
</script>
<style>
#sec{
width: 500px;
height: 500px;
border: 1px solid royalblue;
}
</style>
折线图的更多样式
开启平滑过渡
series:[//设置系列
{
type:"line", //折线图line
data:yData, //展示数据
smooth:true, //开启平滑过度
}
]
内容填充样式
series:[//设置系列
{
type:"line", //折线图line
data:yData, //展示数据
smooth:true, //开启平滑过度
areaStyle:{}
}
]
设置标注最大值、最小值、平均值
series:[//设置系列
{
type:"line", //折线图line
data:yData, //展示数据
markPoint:{
data:[
{type:"max",name:"最大值"},
{type:"min",name:"最小值"}
]
},
markLine:{
data:[
{type:"average",name:"平均值"}
]
}
}
]
设置多条折线图堆叠效果文章来源：https://www.toymoban.com/news/detail-423037.html
<template>
<div ref="ec" id="sec"></div>
</template>
<script>
import * as echarts from "echarts" //引用
export default {
mounted(){
let mc = echarts.init(this.$refs.ec) //初始化
//设置数据
let xData = ['x1','x2','x3','x4']
let yData1 = [120,100,70,99]
let yData2 = [50,60,70,99]
let yData3 = [71,180,70,50]
let yData4 = [54,177,45,91]
let option ={
title:{//设置标题
text:"折线图",
x:"center"
},
xAxis:{//x设置
type:"category", //category类目轴
data:xData //类目数据
},
yAxis:{
type:"value", //设置数值
},
series:[//设置系列
{
name:"数据1",
type:"line",
//数据堆叠
stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值
data:yData1 //数据
},
{
name:"数据2",
type:"line",
//数据堆叠
stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值
data:yData2 //数据
},
{
name:"数据3",
type:"line",
//数据堆叠
stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值
data:yData3 //数据
},
{
name:"数据4",
type:"line",
//数据堆叠
stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值
data:yData4 //数据
}
]
}
//配置项绘制
mc.setOption(option)
}
}
</script>
<style>
#sec{
width: 500px;
height: 500px;
border: 1px solid royalblue;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-423037.html
到了这里，关于可视化Echarts 柱状图、饼状图、折线图的设置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
