解决ECharts柱形图自定义单个柱子颜色图例无法显示

自定义单个柱子颜色图例无法显示"/>

解决ECharts柱形图自定义单个柱子颜色图例无法显示

• legend里data和series里的name需要对应
• series里对象需要设置stack属性，属性值都一样即可
• 显示单柱重点在于series里对象data属性设置，必须使用''，否则影响柱体上数值显示
• tooltip的值需要自定义，否则会显示堆叠柱状图的tooltip格式，非图中所示

drawSingleBarChart() {let me = this// 基于准备好的dom，初始化echarts实例  这个和上面的main对应let myChart = echarts.init(document.getElementById('singleBar'))let color = ['#879EF9', '#00B050', '#FEBC66', '#FF0000', '#7F7F7F']let data = ['总项数', '绿灯项', '黄灯项', '红灯项']// 指定图表的配置项和数据let option = {color: color,legend: {x: 'center',y: 'bottom',itemWidth: 10,itemHeight: 10,data: data,},tooltip: {enabled: true,trigger: 'axis',formatter: '{a}&nbsp;&nbsp;&nbsp;{c}<br />',axisPointer: {type: 'shadow'}},grid: {top: '10%',left: '0',right: '0',bottom: '15%',containLabel: true},xAxis: {type: 'category',axisTick: {show: false},data: data},yAxis: {type: 'value',show: false,},series: [{name: '总项数',stack: '设备',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,data: [2]},{name: '绿灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', 2]},{name: '黄灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', '', 0]},{name: '红灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', '', '', 0]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)
},