Echarts 每个柱子设置不同的
程序员文章站
2022-07-13 14:28:47
...
<div ref="rightChart" style="width: 100%;height:260px;"></div>
rightOptionBar() {
// 通过id获取获取画布
const myChart = echarts.init(this.$refs.rightChart,null,{devicePixelRatio: 2});
// 指定图表的配置项和数据
let option = {
grid: {
left: 30,
right: 30,
top: '18%',
bottom:'10%',
containLabel: true
},
tooltip : {
formatter: '{a}:{c}%'//a 是series中每条数据name值,c 是data数值
},
xAxis : [ //横坐标
{
type : 'category',
data:['控制性工程','特大桥','大桥','特长隧道','长隧道'],
splitLine: {
show: false
},
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [ //纵坐标
{
type : 'value',
axisLabel: {
show:true,
//Y轴数值可添加百分号
formatter: '{value}%',
},
}
],
series : [
{
name: '数量',
type: 'bar',
itemStyle: {
normal: {
// 设置不同颜色
color: function(params) {
// build a color map as your need.
let colorList =['rgba(63,110,160,0.8)','rgba(236,127,102,0.8)','rgba(247,199,58,0.8)','rgba(116,160,250,0.8)','rgba(115,222,180,0.8)']
return colorList[params.dataIndex]
},
// 显示位置和显示格式
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
},
//设置柱的宽度
barWidth:70,
data: [85,67,90,100,50]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
// 使用刚指定的配置项和数据显示图表。画布为 myCharts true为显示
if (option && typeof option === "object") {
myChart .setOption(option, true);
}
},
上一篇: 自定义Shape颜色选择器