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

<script>
	export default {
	  data () {
		return {
			yMax:0
		}
	  },
	  mounted() {
		   console.log('chartData',this.chartData)
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawLine();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		   chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
		  initChartInstance(domId) {
            let chartInstance = null,
                chartDom = document.getElementById(domId);
            chartInstance = this.echarts.getInstanceByDom(chartDom) || this.echarts.init(chartDom);
			console.log(chartInstance.geOption())
            return chartInstance;
        },
	  	 drawLine() {
			 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(28.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 : {
				    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: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.areaStyle={
							color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: option.color[index]
							}, {
								offset: 1,
								color: '#fff'
							}])
					}
					item.symbol="emptyCircle";
					item.symbolSize=uni.upx2px(12.7)
			   })
		   }
             option.xAxis.data = this.chartData.xaxis.data;
            // myChart.clear();
            setTimeout(() => {
                myChart.hideLoading();
            }, 500);
            myChart.setOption(option);
			console.log('option', JSON.stringify(option))
			// option.grid.left=uni.upx2px(String(yMax).length*uni.upx2px(21.74))+uni.upx2px(18.11)
			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>