vue项目中使用echarts

1、安装 echarts 安装包
npm install echarts --save
2、在具体需要使用图标的vue组件中如下使用（这里以按需引入的方式使用）

<template>
  <div class="hello">
  </div>
</template>

<script>
// 引入echarts基本模板
let echarts = require("echarts/lib/echarts");
// 引入需要用到的echarts组件(柱状图)
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
</script>

3、准备放图标的模板容器(为ECharts准备一个具备大小（宽高）的Dom )

 <div ref="mychart" class="echart-main" style="width:600px;height:400px;"></div>

4、更具需要，数据和 charts 变量可以放在 data 中
5、methods 中 定义方法，内容就是官方提到的echarts的步骤。

methods: {
   drawLine() {
     let myChart = echarts.init(this.$refs.mychart);
     let option = {
       title: {
         text: "ECharts 入门示例"
       },
       tooltip: {},
       legend: {
         data: ["销量"]
       },
       xAxis: {
         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
       },
       yAxis: {},
       series: [
         {
           name: "销量",
           type: "bar",
           data: [5, 20, 36, 10, 10, 20]
         }
       ]
     };
     myChart.setOption(option);
   }
 }

6、在mounted 中调用 （mounted 是 vue 的生命周期，表示挂载完毕，html 已经渲染)

 mounted() {
    this.drawLine();
  },

7、如果是异步获取的数据，比如用axios,那只需要把配置项放到then方法后面：

initChart() {
      this.chart = echarts.init(this.$refs.mychart);
      // 把配置和数据放这里
      this.axios.get('/url').then((data) => {
        this.myChart.setOption({

        })
      })
    }

完整的vue文件如下:

<template>
  <div class="hello">
    <div ref="echart" class="echart-main" style="width:600px;height:400px;"></div>
  </div>
</template>

<script>
// 引入echarts基本模板
let echarts = require("echarts/lib/echarts");
// 引入需要用到的echarts组件(柱状图)
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "HelloWorld",
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(this.$refs.echart);
      let 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 scoped>
</style>