在vue中怎么使用echarts实现一个简单的饼图

最新推荐文章于 2025-03-07 20:03:41 发布

zoooooooombie

最新推荐文章于 2025-03-07 20:03:41 发布

阅读量1.9k

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/zoooo_/article/details/119384026

版权

本文介绍如何使用ECharts实现带有点击事件的饼图，并详细解释了从安装到使用的全过程，包括下载ECharts、全局引入、定义图表样式及交互等关键步骤。

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

首先echarts官网链接https://echarts.apache.org/zh/index.html

我的视线效果，以及为饼图增加了点击事件，点击弹出一个提示框

下载：

我用npm install echarts --save这个命令没下载下来；我就选择了直接下载文件-》

我是选择了在线定制，因为我主要需要的是一个饼图；所以定制会小一点；

下载出来是一个echarts.min.js文件，将这个文件拖至你的项目目录；

第二步在main.js文件内全局引入echarts，并赋予Vue的原型$echarts

import echarts from './tools/echarts.min.js';
Vue.prototype.$echarts = echarts;

第三步在你需要使用echarts的vue文件内的html部分给写一个dom元素来

可以规定其大小

<div id="main" style="width: 600px;height:300px;"></div>

第三步初始化及写点击事件，在<script>标签里面可以写方法：

mounted(){
   this.draw();
},
methods: {
     draw(){
        this.myChart = this.$echarts.init(document.getElementById('main'))
        // 指定图表的配置项和数据
        var option = {
                title: {
                    text: '常见问题',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '问题原因',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1023, name: '解约失败'},
                            {value: 735, name: '等待银行扣款结果中'},
                            {value: 580, name: '解锁失败'},
                            {value: 484, name: '接口数据错误'},
                            {value: 300, name: '页面加载失败'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
         };
         let _this = this; //注意，要将this进行指代，否则在click里面this指向发生了改变
          
            this.myChart.setOption(option);
            //点击事件
             this.myChart.on('click',function(params){
                _this.$alert(params, '问题详情', {
                    confirmButtonText: '确定',
                    dangerouslyUseHTMLString:true,
                    callback: action => {}
                });
            });
            
        },
       
}

click事件需要在draw时写入，否则不太好触发；

简单的饼图就实现了，主要是多看看echarts官网；

希望能帮到您，祝您生活愉快～