使用echart的条形（yAxis）的多种颜色
IT技术
javascript
reactjs
echarts
2021-05-18 04:18:32
1个回答
您想为堆叠条中的每个系列使用不同的颜色吗？只需在所有系列值上绘制假想的垂直线并为所有交叉值设置颜色样式。
{
name: 'Series-1',
type: 'bar',
stack: '1',
data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
},{
name: 'Series-2',
type: 'bar',
stack: '1',
data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['Label']
},
xAxis: {
data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
},
yAxis: {},
series: [{
name: 'Series-1',
type: 'bar',
stack: '1',
data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
},{
name: 'Series-2',
type: 'bar',
stack: '1',
data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>其它你可能感兴趣的问题