- 使用 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. 這樣的處理方式也方便組件化的實現(xiàn)。
import echarts from 'echarts'
/**
* 2. 擁堵路段--carJam.vue
*/
var option_carJam = {
title: {
show: false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: { // 設置提示框的對齊方式
align: 'left'
}
},
legend: {
show: false
},
grid: {
left: '3%',
right: '2%',
top: '5px',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: { // 去除背景網格線
show: false
},
axisTick: { // 刻度
show: false // 不顯示刻度線
},
axisLine: { // 設置軸線
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
data: ['xx路', 'yyy路', 'zz路', 'w路'],
axisTick: { // 刻度
show: false // 不顯示刻度線
},
axisLine: { // 設置軸線
show: false
},
axisLabel: {
formatter: function (data) {
let valueTxt = ''
if (data.length > 3) {
valueTxt = data.substring(0, 4) + '...'
} else {
valueTxt = data
}
return valueTxt
},
textStyle: {
fontFamily: 'MicrosoftYaHei',
fontSize: '12',
color: '#CBD9FF',
}
}
},
{
type: 'category',
data: [0.3,0.23,0.75,0.88],
axisTick: { // 刻度
show: false // 不顯示刻度線
},
axisLine: { // 設置軸線
show: false
},
axisLabel: {
textStyle: {
fontFamily: 'ArialMT',
fontSize: '12',
color: '#86A5C3' // 坐標值的具體的顏色
}
}
}
],
series: [
{
name: '2019年',
type: 'bar',
data: [0.3,0.23,0.75,0.88],
barWidth: 7,
itemStyle: { // 柱狀圖的背景色
normal: {
// 每個柱子的顏色即為colorList數(shù)組里的每一項,如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
color: function (params) {
var index = params.dataIndex
var colorList = [
// 漸變顏色的色值和透明度
// 透明度從0
['rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(13,94,208,0.3)', 'rgba(255,155,15,0)', 'rgba(253,103,96,0.3)'], // 到透明度1 ,如果需要不同的顏色直接修改不同顏色即可
['rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(13,94,208,0.6)', 'rgba(255,155,15,0.6)', 'rgba(253,103,96,0.6)']
]
return {
colorStops: [{
offset: 0.3, // 顏色的開始位置
color: colorList[0][index] // 0% 處的顏色
},
{
offset: 0.6, // 顏色的結束位置
color: colorList[1][index] // 100% 處的顏色
}]
}
}
}
}
}
]
}
- .vue 文件，當前 echarts 圖表組件所在文件
<template>
<!-- 擁堵路段 -->
<div class="jam-shel" ref="carjam" id="main" style="width:100%; height:calc(100% - 48px)"></div>
</template>
<script>
/**
* 引入 echarts 模板
*/
import { option_carJam } from '@/tools/monitor/echartsMould.js'
export default {
data () {
return {
resizeTimer: null,
option: option_carJam,
timerSetInterval: null,
}
},
mounted () {
let _this = this
_this.getType()
window.addEventListener('resize', function () { //實現(xiàn) echarts 圖表, 隨頁面寬高變化, 而變化 。
if (_this.resizeTimer) {
clearTimeout(_this.resizeTimer)
}
if (_this.carjam) {
_this.resizeTimer = setTimeout(function () {
console.log('_this.carjam : ', _this.carjam)
_this.carjam.resize()
}, 100)
}
}),
this.timerSetInterval = setInterval(() => {
_this.getType()
}, 5 * 60 * 1000);
_this.destroyed()
},
// 清除定時器
beforeDestroy() {
//清除定時器
clearInterval(this.timerSetInterval);
},
methods: {
async getType () {
let _this = this
/**
* 此處的處理方式當時項目數(shù)據(jù)格式問題，需要處理的內容比較多；大家可以根據(jù)自己的業(yè)務需求以及后臺返回的數(shù)據(jù)格式自己進行處理
*/
// let dataNume = []
// let dataNum = []
// /**
// * URL
// */
// const urlSum = {
// urlJam: '/congestRealTime/getRoadCongestIndexTopByArea.htm?areaId=' + _this.areaId //擁堵路段
// }
// /**
// * 數(shù)據(jù)請求
// */
// let resJam = await _this.$axios.getEig(urlSum.urlJam) //擁堵路段
// /**
// * 數(shù)據(jù)處理
// */
// if (resJam.resultList.length < 6) {
// resJam.resultList.forEach(function (item) {
// dataNume.push(item.roadName)
// if (item.index === 1) {
// dataNum.push('1.00')
// } else {
// dataNum.push((Math.floor((item.index) * 100)) / 100)
// }
// })
// } else {
// resJam.resultList = resJam.resultList.slice(0, 5)
// resJam.resultList.forEach(function (item) {
// dataNume.push(item.roadName)
// if (item.index === 1) {
// dataNum.push('1.00')
// }
// if (item.index !== 1) {
// // dataNum.push((Math.floor((item.index) * 100)) / 100)
// // console.log('------------: ', ((item.index) + '0.0000000').substring(0, 4))
// dataNum.push(((item.index) + '0.0000000').substring(0, 4))
// }
// })
// }
/**
* 具體的賦值方式在這里，大家可以根據(jù)得到的數(shù)據(jù)格式來賦值。
*/
// _this.option.yAxis[0].data = dataNume
// _this.option.yAxis[1].data = dataNum
// _this.option.series[0].data = dataNum
/**
* 初始化 echarts
*/
let carjam = this.$echarts.init(this.$refs.carjam) //初始化一個echarts
_this.carjam = carjam
carjam.setOption(this.option) //setOption 用 this.option 中的數(shù)據(jù)開始作圖
},
destroyed () {
window.removeEventListener('resize', this.carjam, 100)
}
}
}
</script>
<style scoped>
.jam-shel {
margin-bottom: 15px;
}
</style>
echarts 圖表圖片展示
柱狀圖-橫向漸變.gif
