3 changed files with 203 additions and 3 deletions
			
			
		| @ -0,0 +1,200 @@ | |||
| <template> | |||
|   <div> | |||
|     <div :id="idName" ref="yanzhouRef" :style="{ height: height, width: width }" /> | |||
|   </div> | |||
| </template> | |||
| <script> | |||
| import moment from 'moment' // 导入模块 | |||
| export default { | |||
|   props: { | |||
|     idName: { type: String, default: 'chart' }, | |||
|     width: { type: String, default: '100%' }, | |||
|     height: { type: String, default: '200px' }, | |||
|     chartData: { type: Array, default: () => [] }, | |||
|     desc: { type: String, default: '' } | |||
|   }, | |||
|   data() { | |||
|     return { | |||
|       date: [], | |||
|       typeList: { | |||
|         OD: [], | |||
|         OS: [], | |||
|         typeNull: [] | |||
|       }, | |||
|       legendData: [], | |||
|       seriesData: [], | |||
|       disabled: false | |||
|     } | |||
|   }, | |||
|   watch: { | |||
|     chartData: { | |||
|       handler(val, olVal) { | |||
|         this.initFun() | |||
|       }, | |||
|       deep: true | |||
|     } | |||
|   }, | |||
|   mounted() { | |||
|     this.initFun() | |||
|   }, | |||
|   methods: { | |||
|     initFun() { | |||
|       this.date = [] | |||
|       this.typeList = { | |||
|         OD: [], | |||
|         OS: [], | |||
|         typeNull: [] | |||
|       } | |||
|       this.legendData = [] | |||
|       this.seriesData = [] | |||
|       if (this.chartData && this.chartData.length > 0) { | |||
|         this.disabled = false | |||
|         this.chartData.forEach(item => { | |||
|           this.date.push(moment(item.examTime).format('l')) | |||
|           this.typeList.OD.push([item.examTime, item.odOil.slice(0, item.odOil.length - 3)]) | |||
|           this.legendData[0] = 'OD' | |||
|           this.typeList.OS.push([item.examTime, item.osOil.slice(0, item.osOil.length - 3)]) | |||
|           this.legendData[1] = 'OS' | |||
|         }) | |||
|       } else { | |||
|         this.disabled = true | |||
|       } | |||
|       this.$nextTick(() => { | |||
|         this.visionFun() | |||
|       }) | |||
|     }, | |||
|     visionFun() { | |||
|       // 基于准备好的dom,初始化echarts实例 | |||
|       const yanzhou = this.$echarts.init(document.getElementById(this.idName)) | |||
|       const colors = ['#4462FF', '#0DB760', '#000000'] | |||
|       Object.keys(this.typeList).forEach((item, index) => { | |||
|         if (this.typeList[item].length > 0) { | |||
|           this.seriesData.push({ | |||
|             name: item, | |||
|             type: 'line', | |||
|             // stack: index, | |||
|             data: this.typeList[item], | |||
|             label: { | |||
|               show: true, | |||
|               position: item === 'OD' ? [-25, -30] : [10, -5], | |||
|               backgroundColor: item === 'OD' ? '#4a6bff' : '#0db760', | |||
|               padding: [6, 6], | |||
|               color: '#ffffff', | |||
|               // color: 'rgba(24, 24, 24, 0.1)', | |||
|               borderRadius: 10 | |||
|             }, | |||
|             smooth: true, | |||
|             itemStyle: { | |||
|               color: colors[index] | |||
|             }, | |||
|             symbolSize: 10 | |||
|           }) | |||
|         } | |||
|       }) | |||
|       // 基于准备好的dom,初始化echarts实例 | |||
|       yanzhou.setOption({ | |||
|         title: { | |||
|           text: this.desc, | |||
|           textStyle: { | |||
|             'color': '#000000' | |||
|           }, | |||
|           left: 10 | |||
|         }, | |||
|         tooltip: { | |||
|         //   trigger: 'axis' | |||
|           backgroundColor: '#ece6e6', | |||
|           textStyle: { | |||
|             color: '#000000' // 设置文字颜色 | |||
|           }, | |||
|           formatter(params) { | |||
|             return params.seriesName + '<br/>' + params.data[0] + '   ' + params.data[1] | |||
|           } | |||
| 
 | |||
|         }, | |||
|         legend: { | |||
|           data: this.legendData, | |||
|           icon: 'pin', | |||
|           textStyle: { | |||
|             color: '#000000' | |||
|           }, | |||
|           right: 30 | |||
|         }, | |||
|         dataZoom: [ | |||
|           { | |||
|             type: 'inside', | |||
|             disabled: this.disabled, | |||
|             start: 0, | |||
|             end: 100 | |||
|           } | |||
|         ], | |||
|         grid: { | |||
|           top: 55, | |||
|           left: 50, | |||
|           right: 50, | |||
|           bottom: 30, | |||
|           containLabel: false | |||
|         }, | |||
|         xAxis: { | |||
|           type: 'time', | |||
|           boundaryGap: false, | |||
|           axisLabel: { | |||
|             show: true, | |||
|             showMaxLabel: true, | |||
|             textStyle: { | |||
|               color: '#000000' | |||
|             }, | |||
|             formatter: function(value, index) { | |||
|               const showD = moment(value).format('YYYY/M/D') | |||
|               return showD | |||
|             } | |||
|           }, | |||
|           axisLine: { | |||
|             lineStyle: { | |||
|               color: 'rgba(24, 24, 24, 0.1)' | |||
|             } | |||
|           }, | |||
|           // 显示网格线 | |||
|           splitLine: { | |||
|             show: true | |||
|           } | |||
|         }, | |||
|         yAxis: { | |||
|           type: 'value', | |||
|           min: function(value) { // 取最小值向下取整为最小刻度 | |||
|             return Math.floor(value.min) | |||
|           }, | |||
|           max: function(value) { // 取最大值向上取整为最大刻度 | |||
|             return Math.ceil(value.max) | |||
|           }, | |||
|           splitNumber: 1, // 分割刻度 | |||
|           axisLabel: { | |||
|             show: true, | |||
|             textStyle: { | |||
|               color: '#000000' | |||
|             } | |||
|           }, | |||
|           axisLine: { | |||
|             lineStyle: { | |||
|               color: 'rgba(24, 24, 24, 0.1)' | |||
|             } | |||
|           } | |||
|         }, | |||
|         series: [ | |||
|           ...this.seriesData | |||
|         ] | |||
|       }) | |||
|       // 随窗口变化 | |||
|       window.addEventListener('resize', () => { yanzhou.resize() }) | |||
|       //  随外层div的大小变化自适应 | |||
|       this.$erd.listenTo(this.$refs.yanzhouRef, () => { | |||
|         this.$nextTick(() => { | |||
|           yanzhou.resize() | |||
|         }) | |||
|       }) | |||
|     } | |||
|   } | |||
| } | |||
| 
 | |||
| </script> | |||
| <style style="scss" scoped> | |||
| </style> | |||
					Loading…
					
					
				
		Reference in new issue