- 使用 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 图表组件所在文件
echarts 图表图片展示
柱状图-横向渐变.gif