Vue 后台管理项目14-ECharts完成数据报表

ECharts完成数据报表

官方传送门https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

image

Ⅰ.安装ECharts插件：cnpm install echarts --save

Ⅱ.引入ECharts：一般都是某个单页面集中使用，可以在应用的页面单独引入，当然也可以在main.js里全局引入

// 引入ECharts：下面两种方法都可以

➀ var echarts = require('echarts');

➁ import echarts from 'echarts';

Ⅲ.准备dom容器，初始化echarts实例

➀ 简单echarts视图：

image

<template>
  <div id="reports">
    <!-- 顶级面包屑 -->
    <el-row>
      <el-col :span="24">
        <breadcrumb :level2="level2" :level3="level3"></breadcrumb>
      </el-col>
    </el-row>
    <!-- echarts容器 -->
    <el-row>
      <el-col :span="12">
         <!-- Elemenet组件 阴影卡片 -->
         <el-card shadow="always">
           <div class="echarts-num" style="width: 700px;height:500px;"></div>
         </el-card>
      </el-col>
      <el-col :span="12">
         <!-- Elemenet组件 阴影卡片 -->
         <el-card shadow="always">
           <div class="echarts-trend" style="width: 700px;height:500px;"></div>
         </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 引入ECharts
import echarts from 'echarts';
export default {
  //写了name方便在Vue Devtools谷歌插件应用内找到对应的组件
  name: "user",
  data() {
    return {
      level2: "数据统计",
      level3: "数据报表",
      data: ['2019/4/10', '2019/4/11', '2019/4/12', '2019/4/13', '2019/4/14', '2019/4/15'],
      option1:{
          name: '用户访问量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      },
      option2:{
          name: '用户访问趋势',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
      }
    }
  },
  //生命周期函数
  async mounted(){
    // 基于准备好的dom，初始化echarts实例
    let  myChart = echarts.init(document.querySelector('.echarts-num'));
    // 绘制图表
    myChart.setOption({
        //添加标题
        title: {
            text: '近期用户访问量'
        },
        //添加小贴士
        tooltip: {},
        xAxis: {
            data: this.data
        },
        yAxis: {},
        //在series属性中，添加图形类型以及数据
        series: [this.option1]
    });

     // 基于准备好的dom，初始化echarts实例
    let  myChart1 = echarts.init(document.querySelector('.echarts-trend'));
    // 绘制图表
    myChart1.setOption({
        title: {
            text: '近期用户访问趋势'
        },
        tooltip: {},
        xAxis: {
            data: this.data
        },
        yAxis: {},
        series: [this.option2]
    });
  }

};
</script>
<style lang="scss">
#reports {

}
</style>

➁ 复合echarts视图：

image

<template>
  <div id="reports">
    <!-- 顶级面包屑 -->
    <el-row>
      <el-col :span="24">
        <breadcrumb :level2="level2" :level3="level3"></breadcrumb>
      </el-col>
    </el-row>
    <!-- echarts容器 -->
    <el-row>
      <el-col :span="12">
         <!-- Elemenet组件 阴影卡片 -->
         <el-card shadow="always">
           <div class="echarts-num" style="width: 700px;height:500px;"></div>
         </el-card>
      </el-col>
      <el-col :span="12">
         <!-- Elemenet组件 阴影卡片 -->
         <el-card shadow="always">
           <div class="echarts-trend" style="width: 700px;height:500px;"></div>
         </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 引入ECharts
import echarts from 'echarts';
export default {
  //写了name方便在Vue Devtools谷歌插件应用内找到对应的组件
  name: "user",
  data() {
    return {
      level2: "数据统计",
      level3: "数据报表",
      data: ['2019/4/10', '2019/4/11', '2019/4/12', '2019/4/13', '2019/4/14', '2019/4/15'],
      option1:{
          name: '用户访问量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      },
      option2:{
          name: '用户访问趋势',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
      }
    }
  },
  //生命周期函数
  async mounted(){
    // 基于准备好的dom，初始化echarts实例
    let  myChart = echarts.init(document.querySelector('.echarts-num'));
    // 绘制图表
    myChart.setOption({
        //添加标题
        title: {
            text: '近期用户访问量'
        },
        //添加小贴士
        tooltip: {},
        xAxis: {
            data: this.data
        },
        yAxis: {},
        //在series属性中，添加图形类型以及数据
        series: [this.option1,this.option2]
    });
  }

};
</script>
<style lang="scss">
#reports {
   
  
}
</style>

本文同步发表在我的个人博客：https://www.lubaojun.com/