Vue echarts 饼图 引导线加小圆点，文字分行展示

需求

重点代码

完整代码

  initChart() {
            // 创建 echarts 实例。
            var myChartOne = this.$echarts.init(this.$refs.Echart);
            myChartOne.setOption({
                tooltip: {
                    trigger: "item",
                },
                title: {
                    top: 'center',
                    text: [
                        '{name|' + this.chartTitle.name + '}',
                        '{value|' + this.chartTitle.value + '}',
                    ].join('\n'),

                    left: '50%',
                    top: '45%',
                    textAlign: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                color: '#ffff',
                                fontSize: 12,
                                fontWeight: '700',
                                paddingBottom: 5,
                            },
                            value: {
                                color: '#ffff',
                                fontSize: 12,
                                fontWeight: '700',
                            },
                        },
                    },
                },
                color: this.colorArr,//自定义环形图颜色
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '50%'],
                        data: this.chartData,
                        label: {
                            //文字部分 显示内容为{b}：{c}可以换自己像显示的
                            //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
                            //{hr|}为圆点显示内容
                            // formatter: '{a|{c}} \n {hr|}',
                            lineHeight: 10,
                            formatter: [
                                '{a|{b}}', //name值
                                '{hr|}',//小圆点
                                '{p|{c}}',//value值
                                // 引导线下面文字
                            ].join('\n'), // 用\n来换行

                            //折线图文字颜色
                            color: "#fffdef",
                            rich: {
                                //圆点位置大小配置
                                hr: {
                                    //auto自定义
                                    backgroundColor: "auto",
                                    borderRadius: 5,
                                    width: 5,
                                    height: 5,
                                    padding: [0, -5],
                                },
                                a: {
                                    padding: [-10, 5, 0, 5]
                                },
                                p: {
                                    padding: [0, 5, 0, 5]
                                }
                            }
                        },
                        //折线图长度
                        labelLine: {
                            //第一段
                            length: 15,
                            //第二段
                            length2: 30
                        },

                    }
                ]
            });
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

需求2

完整代码

initChart() {
            // 创建 echarts 实例。
            var myChartOne = this.$echarts.init(this.$refs.Echart);
            myChartOne.setOption({
                tooltip: {
                    trigger: "item",
                },
                title: {
                    top: 'center',
                    text: [
                        '{name|' + this.chartTitle.name + '}',
                        '{value|' + this.chartTitle.value + '}',
                    ].join('\n'),

                    left: '50%',
                    top: '45%',
                    textAlign: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                color: '#ffff',
                                fontSize: 12,
                                fontWeight: '700',
                                paddingBottom: 5,
                            },
                            value: {
                                color: '#ffff',
                                fontSize: 12,
                                fontWeight: '700',
                            },
                        },
                    },
                },
                color: this.colorArr,//自定义环形图颜色
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '50%'],
                        data: this.chartData,
                        label: {
                            //文字部分 显示内容为{b}：{c}可以换自己像显示的
                            //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
                            //{hr|}为圆点显示内容
                            formatter: '{a|{b}：{c}}\n{hr|}',
                            //折线图文字颜色
                            color: "#fffdef",
                            rich: {
                                //圆点位置大小配置
                                hr: {
                                    //auto自定义
                                    backgroundColor: "auto",
                                    borderRadius: 3,
                                    width: 3,
                                    height: 3,
                                    padding: [3, 3, 0, -12]
                                },
                                a: {
                                    padding: [-10, 5, 0, 5]
                                },
                            }
                        },
                        //折线图长度
                        labelLine: {
                            //第一段
                            length: 15,
                            //第二段
                            length2: 25
                        },
                    }
                 ]
            });
        },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

tips

圆点大小可以通过一下四个属性来修改