vue2中使用echarts

 大致使用步骤：

1. 安装：npm install echarts -S

2. 使用方式（三种）

   1. 导入echarts在组件内使用

   2. 导入全局 挂载原型上 全局使用

   3. 开发成vue插件

3. 使用 -main.js（在这里使用第二种）

   1. import * as echarts from 'echarts'

        Vue.prototype.$echarts = echarts;

    2. 直接使用

       this.$echarts.xxx

 

第一步安装插件库：npm install echarts --save

 在main.js中导入模块：import * as echarts from 'echarts'

注意一定是 * as 啊，因为echarts中有很多模块，我们要导入里面所有的模块

如果你直接 import echarts from 'echarts' 的话你console.log(echarts)的结果是underfined。

之后再把echarts挂载到vue的原型上：Vue.prototype.$echarts = echarts;

 然后使用的时候直接使用this.$echarts.xxx就可以了

 效果图：

 

 代码：

 

<template>

   <div class="">

      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

  <div id="main" style="width: 600px;height:400px;"></div>

   </div>

</template>

<script>

export default {

  name: 'HoMe',

  components: {},

  mounted(){

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

      var myChart = this.$echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据

      var option = {

        title: {

          text: 'ECharts 入门示例'

        },

        tooltip: {},

        legend: {

          data: ['销量']

        },

        xAxis: {

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

        },

        yAxis: {},

        series: [

          {

            name: '销量',

            type: 'bar',

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

          }

        ]

      }

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option)

  }

}

</script>

<style>

</style>