stackBarChart.vue

<template>
	<view class="piechart">
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
		}
	  },
	  mounted() {
		   console.log('chartData',this.chartData)
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawStackBar();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
	  	 drawStackBar() {
			 var yMax=0;
           let myChart = {};
           let chartDom = document.getElementById(this.bindId);
           myChart = this.echarts.init(chartDom);
           myChart.showLoading('default', {
               text: '',
               color: '#409eff'
           });
            let option = {
				title :{
					show:true,
					 text:this.chartData.title,
					 left: uni.upx2px(18.11),
					 top: uni.upx2px(10.86),
					 textStyle: {
						 fontWeight: "normal",
						 fontSize: uni.upx2px(25.4),
						 color: '#4A4A4A'
					 }
				},
				tooltip:{
					padding:[5,15],
					position: function(pos, params, dom, rect, size){
						var obj={};
						if(pos[0]+size.contentSize[0]>size.viewSize[0]){
							obj['right']=size.viewSize[0]-pos[0]
						}else{
							obj['left']=pos[0]
						}
						if(pos[1]+size.contentSize[1]>size.viewSize[1]){
							obj['bottom']=size.viewSize[1]-pos[1]
						}else{
							obj['top']=pos[1]
						}
						 return obj;
					},
				},
				color: ["#3BB8FF", "#FFC62E", "#87D14B", "#FFC62E", "#FF9631"],
                grid: {
					left:uni.upx2px(76.08),
					right: uni.upx2px(28.98),
					top: uni.upx2px(83.33),
					bottom: uni.upx2px(94.2)
				},
                legend : {
                    orient: "horizontal",
                    x: "center",
                    textStyle: {
                        fontSize: uni.upx2px(21.74),
                		color:'rgba(74,74,74,1)'
                    },
                    itemWidth:  uni.upx2px(12.7),
                    itemHeight: uni.upx2px(12.7),
                    itemGap: uni.upx2px(3.62),
                    bottom: uni.upx2px(9.05),
                    data: [],
                	selected:{}
                },
                yAxis: {
					minInterval :1,
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#EBEBEB'
                        }
                    },
                    axisLine: {
						show:false,
                        lineStyle: {
                            color: '#888'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
						color: '#9B9B9B',
						fontSize: uni.upx2px(21.74),
						formatter:function(value){
							if(value>yMax){
								yMax=value;
							}
							return value
						}
					}
                },
                xAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLine: {
						show:false,
                        lineStyle: {
                            color: '#888'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
						color: '#9B9B9B',
						fontSize: uni.upx2px(21.74),
					},
                    data:[]
                },
				series:this.chartData.series
            };
            if(!option.series) return;
            // 按照 echarts 数据规范重构数据
            let seriesObj = {}, seriesData = [], totalData = [], totalNum = 0, ageArr = [];
            try {
                seriesData = this.chartData.xaxis.data.map(item => {
                    return {
                        name: item,
                        data: []
                    }
                });
                if(option.series.length > 0) {
                    let ageNum;
                    for(let i = 0; i < option.series.length; i++) {
                        ageNum = 0;
                        option.xAxis.data.push(option.series[i].name);
                        for(let j = 0; j < option.series[i].data.length; j++) {
                            seriesObj[this.chartData.xaxis.data[j]] = option.series[i].data[j];
                            totalNum += option.series[i].data[j];
                            ageNum += option.series[i].data[j];
                            for(let k in seriesObj) {
                                if(seriesData[j].name == k) {
                                    seriesData[j].data.push(seriesObj[k])
                                }
                            }
                            seriesObj = {};
                        }
                        ageArr.push(ageNum);
                    }
                }
                for(let i = 0; i < seriesData.length; i++) {
                    seriesData[i].itemStyle = {
                        show: false
                    };
                    seriesData[i].type = 'bar';
                    seriesData[i].stack = 'gender';
                    // seriesData[i].barWidth = 20;
                    // seriesData[i].barCategoryGap = '50px';
                    option.legend.data.push(seriesData[i].name);
                }
                seriesData.forEach(item => {
                    item.data.forEach((k, i) => {
                        if(totalData[i]) {
                            totalData[i] += k;
                        } else {
                            totalData[i] = k;
                        }
                    })
                })
                option.series = seriesData;
                if(!option.series.length) {
                    option.graphic = {
                        type: 'text',
                        left: 'center',
                        top: 'middle',
                        z: 100,
                        style: {
                            fill: '#333',
                            text: '无数据',
                            font:  uni.upx2px(21.74)
                        }
                    }
                    // option.xAxis.data = [];
                    // myChart.clear();
                    setTimeout(() => {
                        myChart.hideLoading();
                        myChart.setOption(option);
                    }, 500);
                }
            } catch (error) {}
            // myChart.clear();
            setTimeout(() => {
                myChart.hideLoading();
            }, 500);
            myChart.setOption(option);
			option.grid.left=uni.upx2px(18.11)+15+String(yMax).length*uni.upx2px(9.05)
			myChart.setOption(option);
		 }
	  }
	}
</script>

<style>
	.chart{
		width:706.52upx;
		height:438.4upx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-bottom: 18.2upx;
		border-radius:7.24upx;
		overflow: hidden;
	}
</style>