vue里面使用echarts

npm install echarts -S

或者使用淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

在main.js中引入echarts

import echarts from ‘echarts’

Vue.prototype.$echarts = echarts

使用ECharts的时候遇到了报错：

Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”

其实产生这个的原因是因为echarts的版本太高了，

可以安装低版本的echarts

npm install echarts@4.8.0 --save或者let echarts = require(‘echarts’)

正确的echarts引入方式：

let echarts = require(‘echarts’)

或

import * as echarts from 'echarts’

在Echarts.vue中

<template>

  <div>

      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  </div>

</template>

<script>

let echarts = require(‘echarts’)

export default {

  name: 'hello',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  },

  mounted(){

    this.drawLine();

  },

  methods: {

    drawLine(){

        // 基于准备好的dom，初始化echarts实例

        let myChart = echarts.init(document.getElementById('myChart'))

        // 绘制图表

        myChart.setOption({

            title: { text: '在Vue中使用echarts' },

            tooltip: {},

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        });

        //添加点击事件

        myChart.on('click', function (params) {       

                console.log(params,'跳转参数')        

         });

    }

  }

}

</script>