barChart.vue 3.91 KB
<template>
	<view class="linechart">
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
			yMax:0
		}
	  },
	  mounted() {
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler:function(newValue,oldValue){
				this.drawBar();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
	  	 drawBar() {
			 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'
					 }
				},
                backgroundColor: '#fff',
                color: ["#0069FF", "#3BB8FF", "#6784e3", "#ff9631", "#ffc62e","#7460ee","#eb6100"],
                tooltip:{
                	renderMode:'richText'
                },
                grid: {
					left:uni.upx2px(76.08),
					right: uni.upx2px(40.98),
					top: uni.upx2px(83.33),
					bottom: uni.upx2px(9.05)+uni.upx2px(21.74)+12+uni.upx2px(21.74)+12
				},
                yAxis: {
					minInterval :1,
                    scale: true,
                    axisLabel: {
						 textStyle: {
						    color: '#9B9B9B',
							fontSize:uni.upx2px(21.74)
						},
						formatter:function(value){
							if(value>yMax){
								yMax=value;
							}
							return value
						}
					},
					axisLine : {
					    show: false,
					    lineStyle: {
					        color: '#888'
					    }
					},
					axisTick:{
						show:false
					},
					splitLine:{
						lineStyle: {
						    color: '#f3f3f3'
						}
					}
                },
                xAxis: {
					axisTick:{
						show:false
					},
					axisLine : {
					    show: false,
					    lineStyle: {
					        color: '#888'
					    }
					},
					axisLabel : {
					    textStyle: {
					        color: '#9B9B9B',
							fontSize:uni.upx2px(21.74)
					    }
					},
					splitLine : {
					    show: false
					}
				},
				legend : {
					type:"scroll",
				    orient: "horizontal",
				    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(this.chartData.series.length>1){
				   this.chartData.series.forEach((item,index)=>{
						var legendObj = {};
						if(index<2){
							option.legend.selected[item.name]=true
						}else{
							option.legend.selected[item.name]=false
						}
						legendObj.name = item.name;
						legendObj.icon="emptyCircle"
						option.legend.data.push(legendObj);
						item.symbol="emptyCircle";
						item.symbolSize=uni.upx2px(12.7)
				   })
			}
             option.xAxis.data =JSON.parse(JSON.stringify(this.chartData.xaxis.data));
            // 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)
			option.grid.left=uni.upx2px(18.11)+30+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>