Vue使用eCharts过程（文章尾附完整代码）

1. 安装和导入

       安装：我这里以4.1.0为例，其他版本类似，

npm install echarts@4.1.0 --save

        导入：

import * as echarts from 'echarts'

2. 创建一个div容器，用来装图表

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

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

    var myEcharts = echarts.init(document.getElementById('main'))

4. 准备图表的配置项和数据option

var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      },

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

myEcharts.setOption(this.option);

6.结果显示：

 7.完整代码

<template>
  <div>
    <el-card>
      <!-- echarts使用第一步(安装): npm install echarts@4.1.0 --save -->
      <!-- echarts使用第二部,创建一个div容器 -->
      <div id="main" style="width:600;height:400px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name:'Report',
  data() {
    return {
      option:{
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      },
    }
  },
  //mounted是在dom完成之前执行的
  mounted(){
    // 第三步：基于准备好的dom，初始化echarts实例
    var myEcharts = echarts.init(document.getElementById('main'))
    //第四步：准备图表的配置项和数据option，可以写在data中
    //第五步：使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(this.option);
  },
  methods:{
  },
}
</script>

<style lang="less" scoped>
</style>