vue-cli搭建的项目中使用Echarts

前端数据可视化工具：ECharts

1、安装

cnpm 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>

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