echarts使用步驟：

1）設置一個容器，該容器用來放圖形，一定要給容器設置高度；

2）初始化echarts實例，語法：var? aa =? echarts.init(DOM);

　　例如：?echarts.init(document.getElementById('box'));

3）?指定圖表的配置項和數據 option={}對象，

　　語法 ：option = {

　　　　title:{

　　　　　　text:"標題"　　　　

　　　　},　

　　tooltip : {
　　　　trigger: 'item',
　　　　formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"
　　},
　　legend: {
　　　　type: 'scroll',
　　　　orient: 'vertical',
　　　　right: 10,
　　　　top: 20,
　　　　bottom: 20

　　},

　　series:[　　　

　　{
　　　　name:"支付寶",
　　　　type:'pie',
　　　　data:[4,65,79,10,90,80,62,88],

　　},{
　　　　name:"會員卡",
　　　　type:'pie',
　　　　data:[0,12,9,20,30,80,12,8]
　　}

　　]

　　};

4）調用圖形 aa.setOption(option);

下面是案例

demo1是根據姓氏進行統計的餅圖，相關的餅圖寫法比較類似其中部分代碼如下：

var myContainer = document.getElementById('myContainerNum');
myContainerNum = echarts.init(myContainerNum);
myContainerNum.setOption(option2={
title:{
padding:[10,0,5,20],
text:'營業筆數統計',
textStyle:{
color:'red',
}
},
tooltip:{
trigger:'item'
},
legend:{
top:30,
left:20
},

series:[
{
name:"支付寶",
type:'pie',
data:[4,65,79,10,90,80,62,88],

},{
name:"會員卡",
type:'pie',
data:[0,12,9,20,30,80,12,8]
},
{
name:"微信",
type:'pie',
data:[99,72,9,130,45,90,24,28]
},

]
});

注意：在使用echarts時，并須對容器設置高度

運行結果：

對于直線或者折線的案例，主要代碼：

//初始化echarts實例

var myContainerNum = echarts.init(document.getElementById('containerNum'));

myContainerNum.setOption(option2={
title:{
padding:[10,0,5,20],
text:'營業筆數統計',
textStyle:{
color:'red',
}
},
tooltip:{//組件提示框
trigger:'axis',
axisPointer: {
type: 'cross'
},
},
legend:{
top:30,
left:20
},
xAxis:{
data:['23:00-8:00','8:00-10:00','10:00-12:00','12:00-14:00','14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00']
},
yAxis:{},
series:[
{
name:"支付寶",
type:'line',
data:[4,65,79,10,90,80,62,88],

},{
name:"會員卡",
type:'line',
data:[0,12,9,20,30,80,12,8]
},
{
name:"微信",
type:'line',
data:[99,72,9,130,45,90,24,28]
},
]
});

運行結果如下：

柱狀圖只需要在 series 配置中把 type：bar;類型即可

下面是一個比較容易理解的 案例網址：https://blog.csdn.net/wendysunday123/article/details/44172399

轉載于:https://www.cnblogs.com/lvxisha/p/9723028.html

總結

以上是生活随笔為你收集整理的echarts相关的可视化数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。