Echarts 柱状图、饼状图等变换颜色、渐变色
本文只总结了几种用到过的方法,当然,方法远不止这些。以下实测有效。之后如果遇到测试成功的方法,也会对文章进行更新。其中很多参数可以自行测试修改。
方法一:
itemStyle: {
color:function(params) {
var colorList = ['#c23531','#9BD4B9','#FFF384'];//这是一个颜色的数组
return colorList[params.dataIndex]
},
},
方法二:
color: ['#c23531','#9BD4B9','#FFF384'],
方法三:(渐变)
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'red' },
{offset: 1, color: 'blue' }], false)
}
},
方法四:(渐变)
color: [{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ offset: 0, color: '#00CBD2' },
{ offset: 1, color: '#AAE9CB' }
]
}],
方法五:多项(渐变)
itemStyle: {
color: function(params) {
var colorList = [
{
c1: '#fce5ca',
c2: '#FF9D62'
},
{
c1: '#00CBD2',
c2: '#AAE9CB'
},]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
}
},
运用方法三和五可能会遇到如下问题
[Vue warn]: Error in v-on handler: “ReferenceError: echarts is not defined”
ReferenceError: echarts is not defined
加上这句话就好啦。
import echarts from ‘echarts’;