此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo (Echarts 柱状图横向排版颜色渐变效果)示例展示; 如有疑问或者不清楚的欢迎随时提问 。
废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
1. 使用 echarts 版本: “echarts”: “^4.3.0”
2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S
3. 在 main.js 入口文件中全局引入:
import* Vue *from* 'vue'
import* Echarts *from* 'echarts' *// 引入Echarts*
Vue.prototype.$echarts = Echarts
4. echarts 配置文件( 文件名 echartsMould.js )
1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。
2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。
3. 这样的处理方式也方便组件化的实现。
5. 封装 Echarts 文件 echartsMould.js 具体配置代码
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% 处的颜色
}]
}
}
}
}
}
]
}
6. 调用 Echarts 封装内容 .vue 文件具体配置代码
<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>
7. Echarts 调用成功 gif 图片展示
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “Echarts 图表” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
1499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
