使用echarts简单实现双柱状图重叠效果

使用echarts简单实现双柱状图重叠效果

如何使用echarts简单实现双柱状图重叠效果

代码实现

在series中配置如下代码
// 设置柱状的圆角
itemStyle: {barBorderRadius: 10
},
// 允许展示背景图
showBackground: true,
// 设置背景图颜色和圆角
backgroundStyle: {color: 'rgba(255, 255, 255, 0.2)',barBorderRadius: 10
}

柱状图横向展示配置

// X轴设置type为value,y轴设置为category即可
xAxis: {type: "value",max: 100},yAxis: {type: "category",data: this.data.parkNameList}

完整代码如下

let chart = echarts.ElementById("todayIncome"));
let option = {tooltip: {trigger: "axis",formatter: (v) => {return `名称：${v[0].name}<br/>饱和度：${v[0].data.value}%<br/>已使用占比：${v[0].data.useBerth}/${v[0].data.allBerth}`;}},grid: {left: "5%",top: "0",bottom: "20",},xAxis: {type: "value",splitLine: {show: false,},axisLabel: {show: false,},axisTick: {show: false,},axisLine: {show: false,},max: 100},yAxis: {type: "category",inverse: true,lineHeight: 20,axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: false,},data: this.data.parkNameList,axisLabel: {show: false,}},series: [{yAxisIndex: 0,name: "value",itemStyle: {barBorderRadius: 10},showBackground: true,backgroundStyle: {color: 'rgba(255, 255, 255, 0.2)',barBorderRadius: 10},barWidth: 18,type: "bar",data: this.data.data.map((item, i) => {let itemStyle = {color: "#00B7C2",};return {value: item.percentage,useBerth: item.useBerth,allBerth: item.allBerth,itemStyle: itemStyle,};}),label: {normal: {color: "#fff",show: true,position: [0, "25px"],textStyle: {fontSize: 12,},formatter: function (a, b) {return a.name;}}}}]
};
chart.setOption(option);

注意事项：

• 有的同学用了相同代码，但是背景设置圆角无效果，原因是echarts版本需要升级到4.8.0以上