ECharts支持webpack引入，图省事可以将ECharts整个引入var echarts = require(‘echarts’);不过ECharts还是不小的，大部分情况只是用到很少一部分功能，我平时习惯于按需引入的。

    1. // 引入 ECharts 主模块
    2. var echarts = require('echarts/lib/echarts');
    3. // 引入柱状图
    4. require('echarts/lib/chart/bar');
    5. // 引入提示框和标题组件
    6. require('echarts/lib/component/tooltip');
    7. require('echarts/lib/component/title');

    接下来我们就要在vue中声明初始化ECharts了。因为ECharts初始化必须绑定dom，所以我们只能在vue的mounted生命周期里初始化。

    1. mounted() {
    2.   this.initCharts();
    3. },
    4. methods: {
    5.   this.initCharts() {
    6.     this.chart = echarts.init(this.$el);
    7.     this.setOptions();
    8.   },
    9.   setOptions() {
    10.     this.chart.setOption({
    11.       title: {
    12.         text: 'ECharts 入门示例'
    13.       },
    14.       tooltip: {},
    15.       xAxis: {
    16.         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    17.       },
    18.       yAxis: {},
    19.       series: [{
    20.         name: '销量',
    21.         type: 'bar',
    22.         data: [5, 20, 36, 10, 10, 20]
    23.       }]
    24.     })
    25.   }
    26. }

    就这样简单，ECharts就配置完成了，这时候你想说我的data是远程获取的，或者说我动态改变ECharts的配置该怎么办呢？我们可以通过watch来触发setOptions方法

    1. //第一种 watch options变化 利用vue的深度 watcher，options一有变化就重新setOption
    2. watch: {
    3.   options: {
    4.     handler(options) {
    5.       this.chart.setOption(this.options)
    6.     },
    7.     deep: true
    8.   },
    9. }
    10. //第二种 只watch 数据的变化 只有数据变化时触发ECharts
    11. watch: {
    12.   seriesData(val) {
    13.     this.setOptions({series:val})
    14.   }
    15. }