- 使用 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'
/**
* 3. 车辆来源--carSource.vue 与 mapEchart.vue
*/
var option_carPillar = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: { // 设置提示框的对齐方式
align: 'left'
}
},
grid: {
left: '3%',
right: '2%',
top: '10px',
bottom: '0',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['XXX 市', 'yyy 市', 'ZZZZ 市', '安阳市'],
axisTick: {
show: false
},
axisLabel: {
formatter: function (data) {
let valueTxt = ''
if (data.length > 6) {
valueTxt = data.substring(0, 7) + '...'
} else {
valueTxt = data
}
return valueTxt
},
textStyle: {
fontSize: '12',
fontFamily: 'PingFangSC-Regular',
color: '#86A5C3' // 坐标值的具体的颜色
},
// 设置字体的倾斜角度
interval: 0,
rotate: 30
},
axisLine: {
lineStyle: {
color: '#38449C' // 轴线的颜色
}
},
splitLine: { // 去除背景网格线
show: false
}
}
],
yAxis: [
{
type: 'value',
axisTick: { // 刻度
show: false // 不显示刻度线
},
axisLine: { // 设置轴线
show: false
},
axisLabel: {
textStyle: {
fontSize: '12',
fontFamily: 'ArialMT',
color: '#86A5C3' // 坐标值的具体的颜色
}
},
splitLine: {
lineStyle: { // 设置网格线的颜色
color: '#1E2240'
}
}
}
],
series: [
{
name: '车辆来源(XX)',
type: 'bar',
data: [222,234,532,324],
barWidth: 12, // 设置柱状图的宽度
itemStyle: {
normal: {
color: '#00ADFF'
}
}
}
]
}
- .vue 文件，当前 echarts 图表组件所在文件
<template>
<!-- 车辆来源(本埠) -->
<div class="source-shel" ref="carsource" id="main" style="width:100%; height:calc(100% - 48px)"></div>
</template>
<script>
/**
* 引入 echarts 模板
*/
import { option_carPillar } from '@/tools/monitor/echartsMould.js'
export default {
data () {
return {
resizeTimer: null,
option: option_carPillar,
timerSetInterval: null,
}
},
mounted () {
let _this = this
_this.getType()
window.addEventListener('resize', function () { // 实现 echarts 图表, 随页面宽高变化, 而变化 。
if (_this.resizeTimer) {
clearTimeout(_this.resizeTimer)
}
if (_this.carsource) {
_this.resizeTimer = setTimeout(function () {
console.log('_this.carsource : ', _this.carsource)
_this.carsource.resize()
}, 100)
}
}),
this.timerSetInterval = setInterval(() => {
_this.getType()
}, 5 * 60 * 1000);
_this.destroyed()
},
// 清除定时器
beforeDestroy() {
//清除定时器
clearInterval(this.timerSetInterval);
},
methods: {
async getType () {
let _this = this
/**
* 此处的处理方式当时项目数据格式问题，需要处理的内容比较多；大家可以根据自己的业务需求以及后台返回的数据格式自己进行处理
*/
// let dataNume = []
// let dataNum = []
// /**
// * URL
// */
// const urlSum = {
// urlCarSource: '/analyzeOutsideVeh/outsideVehByLicenseRegionJkq.htm?areaId=' + _this.areaId + '&beginDay=' + _this.beginDay + '&endDay=' + _this.endDay + '&isOutOfProvince=' + _this.isOutOfProvince + '&isWeekdays=' + _this.isWeekdays + '&isLongtime=' + _this.isLongtime + '&flowOrVeh=' + _this.flowOrVeh // 车辆来源(本埠)
// }
// /**
// * 数据请求
// */
// let resSour = await _this.$axios.getEig(urlSum.urlCarSource) // 车辆来源(本埠)
// /**
// * 数据处理
// */
// var resultListSum = resSour.resultList
// for (let i = 0; i < resultListSum.length; i++) {
// if (resultListSum[i].licenseRegion === '赣A') {
// resultListSum.splice(i, 1)
// }
// if (resultListSum[i].licenseRegion === '赣M') {
// resultListSum.splice(i, 1)
// }
// dataNume.push(resultListSum[i].licenseRegion)
// dataNum.push(resultListSum[i].flow)
// }
/**
* 具体的赋值方式在这里，大家可以根据得到的数据格式来赋值。
*/
// _this.option.xAxis[0].data = dataNume
// _this.option.series[0].data = dataNum
/**
* 初始化 echarts
*/
let carsource = this.$echarts.init(this.$refs.carsource) // 初始化一个echarts
_this.carsource = carsource
carsource.setOption(this.option) // setOption 用this.option中的数据开始作图
},
destroyed () {
window.removeEventListener('resize', this.carsource, 100)
}
}
}
</script>
<style scoped>
</style>
- echarts 图表图片展示
那个图
