echarts使用

官方文档: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'
                }
            }
        }]
    })
}