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 }, }