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

蓝胖子的多啦A梦

已于 2023-09-07 15:22:15 修改

阅读量974

点赞数

文章标签： vue.js echarts 前端

于 2023-09-07 15:07:12 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/132737992

版权

需求

在这里插入图片描述

重点代码

在这里插入图片描述

完整代码

  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
                        },

                    }
                ]
            });
        },

需求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
                        },
                    }
                 ]
            });
        },