vue+echarts

第一步：安装 npm install echarts --save

第二步：引用 import * as echarts from 'echarts'  ，勿用import echcarts from echarts，否则提示 未typeError ： Cannot read property init of undefined。

            全局引用方式

                 main.js中

                import * as echarts from 'echarts'

                Vue.prototype.$echarts = echarts
                

               vue 中应用方式：this.$echarts.init

第三步：调用。

注意： echart 所在div设置宽度，否则不显示。

完成代码如下：

<template>

<div id="echartsId" style="width:300px;height:400px"></div>

</template> 

<script>
import * as echarts from 'echarts'
  export default {   
    mounted(){

   
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echartsId'));
    

    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
   }
  };
</script>