Vue项目中使用Echarts

前端数据可视化工具：ECharts

1、安装

npm install echarts --save-dev

2、在项目的main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3、在Vue组件中使用

用法一：

<template>
  <div ref="lineImg" class="lineEcharts"></div>
</template>
 
<script>
  import echarts from 'echarts';
  export default {
    name: 'lineCharts',
    mounted () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.lineImg);
      // 指定图表的配置项和数据
      var option = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  };
</script>
 
<style scoped>
  .lineEcharts {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
  }
</style>

用法二：

<template>
  <div ref="lineImg" class="lineEcharts"></div>
</template>
 
<script>
  import echarts from 'echarts';
  export default {
    name: 'lineCharts',
    methods: {
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.lineImg);
        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
    mounted () {
      this.drawLine();
    }
  };
</script>
 
<style scoped>
  .lineEcharts {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
  }
</style>

注意：在绘图前必须要为 ECharts 准备一个具备高宽的 DOM 容器。在Vue中用ref获取DOM元素