echarts自定义胶囊柱图并设置每个柱子的渐变色
drawCharts() {
let myChart = echarts.init(document.getElementById('main'));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine:{//坐标轴在grid区域的分割线
show:false
},
axisLabel:{
show:false
}
},
yAxis: [
{
type: 'category',
data: ['日发电', '月发电', '年发电'],
inverse:true,
axisTick: {
alignWithLabel: true,
show:false
},
axisLine:{
show:false
}
},
{
type: 'category',
data: [1000, 1000, 1000],
inverse:true,
axisTick: {
alignWithLabel: true,
show:false
},
axisLine:{
show:false
},
axisLabel:{
textStyle:{
fontSize:12,
color:"#fff"
}
}
}
],
series: [
{
name: '数据',
type: 'bar',
yAxisIndex:0,
data: [10, 52, 20],
barWidth: '38%',
label:{
show:true,
position: 'top',
formatter:function(params){
return params.data+"%";
}
},
// 设置每个柱子的渐变色
itemStyle: {
borderRadius:[0, 0, 50, 0],
color:function(params){
let colorList = [
['#0B42A7', '#209CFF'],
['#068054', '#0DB484'],
['#C86A05', '#E9B500'],
]
let colorItem = colorList[params.dataIndex]
return new echarts.graphic.LinearGradient(0,0,1,0,
[
{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
], false
)
}
}
},
{
name: '',
type: 'bar',
yAxisIndex:1, //使两个柱状图重合的效果
barWidth: '40%',
data: [100, 100, 100, 100, 100,100, 100],
label:{
show:false
},
itemStyle:{
color:"none",
borderColor:"#143670",
borderWidth:2,
borderRadius:[0, 0, 50, 0],
},
}
]
}
myChart.setOption(option);
},
onSelectChange(selectedRowKeys) {
if (selectedRowKeys.length > 4) {
this.$message.warning('最多只能选择4条缺陷!')
return
}
this.selectedRowKeys = selectedRowKeys
},
}

浙公网安备 33010602011771号