echarts南丁格尔玫瑰图

最新推荐文章于 2025-03-09 17:00:33 发布

初级前端工程师毛毛

最新推荐文章于 2025-03-09 17:00:33 发布

阅读量252

点赞数

文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/weixin_38891273/article/details/120696496

版权

此博客介绍如何使用Echarts库创建了一个显示告警原因的饼状图，通过'pie'类型展示了数据的占比和详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <div id="myChart1" :style="{width: '464px', height: '234px'}"></div>

 showCharts(){
                let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
                var option1;
                option1 = {
                tooltip: {
                        trigger: 'item'
                    },
                    legend:  {
                        top: '5%',
                        left: 'center',
                        textStyle: {
                                color: 'rgba(255, 255, 255, .9)'
                            }
                    },
                    series : [
                        {
                            name: '告警原因',
                            type: 'pie',
                            radius: [55,110],
                            // roseType: 'angle',
                            center:['50%','58%'],
                            data: this.alarmInfo,
                            label: {
                                formatter: '{b}\n{c}次 {d}%',
                                textStyle: {
                                    color: 'rgba(255, 255, 255, .9)'
                                }
                            }
                        }
                    ]
                };
                option1 && myChart1.setOption(option1);
            },