echarts使用步驟：

1）設(shè)置一個(gè)容器，該容器用來(lái)放圖形，一定要給容器設(shè)置高度；

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

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

3）?指定圖表的配置項(xiàng)和數(shù)據(jù) option={}對(duì)象，

　　語(yǔ)法 ：option = {

　　　　title:{

　　　　　　text:"標(biāo)題"　　　　

　　　　},　

　　tooltip : {
　　　　trigger: 'item',
　　　　formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"
　　},
　　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:"會(huì)員卡",
　　　　type:'pie',
　　　　data:[0,12,9,20,30,80,12,8]
　　}

　　]

　　};

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

下面是案例

demo1是根據(jù)姓氏進(jìn)行統(tǒng)計(jì)的餅圖，相關(guān)的餅圖寫(xiě)法比較類似其中部分代碼如下：

var myContainer = document.getElementById('myContainerNum');
myContainerNum = echarts.init(myContainerNum);
myContainerNum.setOption(option2={
title:{
padding:[10,0,5,20],
text:'營(yíng)業(yè)筆數(shù)統(tǒng)計(jì)',
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:"會(huì)員卡",
type:'pie',
data:[0,12,9,20,30,80,12,8]
},
{
name:"微信",
type:'pie',
data:[99,72,9,130,45,90,24,28]
},

]
});

注意：在使用echarts時(shí)，并須對(duì)容器設(shè)置高度

運(yùn)行結(jié)果：

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

//初始化echarts實(shí)例

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

myContainerNum.setOption(option2={
title:{
padding:[10,0,5,20],
text:'營(yíng)業(yè)筆數(shù)統(tǒng)計(jì)',
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:"會(huì)員卡",
type:'line',
data:[0,12,9,20,30,80,12,8]
},
{
name:"微信",
type:'line',
data:[99,72,9,130,45,90,24,28]
},
]
});

運(yùn)行結(jié)果如下：

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/lvxisha/p/9723028.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。