官方文檔:https://echarts.apache.org/zh/index.html
使用技巧：點擊例子-》配置項，可以看到哪些選項可以配置
formatter中abc的含義（注意類似{a}缠捌、炸站使用return的方式不生效）
1、折線（區(qū)域）圖、柱狀（條形）圖: a（系列名稱）喘蟆，b（類目值）搞乏，c（數值）, d（無）
2、散點圖（氣泡）圖 : a（系列名稱）鹅巍，b（數據名稱），c（數值數組）, d（無）
3料祠、餅圖骆捧、雷達圖 : a（系列名稱），b（數據項名稱）髓绽，c（數值）, d（百分比）
4凑懂、弦圖 : a（系列名稱），b（項1名稱）梧宫，c（項1-項2值）接谨，d（項2名稱)摆碉， e(項2-項1值)
5、除abcd外的自定義值
// formatter,自定義展示的內容脓豪，其中p,q為自己定義的值巷帝，item.p為p的值， \n 表示換行的意思
formatter: '{b|扫夜}\n{p|P:' + item.p + 'KW}\n{q|Q:' + item.q + 'KW}',
rich: { // rich可以設置p q b 的樣式楞泼，即 | 左側定義的內容
p: { // 自定義的p的樣式
color: '#3c3c3c',
lineHeight: 22,
align: 'center'
},
q:{ // 自定義的q的樣式
color: '#3c3c3c',
lineHeight: 22,
align: 'center'
},
b: { // b的樣式
color: '#000',
fontSize: 14,
lineHeight: 20
}
}
一、餅圖
import * as echarts from 'echarts';
...
initChart() {
this.chart && this.chart.dispose();
this.chart = echarts.init(document.getElementById('chart'));
this.chart.setOption({
tooltip: { // 點擊顯示數據
trigger: 'item'笤闯， // 點擊餅圖塊觸發(fā)
formatter: function(params) {
// 自定義返回數據顯示: 圖例圖形+名字：+數值%
return params.marker + params.name + ':' + value + '%'
}
},
legend: { // 圖例說明
x:'left', // 圖例x軸的位置堕阔，left/center/right/具體數值
y:'top', // 圖例y軸的位置，top/center/bottom/具體數值
backgroundColor: '#fff', // 圖例背景顏色
borderColor:'#f00', // 圖例邊框顏色
borderWidth: '15', // 邊框顏色
padding: [0, 5], // 內邊距颗味，和同css一樣超陆，只是改為數組傳入
itemHeight: 10, // 圖例圖形高度
itemWidth: 10, // 圖例圖形寬度
orient: 'horizontal', // 水平顯示， vertical垂直顯示
type: 'scroll', // 如果個數太多浦马，一行滾動顯示时呀，不設置默認換行并排顯示
selected: { // 設置圖例的某個選項的數據默認是顯示還是隱藏
'展示名字1': false,
'展示名字2': true
},
data: [{
name: '展示名字1',
icon:'指定圖例項的icon，可以為內置的circle晶默、triangle等圖形7個圖形谨娜，或者自定義圖標的形式：'image://url'' ,
itemGap: 20, // 每一項的間距
textStyle: { // 設置字體樣式
fontWeight: 'bold',
color: 'orange'
}
}, {
name: '展示名字2',
icon:'circle'
}]
}，
color: ['#975FE6','#3AA1FE','#35CBCA','#4FCB73',' #FBD437','#F3637C'], // 不同塊的顏色
series: [ {
type: 'pie',
radius: ['40%', '60'], // 設置圓環(huán)的大小
data:this.chartData.map(item => {
return {
name: item.name,
value: item.value,
label: {
normal: {
color:'字體顏色' // 不同項顯示不同顏色磺陡，可以在這邊設置
}
}
}
})趴梢，
avoidLabelOverlap: true, // 避免標簽重疊
labelLine: {
normal: {
show: true, // false的時候不顯示線，默認為true
length: 15, // 第一段線長度
length2: 80, // 第二段線長度
align: 'right'
},
emphasis: { // 點擊的時候效果
show: true
}
},
label: {
normal: {
formatter:[
'a|1i01mcc% 币他',
'{b|}'
].join('\n'),
rich: { // 設置a坞靶、b樣式，即 | 左側定義的內容
a: {
left: 20,
padding: [0, -80, -15, -80]
},
b: {
height: 5,
width: 5,
lineHeight: 5,
marginBottom: 10,
padding: [0, -5],
borderRadius: 5,
backgroundColor: '#f00',
}
}
},
itemStyle: { // 塊樣式
borderWidth: 5, // 塊間的間距可以通過這個配合borderColor來實現圆丹，borderColor設置和圖表背景顏色一致的話，看起來就是塊的間距了
borderColor: '#fff'
}
}
}]
})
}
