vue如何引入echarts（vue+webpack4.0+iview2.14+vuex+es6+stylus架构三）

第一步:引入echart依赖

cnpm i echarts --save

第二步:使用ecahrt

src/main.js
import echarts from 'echarts'
Vue.prototype.$echarts=echarts

解释：

    在main.js中引入echarts， 然后赋值到Vue的原型上面，在页面就可以使用this.$echarts获取到了

第三步:实例效果和代码

<template>
  <div class="content-box">
    <!-- vue的ref可以通过this.$refs.获取到DOM节点 -->
    <!-- echart容器div必须设置高度，否则不显示 -->
    <div ref="echart" style="height:300px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
    });
  },
  methods:{
    initEchart(){
      //获取DOM节点并初始化
      let chart = this.$echarts.init(this.$refs.echart);
      //编写echart参数
      let option = {
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[220, 182, 191, 234, 290, 330, 310]
          },
        ]
      };
      //设置图表的参数
      chart.setOption(option);
    }
  }
}
</script>