EchartJs报表展示

1、Echarts介绍

我们当前项目下的图形报表是使用echarts实现，所以接下来我们学习下echart的基本使用。

echarts Apache官网：https://echarts.apache.org/zh/index.html

点击所有示例，可快速学习echarts的基本使用：

我们以折线图为例，演示echarts的基本使用：

我们发现对于不同的图形展示方式，只需提供x轴和y轴数据即可；

2、Vue整合Echarts快速入门

2.1 Vue架手架安装echarts

1) 打开Vue脚手架工程

​ vscode打开: day03\资料\echart_vue_project 工程，启动命令：npm run serve

2)工程安装echarts依赖

​ 运行安装命令：npm install echarts -S

说明：-D：仅仅用于开发环境 -S：既用于开发环境，又可用于生产环境

命令执行完毕后，我们发现工程package.json文件下已经引入了echarts依赖：

  "dependencies": {
    "core-js": "^3.6.5",
    "echarts": "^5.2.2",
    "vue": "^2.6.11"
  }

2.2 配置echarts

在main.js入口文件下引入echarts,并将echarts对象挂在Vue对象下；

import Vue from 'vue'
import App from './App.vue'
//引入echarts对象
import * as echarts from 'echarts'

Vue.config.productionTip = false

//挂在在Vue全局对象下
Vue.prototype.$echarts=echarts
new Vue({
  render: h => h(App),
}).$mount('#app')

2.3 vue使用echarts

在App.vue组件下添加echarts视图资源：

<template>
  <div id="app" >
    <h1>echartjs入门</h1>
    <div ref="echartDiv" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
    drawLine(){
           this.myChart = this.$echarts.init(this.$refs.echartDiv);
           let eOption = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
              }
            ]
    };
    this.myChart.setOption(eOption);
    }
  },
  mounted(){
    this.drawLine();
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.4 页面效果

3、项目中Echarts的使用

3.1 配置和使用流程说明

我们当前项目的前端也是同样的使用方式，在package.json中已经引入了echart依赖：

  "dependencies": {
    "echarts": "^4.7.0",
   	//省略.......
  }   

main.js中也已经引入echarts:

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

home组件下使用echarts：