此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 。
废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
1. 使用 echarts 版本: “echarts”: “^4.3.0”
2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S
3. 在 main.js 入口文件中全局引入:
1. import* Vue *from* 'vue'2. import* Echarts *from* 'echarts' *// 引入Echarts*3. Vue.prototype.$echarts = Echarts
4. echarts 配置文件( 文件名 echartsMould.js )
1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 3. 这样的处理方式也方便组件化的实现。
5. 封装 Echarts 文件 echartsMould.js 具体配置代码
import echarts from 'echarts'/*** 1. 流量趋势--carFlow.vue*/var option_carFlow = {tooltip: {//提示框设置trigger: 'axis',axisPointer: {//设置横线的样式type: 'cross',crossStyle: {color: 'red'}},textStyle: {//设置提示框的对齐方式align: 'left'}},grid: {//设置内容区域距离周边的距离left: '3%',right: '0',top: '10px',bottom: '0px',containLabel: true},toolbox: {show: false},legend: {show: false},xAxis: [{type: 'category',data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],axisPointer: {type: 'shadow'},axisTick: {//刻度show: false //不显示刻度线},axisLine: {lineStyle: {color: '#1E2240' //轴线的颜色}},axisLabel: {//轴线字体样式设置textStyle: {fontFamily: 'ArialMT',fontSize: '12',color: '#86A5C3',}}}],yAxis: [{type: 'value',min: 0,max: 0,interval: 0,axisLabel: {formatter: '{value}',textStyle: {fontFamily: 'ArialMT',fontSize: '12',color: '#86A5C3',}},splitLine: {//去除背景网格线show: false},axisTick: {//刻度show: false //不显示刻度线},axisLine: {lineStyle: {color: '#1E2240' //轴线的颜色}}},{type: 'value',min: 0,max: 0,interval: 0,axisLabel: {formatter: '{value}',textStyle: {fontFamily: 'ArialMT',fontSize: '12',color: '#86A5C3',}},splitLine: {//去除背景网格线show: false},axisTick: {//刻度show: false//不显示刻度线},axisLine: {lineStyle: {color: '#1E2240' //轴线的颜色}}}],series: [{//柱状(左边数据)name: '卡口进',type: 'bar',data: [0.2,0.2,0.3,0.23,0.12,0.8,0.5,0.9,0.23,0.12,0.8,0.8],itemStyle: {//柱状图的背景色normal: {color: '#0060D1'}},barWidth: 6},{//柱状(左边数据)name: '卡口出',type: 'bar',data: [0.112,0.312,0.123,0.213,0.112,0.312,0.123,0.213,0.123,0.213,0.112,0.213],itemStyle: {//柱状图的背景色normal: {color: '#00D2FF'}},barWidth: 6},{//折线(右边数据)name: '总量',type: 'line',yAxisIndex: 1,data: [0.112,0.312,0.3,0.6,0.8,0.2,0.7,0.5,0.3,0.6,0.8,0.6],itemStyle: {//折线颜色normal: {color: '#2A47F8'}}}]}
6. 调用 Echarts 封装内容 .vue 文件具体配置代码
<template><!-- 流量趋势 --><div class="flow-shel" ref="carflow" id="main" style="width:100%; height:calc(100% - 48px)"></div></template><script>/*** 引入 echarts 模板*/import { option_carFlow } from './echartsMould.js'/*** 引入时间封装文件*/export default {data () {return {resizeTimer: null,option: option_carFlow,timerSetInterval: null,}},mounted () {let _this = this_this.getType()window.addEventListener('resize', function () { //实现 echarts 图表, 随页面宽高变化, 而变化 。if (_this.resizeTimer) {clearTimeout(_this.resizeTimer)}if (_this.carflow) {_this.resizeTimer = setTimeout(function () {_this.carflow.resize()}, 100)}}),this.timerSetInterval = setInterval(() => {//当num等于100时清除定时器_this.getType()}, 5 * 60 * 1000);_this.destroyed()},// 清除定时器beforeDestroy() {//清除定时器clearInterval(this.timerSetInterval);},methods: {async getType () {let _this = this/*** 此处的处理方式当时项目数据格式问题，需要处理的内容比较多；大家可以根据自己的业务需求以及后台返回的数据格式自己进行处理*/// let flowIn = []// let flowOut = []// let vehicleCnt = []// let arrayId = 0// let oddId// let evenId// /**// * URL// */// const urlSum = {// urlFlow: '/flowTrend/KeyAreaFlowTrendAnalysisByType.htm?areaId=' + _this.areaId + '&type=' + _this.type + '&startDay=' + _this.startDay + '&endDay=' + _this.endDay// }// /**// * 数据请求// */// let resFlow = await _this.$axios.getEig(urlSum.urlFlow)// /**// * 数据处理// */// if (resFlow.resultList.length % 2 == 1) {// resFlow.resultList.length = resFlow.resultList.length -1// }// for (let i = 0; i< resFlow.resultList.length; i++) {// if(resFlow.resultList.length < arrayId) {//return false// }// arrayId = arrayId + 1// arrayId++// oddId = i++// evenId = arrayId-1// flowIn.push(resFlow.resultList[oddId].flowIn + resFlow.resultList[evenId].flowIn)// flowOut.push(resFlow.resultList[oddId].flowOut + resFlow.resultList[evenId].flowOut)// vehicleCnt.push(resFlow.resultList[oddId].vehicleCnt + resFlow.resultList[evenId].vehicleCnt)// }// /**// * 获取各条数据的最大值// */// let maxFlowIn = flowIn[0]// let maxFlowOut = flowOut[0]// let maxFlowOutNumFir = vehicleCnt[0]// for (let k = 0; k < flowIn.length - 1; k++) {// maxFlowIn = maxFlowIn < flowIn[k + 1] ? flowIn[k + 1] : maxFlowIn// maxFlowOut = maxFlowOut < flowOut[k + 1] ? flowOut[k + 1] : maxFlowOut// maxFlowOutNumFir = maxFlowOutNumFir < vehicleCnt[k + 1] ? vehicleCnt[k + 1] : maxFlowOutNumFir// }// if (maxFlowIn > maxFlowOut) {// _this.option.yAxis[0].max = maxFlowIn// } else {// _this.option.yAxis[0].max = maxFlowOut// }/*** 具体的赋值方式在这里，大家可以根据得到的数据格式来赋值。*/// _this.option.yAxis[1].max = maxFlowOutNumFir// _this.option.yAxis[0].interval = Math.ceil((_this.option.yAxis[0].max / 5) / 10) * 10// _this.option.yAxis[1].interval = Math.ceil((_this.option.yAxis[1].max / 5) / 10) * 10// /**// * 赋值// */// _this.option.series[0].data = flowIn// _this.option.series[1].data = flowOut// _this.option.series[2].data = vehicleCnt/*** 初始化 echarts*/let carflow = this.$echarts.init(this.$refs.carflow) // 初始化一个 echarts_this.carflow = carflowcarflow.setOption(this.option) // setOption 用 this.option 中的数据开始作图},destroyed () {window.removeEventListener('resize', this.carflow, 100)}}}</script><style scoped></style>
7. echarts 调用成功 gif 图片展示
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “Echarts 图表” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
