V-echart条形图颜色渐变实现

最近在做一个图标的项目，遇到的一个小问题分享给大家。在用V-chart时会遇到一些V-chart未提供的API，如果没有学习过Echarts解决起来就会很烦恼。如这里要说到的条形图的颜色渐变。

首先引入组件，这里不做赘述。直接贴代码

1.extend主要是用来设置坐标轴的一些相关属性。
this.barExtend={
‘xAxis.0.axisLabel.color’: ‘#727685’,//x轴文本颜色
‘yAxis.0.axisLabel.color’: “#727685”,//y轴文本改变颜色
grid:{ // 设置条形图在画布中的位置
bottom:20,//图像底部的边距
x2:130,//图像X轴两个点之间的间距
x:50,//x轴的边距
},
}
2.图形的颜色渐变就是在settings里面配置的
this.chartSettingsPowerStation={
itemStyle:{//配置一些样式
color: {
type: ‘linear’,
x: 0,//X轴起始坐标
y: 0,//Y轴起始坐标
x2: 1,//X轴终点坐标
y2: 1,//Y轴终点坐标
colorStops: [{
offset: 0, color: ‘#4b69eb’ // 0% 处的颜色
}, {
offset: 1, color: ‘#01f4ff’ // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
通过设置itemStyle的color属性我们就实现了图表的渐变，如你只需要图表在X轴或者Y轴渐变时把不需要的注释掉即可。

记录开发中的小问题，这是我第一篇文章。