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