`
}, watch: { status: { immediate: true, handler: function(val) { let data = {} if(val == '1') { data = { xdata: this.data.count.xdata, ydata: this.data.count.ydata } }else { data = { xdata: this.data.amount.xdata, ydata: this.data.amount.ydata } } this.series = [] this.legendData = data.xdata.map(item=> item.name) data.xdata.forEach((item, index) => { if(index > this.colors.length) { index = this.colors.length % index } let tcolor = this.colors[index] let seriesItem = { name: item.name, type: 'bar', stack: 'total', barWidth: 10, //柱子宽度 data: item.value, label: { show: true, position: index%2==0?'left': 'right', fontSize: 10, formatter: (params, ticket, callback)=> { let unit = this.status == '2'?"万元": "个" if(params.value != 0) { return (params.value || 0) + unit }else { return "" } } }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: tcolor[0], }, { offset: 1, color: tcolor[1], }, ]), }, } this.series.push(seriesItem) }); let tarr = data.xdata.map(item=> item.value.reduce((pre,next)=> +pre+ +next)) let max = Math.max.apply(null,tarr) if(val == 1) { max = max + (50 - max % 50) }else { max = max + (500 - max % 500) } this.maxValue = new Array(6).fill(max) this.series.push({ z: -1, name: '', type: 'bar', barWidth: 26, barGap: '-175%', data: this.maxValue, textStyle: { //图例文字的样式 fontSize: 10, color: '#fff', }, itemStyle: { opacity: 0.09, }, tooltip: { show: false // 禁用 pictorialBar 系列的 tooltip }, }) this.option.series = this.series this.option.legend.data = data.xdata.map(item => item.name) this.option.xAxis.data = data.ydata this.option.yAxis.name = '单位：' + (this.status == '2'?"万元": "个") if(this.myChart) { this.myChart.setOption(this.option, {notMerge: true}); this.forceUpdate() }else { this.nextTick(()=> { this.init() }) }
},
}
}, methods: { init() { if(this.myChart) { return false } let chartDom = this.$refs['echart-dom'] this.myChart = echarts.init(chartDom);
this.option && this.myChart.setOption(this.option);
}
} }
.echart01 { height: 100%; width: 100%; }`
data = { "xdata": [ { "name": "在用", "value": [ "0", "0", "14", "1", "90", "86" ] }, { "name": "闲置", "value": [ "2", "0", "24", "4", "0", "1" ] }, { "name": "维修", "value": [ "0", "1", "2", "1", "0", "1" ] }, { "name": "丢失", "value": [ "0", "0", "3", "1", "0", "1" ] }, { "name": "待报废", "value": [ "0", "0", "3", "1", "0", "1" ] } ], "ydata": [ "中原区商务局", "安阳市", "淇县商务局", "临颍县商务局", "西平县商务局", "上蔡县商务局" ] }
