官方文档:https://echarts.apache.org/zh/index.html
使用技巧：点击例子-》配置项，可以看到哪些选项可以配置
formatter中abc的含义（注意类似{a}、{b}使用return的方式不生效）
1、折线（区域）图、柱状（条形）图: 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|{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'， // 点击饼图块触发
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'], // 设置圆环的大小
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|{d}% {b}',
'{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'
}
}
}]
})
}
