EchartJs报表展示
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：
