首先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官网;
希望能帮到您,祝您生活愉快~