vue 项目为echarts图添加点击事件 及常见的两问题分析

vue 项目里用echarts已经很长一段时间了，项目的配置项什么的也查了不少， 但是隔断时间换个项目， 很多内容都容易忘记，或者掉进之前踩过的坑， 所以下面做个简单的记录：

 

步骤一：

本地安装echarts

npm install echarts --save

 

步骤二：

在main文件里面先引入echars：

import echarts form ‘echars’;

 

然后将echarts挂载到vue的原型链上去：

Object.defineProperties(Vue.prototype,{

    echarts: {

        value: echarts,

        writeable: false,

    }

})

 

步骤三：

在页面内应用， 给需要添加的点击事件的div 添加id：echartsBox

var myChart = echarts.init(document.getElementById('echartBox'));

myChart.on('click', function (params) {
    console.log(params);
});

 

可能遇到的问题：

1. import ECharts from 'vue-echarts/components/ECharts.vue'  引入的echarts模块可以以组件的形式来使用echarts组件， 但是不包含init事件，不能与前文中直接引入的echarts