1、說(shuō)明
? ? 1、echarts可以由直接引用（如下），也可通過(guò)webpack引用和打包（這里不做介紹）
? ? 2、異步加載數(shù)據(jù)：使用回調(diào)或loading動(dòng)畫
2、HTML頁(yè)面引入
基本圖表引入echarts.min.js就可以，特殊圖表，比如中國(guó)地圖需要引入如圖1第二個(gè)
3、使用和加載（如圖2）
echarts全局對(duì)象通過(guò)init創(chuàng)建實(shí)例返回echartsInstance( 即圖2 myChart )；
setOption 設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬(wàn)能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過(guò)setOption完成；
一個(gè)容器不能初始化多個(gè)實(shí)例；
4、配置數(shù)組和配置項(xiàng)（如圖3）：
option中最重要的配置項(xiàng)是series；
series中data 數(shù)據(jù)項(xiàng)中用name表示數(shù)據(jù)項(xiàng)名稱， value表示單個(gè)數(shù)據(jù)項(xiàng)的數(shù)值；
data數(shù)組示例：[1,2,5,...] ,["例子1","例子2",...]
? ? ? ? ? ? ? ? ? ? [ {value:100,name:"例子1"}，{value:120,name:"例子2"},...]
換行：\n
echarts3.7以后版本開(kāi)始支持富文本標(biāo)簽rich，允許對(duì)文字標(biāo)簽進(jìn)行樣式設(shè)置
下面整理了一下使用頻率較高的配置（折線和餅圖），具體配置看需求
5、餅圖demo
var data = [{name:"三甲",value:4},{name:"三乙",value:2},{name:"二乙",value:1}];
var optionPinLeft = {
title: {
? ? text:'醫(yī)院級(jí)別',
? ? subtext:'',
? ? textStyle:{fontSize:12},
? ? x:'10%'
},
tooltip: {
? ? trigger:'item',
? ? formatter:"{a} : {c} (u0z1t8os%)"
},
color: ['#6a8bc0','#e55b57','#49586e','#34b7f1','#58cb91'],
series: [{
? ? name:'站點(diǎn)級(jí)別',
? ??type:'pie',
? ? radius:'60%',
? ? center: ['50%','60%'],
? ? data: data,
? ? itemStyle: {
? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ?shadowBlur:10,
? ? ? ? ? ? ? ? ? shadowOffsetX:0,
? ? ? ? ? ? ? ? ? shadowColor:'rgba(0, 0, 0, 0.5)'
? ? ? ? ? ? ? ? ? ?}
? ? ? }
}]
};
6、折線圖demo
折線圖代碼如下：
option = {
? ? backgroundColor: '#394056',
? ? title: {
? ? ? ? ? ?text: '請(qǐng)求數(shù)',
? ? ? ? ? ?textStyle: {
? ? ? ? ? ? ? ? ? ? ?fontWeight: 'normal',
? ? ? ? ? ? ? ? ? ? ?fontSize: 16,
? ? ? ? ? ? ? ? ? ? ?color: '#F1F1F3'
? ? ? ? ? ? ? ? ? },
? ? ?left: '6%'
},
tooltip: {
? ? ? trigger: 'axis',
? ? ? axisPointer: {
? ? ? ? ? ? ? ?lineStyle: {color: '#57617B'?}
? ? ? ? ? ? ? ?}
},
legend: {
? ? ? ? ?icon: 'rect',
? ? ? ? ?itemWidth: 14,
? ? ? ? ?itemHeight: 5,
? ? ? ? ?itemGap: 13,
? ? ? ? ?data: ['移動(dòng)', '電信'],
? ? ? ? ?right: '4%',
? ? ? ? ?textStyle: {
? ? ? ? ? ? ? ?fontSize: 12,
? ? ? ? ? ? ? color: '#F1F1F3'
? ? ? ? ? ? }
},
xAxis: [{
? ? ? ? type: 'category',
? ? ? ? boundaryGap: false,
? ? ? ? axisLine: {
? ? ? ? lineStyle: {?color: '#57617B'?}
? },
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
? ? ? ?type: 'value',
? ? ? ?name: '單位（%）',
? ? ? ?axisTick: {show: false?},
axisLine: {
? ? ? ?lineStyle: {?color: '#57617B'}
},
axisLabel: {
? ? ? ? margin: 10,
? ? ? ?textStyle: {fontSize: 14?}
},
splitLine: {?lineStyle: {?color: '#57617B'?}?}
}],
series: [{
? ? ? ?name: '移動(dòng)',
? ? ? type: 'line',
? ? ? smooth: true,
? ? ? symbol: 'circle',
? ? ? symbolSize: 5,
? ? ? showSymbol: false,
? ? ? ?lineStyle: {
? ? ? ? ? ? ? ? normal: {width: 1}
? ? ? ? ? },
areaStyle: {
? ? ? ? ?normal: {
? ? ? ? ? ? ? ? ?color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [?offset: 0,?color: 'rgba(137, 189, 27, 0.3)'?}, {offset: 0.8,?color: 'rgba(137, 189, 27, 0)'?}?], false),
? ? ? ? ? ? ? ? ? ?shadowColor: 'rgba(0, 0, 0, 0.1)',
? ? ? ? ? ? ? ? ? ?shadowBlur: 10
? ? ? ? ? ? ? ? ? }
},
itemStyle: {
? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? color: 'rgb(137,189,27)',
? ? ? ? ? ? ? ? ? borderColor: 'rgba(137,189,2,0.27)',
? ? ? ? ? ? ? ? ? ?borderWidth: 12
? ? ? ? ? ? ?}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
? ? ? ? ? name: '電信',
? ? ? ? ? type: 'line',
? ? ? ? ? smooth: true,
? ? ? ? ? symbol: 'circle',
? ? ? ? ? symbolSize: 5,
? ? ? ? ? showSymbol: false,
? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? ? ? ? ?normal: {
? ? ? ? ? ? ? ? ? ? ? width: 1
? ? ? ? ? ? ? ? ? ? }
?},
areaStyle: {
? ? ? ? ? normal: {
? ? ? ? ? color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0, 136, 212, 0.3)'}, {offset: 0.8,color:'rgba(0,136, 212, 0)'}], false),
? ? ? ? ? shadowColor: 'rgba(0, 0, 0, 0.1)',
? ? ? ? ? shadowBlur: 10
? ? ? ? ? }
},
itemStyle: {
? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ?color: 'rgb(0,136,212)',
? ? ? ? ? ? ? ? ? ? ?borderColor: 'rgba(0,136,212,0.2)',
? ? ? ? ? ? ? ? ? ? ?borderWidth: 12
? ? ? ? ? ? ? }
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}]
};
