circleBarChart.vue 6.75 KB
<template>
	<view class="circleBarchart">
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
			yMax:0
		}
	  },
	  mounted() {
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawCircleBarChart();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
	  	 drawCircleBarChart() {
			 var  yMax=0;
            let myChart = {};
            let chartDom = document.getElementById(this.bindId);
			myChart = this.echarts.init(chartDom);
            myChart.showLoading('default', {
                text: '',
                color: '#409eff'
            });
            var 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'
					 }
				},
				color: ['#3BB8FF', '#87D14B', '#6784E3'],
                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;
					},
                },
                grid: {
					left:uni.upx2px(76.08),
					right: uni.upx2px(28.98),
					top: uni.upx2px(83.33),
					bottom: uni.upx2px(9.05)+uni.upx2px(21.74)+12+uni.upx2px(21.74)+12
				},
				 animation: false,
                yAxis: {
					minInterval :1,
                   name:'人次',
                    type: 'value',
                    nameRotate: 1,
                    splitLine: {
                        lineStyle: {
                            color: '#EBEBEB'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#888'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: uni.upx2px(21.74),
                        color: '#666',
						formatter:function(value){
							if(value>yMax){
								yMax=value;
							}
							return value
						}
                    }
                },
                xAxis: {
					splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#888'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: uni.upx2px(21.74),
                        color: '#666'
                    },
                    data: []
				},
				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(5.62),
				    bottom: uni.upx2px(9.05),
				    data: [],
					selected:{}
				},
				series:JSON.parse(JSON.stringify(this.chartData.series))
            }
           if(!option.series) return;
            let seriesObj = {}, seriesData = [], totalData = [];
            try {
                seriesData = this.chartData.xaxis.data.map(item => {
                    return {
                        name: item,
                        data: []
                    }
                });
                if(option.series.length > 0) {
                    for(let i = 0; i < option.series.length; i++) {
                        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];
                            for(let k in seriesObj) {
                                if(seriesData[j].name == k) {
                                    seriesData[j].data.push(seriesObj[k])
                                }
                            }
                            seriesObj = {};
                        }
                    }
                }
                for(let i = 0; i < seriesData.length; i++) {
                    seriesData[i].itemStyle = {
                        normal: {
                            barBorderRadius: 7
                        }
                    };
                    seriesData[i].type = 'bar';
                    seriesData[i].barWidth = 14;
                    option.legend.data.push({
                        name: seriesData[i].name,
                        icon: 'circle'
                    });
                }
                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: '暂无数据',
                        }
                    }
                    // 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(String(yMax).length*uni.upx2px(21.74))+uni.upx2px(18.11)
			console.log(yMax)
			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:634.05upx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-bottom: 18.2upx;
		border-radius:7.24upx;
		overflow: hidden;
	}
</style>