最近在业务中遇到要应用 ECharts 展示数据的需求,没啥好说的,开始学呗。
下面我就不同图表的几个demo做如下记录,我们开始吧。
- 基本示例
1 |
|
- 接下来是入门示例的一些数据修改之后的样子
1
2
3
4
5
6
7
8
9
10
11
12
13
14var option = {
title:{text:"echarts 示例"}, //标题
toolbox:{show:true,feature:{//工具箱
saveAsImage: {show:true}//保存图片
}},
tooltip:{},
legend:{data:["应气质"]}, //图例
xAxis:{data:["三只松鼠","百果园","植物园","裤子码","獭兔"]}, //x轴内容
yAxis:{}, //y轴空
series:[{ //显示数据
name:"应气质",type:"bar",data:[4,2,9,6,8]
}]
};
myChart.setOption(option) - 接下来是入门示例的一些设置修改之后的样子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25var option={
title:{
text:"折线统计图",
show:true,
subtext:"库存统计图",
left:"left",//标题位置 left center right
borderColor:"red",
borderWidth:3,
textStyle:{fontSize:20}
},
toolbox:{show:true,feature:{
saveAsImage: {show: true},
dataView:{show:true},
restore:{show:true},
dataZoom:{show:true},
magicType: {type:["line","bar"]}
}},
legend:{data:["销量","库存"]},
xAxis:{data:["abc","def","ghi","jkl","mno"]},
yAxis:{},
series:[
{name:"销量",type:"line",data:[12,21,18,29,25]},
{name:"库存",type:"bar",data:[122,211,118,129,125]},
]
} - 然后是仪表盘类型
1
2
3
4
5
6
7
8
9
10var option={
tooltip:{},
toolbox:{feature:{restore:{},saveAsImage:{}}},
series:[{name:"业务指标",type:"gauge",data:[{value:32,name:"完成率"}]}]
}
myChart.setOption(option)
setInterval(()=>{
option.series[0].data[0].value=Math.floor(Math.random()*100)
myChart.setOption(option,true)
},2000) - 最后是饼状图
1
2
3
4
5
6
7
8
9
10
11
12
13var option={
series:[{
type:"pie",
radius:"70%",
center:["50%","50%"],
data:[
{value:335,name:"视频广告"},
{value:135,name:"搜索引擎"},
{value:125,name:"邮件营销"},
{value:115,name:"直接访问"}
]
}]
}
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!