- 使用 echarts 版本: "echarts": "^4.3.0"
- 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S
-
在 main.js 入口文件中全局引入:
import* Vue *from* 'vue' import* Echarts *from* 'echarts' *// 引入Echarts* Vue.prototype.$echarts = Echarts -
echarts 配置文件( 文件名 echartsMould.js )
1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。 2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 3. 这样的处理方式也方便组件化的实现。
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'
}
}
}
]
}
- .vue 文件，当前 echarts 图表组件所在文件
<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 = carflow
carflow.setOption(this.option) // setOption 用 this.option 中的数据开始作图
},
destroyed () {
window.removeEventListener('resize', this.carflow, 100)
}
}
}
</script>
<style scoped>
</style>
- echarts 图表图片展示
双柱状图&折线图.gif
网友评论