阿丹：

        之前的项目中涉及到echarts都是使用jsp写的，但是现在越来普及vue。所以使用在vue上使用echarts就成了问题。

导入相关依赖

 在官网上面有说明npm安装Echarts依赖

 在vue中使用Echarts

上模版!!!!!!!!!!!!使用了mounted（）这个钩子函数。在页面完成渲染之后完成加载。

<template>
  <div>
    <div id="main" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderChart();
  },

  methods: {
    renderChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option = {};
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
/* Add any custom styles here */
</style>

动态渲染数据（重点）

原因：

        Echarts是不会给动态渲染的需要我们自动渲染数据的，需要我们手动的去渲染。

可以将option这个属性放在数据域中。

然后二次渲染的时候进行赋值。

this.myEcharts = this.$echarts.init(document.getElementById('main'), 'vintage')

this.myEcharts.setOption(this.option, true）

重点：

        重点是要使用第二个属性true因为只有使用了第二个属性才能让整个Echarts图表进行完全的重建。