1.title:標題組件
2.tooltip:提示框組件
3.legend：圖例組件，展現了不同系列的標記(symbol)，顏色和名字
4.xAxis：直角坐標系 grid 中的 x 軸，單個 grid 組件最多只能放上下兩個 x 軸。
5.yAxis:直角坐標系 grid 中的 y 軸，單個 grid 組件最多只能放左右兩個 y 軸。
6.series:系列列表。每個系列通過 type 決定自己的圖表類型。
series type=line ——-折線圖
series type=bar ——-柱狀圖
series type=pie ——-餅圖
下面生成一個柱狀圖 ，貼上完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入echarts文件--> <script src="../js/echarts.min.js"></script> <script src="../js/echarts.js"></script> <script src="../theme/dark.js"></script> <title>柱狀圖</title> </head> <body> <!--准備一個dom容器--> <div id="main" style="width:600px;height:400px"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts var myChart = echarts.init(document.getElementById('main')); var option={ title:{ text:'第一個echarts' }, tooltip:{}, //指示框 legend:{ data:['銷量'] }, color:'pink', xAxis:{ data:['蘋果','李子','栗子','梨','草莓','菠蘿'] }, yAxis:{}, series:[{ name:'銷量', type:'bar', data:[5,10,36,10,18,20] }] }; myChart.setOption(option); </script> </body> </html>
生成的柱狀圖如下（粉色的小可愛）
然后改變一下類型 type:line (藍色的小清新)
在來生成餅圖，餅圖是沒有xy軸的，先給注釋掉，type:pie ，另外餅圖的data是有包含兩個鍵值對的json組成的數組，如下
data:[
{value:5,name:'蘋果'},
{value:10,name:'李子'},
{value:36,name:'栗子'},
{value:10,name:'梨'},
{value:18,name:'草莓'},
{value:20,name:'菠蘿'},
]
然后我的餅圖，設置了全局顏色，所以看起來比較多彩
餅圖和折線圖的結合 series配置兩套
series:[{
name:'銷量',
type:'bar',
// data:[
// {value:5,name:'蘋果'},
// {value:10,name:'李子'},
// {value:36,name:'栗子'},
// {value:10,name:'梨'},
// {value:18,name:'草莓'},
// {value:20,name:'菠蘿'},
// ]
data:[5,10,36,10,18,20],
},
{
name:'銷量',
type:'line',
color:'black',
// data:[
// {value:5,name:'蘋果'},
// {value:10,name:'李子'},
// {value:36,name:'栗子'},
// {value:10,name:'梨'},
// {value:18,name:'草莓'},
// {value:20,name:'菠蘿'},
// ]
data:[5,10,36,10,18,20],
},
]
