selectLineChart.vue

<template>
	<view class="slinechart">
		<div class="selectBox">
			<div class="sItem" :class="{ checkedItem: is7Check}" @tap="checkFun('7')">近7天</div>
			<div class="sItem" :class="{ checkedItem: is15Check}" @tap="checkFun('15')">近15天</div>
			<div class="sItem" :class="{ checkedItem: is30Check}" @tap="checkFun('30')">近30天</div>
		</div>
		<div :id='bindId' class="chart"></div>
	</view>
</template>

<script>
	export default {
	  data () {
		return {
			is7Check:true,
			is15Check:false,
			is30Check:false
		}
	  },
	  mounted() {
		   console.log('chartData',this.chartData)
	  },
	  watch:{
		  bindId:function(newValue,oldValue){
		  },
		  chartData:{
			handler(newValue,oldValue){
				this.drawSelectLine();
			},
			deep:true
		  },
	  },
	  props:{
			bindId:{
				type:String,
				default:''
			},
		    chartData: {
                type: Object,
                default: function(){
					return {}
				}
            }
	  },
	  methods: {
		  checkFun(val){
			  switch (val)
			  {
				case '7':{
					  this.is7Check=true;
					  this.is15Check=false;
					  this.is30Check=false;
					  this.$emit('handleFun','7');
					}
					break;
				case '15':{
					this.is7Check=false;
					this.is15Check=true;
					this.is30Check=false;
					 this.$emit('handleFun','15');
					}
					break;
				case '30':{
					this.is7Check=false;
					this.is15Check=false;
					this.is30Check=true;
					this.$emit('handleFun','30');
					}
					break;
			  }
		  },
	  	 drawSelectLine() {
			 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:{
					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(123.18),
					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
            }
			   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);
					if(this.chartData.series.length>1){
						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(18.7)
			   })
		   console.log(option)
             option.xAxis.data = 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)+15+String(yMax).length*uni.upx2px(9.05)
			myChart.setOption(option);

        }
	  }
	}
</script>

<style>
	.slinechart{
		position: relative;
	}
	.chart{
		width:706.52upx;
		height:487.31upx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-bottom: 18.2upx;
		border-radius:7.24upx;
		overflow: hidden;
	}
	.selectBox{
		width: 646.73upx;
		border: 1px solid #F3F3F3;
		height: 36.24upx;
		font-size: 25.36upx;
		line-height: 32.6upx;
		position: absolute;
		top: 0;
		left: 0;
		display: inline-flex;
		flex-direction: row;
		z-index: 999;
		top: 63.4upx;
		left: 0;
		margin: auto;
		right: 0;
	}
	.sItem{
		flex: 1;
		background:rgba(250,250,250,1);
		text-align: center;
		cursor: pointer;
		border-right:1px solid #F3F3F3 ;
	}
	.sItem:last-of-type{
		border:none
	}
	.checkedItem{
		background: #FFFFFF;
	}
</style>