Echarts 柱状图横向排版颜色渐变效果
- 使用 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'
/**
* 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数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
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 () { //实现 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
/**
* 此处的处理方式当时项目数据格式问题，需要处理的内容比较多；大家可以根据自己的业务需求以及后台返回的数据格式自己进行处理
*/
// let dataNume = []
// let dataNum = []
// /**
// * URL
// */
// const urlSum = {
// urlJam: '/congestRealTime/getRoadCongestIndexTopByArea.htm?areaId=' + _this.areaId //拥堵路段
// }
// /**
// * 数据请求
// */
// let resJam = await _this.$axios.getEig(urlSum.urlJam) //拥堵路段
// /**
// * 数据处理
// */
// 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))
// }
// })
// }
/**
* 具体的赋值方式在这里，大家可以根据得到的数据格式来赋值。
*/
// _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 中的数据开始作图
},
destroyed () {
window.removeEventListener('resize', this.carjam, 100)
}
}
}
</script>
<style scoped>
.jam-shel {
margin-bottom: 15px;
}
</style>
echarts 图表图片展示
柱状图-横向渐变.gif
如果对你有所帮助，大家喜欢可以点个关注；如有问题还望不吝赐教，本人会及时更改。(如要转载，请注明出处)。
作者:黑木令
原文链接:https://www.jianshu.com/p/689a8b330f4e