echarts 环形图；echarts图例单行显示；echarts label键名和键值同时显示

祝你今天也快乐

已于 2023-04-06 16:57:22 修改

阅读量565

点赞数

分类专栏： vue echarts 文章标签： echarts 前端 javascript

于 2023-03-28 11:26:38 首次发布

本文链接：https://blog.csdn.net/killerdoubie/article/details/129812563

版权

vue 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

echarts

9 篇文章 0 订阅

订阅专栏

html

 <div id="echart" ref="echart" style="width: 100%;height: 260px;"></div>

配置

initBar() {
            let dateline = this.$refs.echart
            this.myChart = this.$echarts.init(dateline);
            this.myChart.clear();
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '0',
                    left: 'center',
                    icon: "circle", //图例设置为圆形
                    type: 'scroll', //图例多的情况下可以整行显示 有左右控制键
                    itemGap: 20, //这个值是用来调图例之间的间距

                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],//设置为环形
                        data: this.alarmAnalyse.data,
                        label: {
                            alignTo: 'edge',
                            formatter: '{name|{b}}\n{time|{c}}',//键名和键值都显示
                            minMargin: 5,
                            edgeDistance: 10,
                            lineHeight: 15,
                            rich: {
                                time: {
                                    fontSize: 16,
                                    color: '#1677ee'//修改键值的样式
                                }
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            this.myChart.setOption(option);
        },

数据格式

this.alarmAnalyse.data = [
        { name: '压力报警', value: 172 },
        { name: '泵故障报警', value: 79 },
        { name: '水箱报警', value: 39 },
        { name: '泵房报警', value: 43 },
        { name: '变频器故障报警', value: 44 },
        { name: '市政、传感器报警', value: 41 }
]