PC-application/component/rehabilitation/my-echart.js

Vue.component('my-chart', {
    template: '<div class="c-h100">\
	    		<div id="main" ref="main" class="c-h100"></div>\
		    </div>',
    props: ['chartData'],
    data: function() {
		return {
			charts: null
		}
    },
    created: function() {
    	
    },
    mounted: function() {
    	this.charts = echarts.init(this.$refs.main)
    	this.drawPie()
    },
    methods: {
		drawPie(){
			var vm = this,
				seriesData = []
			if(vm.chartData.recordType == 2) {
				seriesData = [{
		        	name: "收缩压",
		            type:'line',
		            itemStyle: {
		            	normal: {
		            		lineStyle: {
		            			color: 'rgb(102,204,204)'
		            		}
		            	}
		            },
		            data: vm.chartData.opinionData
		        }, {
					name: "舒张压",
					type:'line',
		            itemStyle: {
		            	normal: {
		            		lineStyle: {
		            			color: 'rgb(135,206,250)'
		            		}
		            	}
		            },
		            data: vm.chartData.opinionData2
				}]
			} else {
				seriesData = [{
		        	name: "血糖值",
		            type:'line',
		            itemStyle: {
		            	normal: {
		            		lineStyle: {
		            			color: 'rgb(102,204,204)'
		            		}
		            	}
		            },
		            data: vm.chartData.opinionData
		        }]
			}
	        var options = {
	        		grid: {
	        			y: 40,
	        			y2: 60
	        		},
	        		tooltip: {
				        trigger: 'axis',
				        position: function (pt) {
				            return [pt[0], '10%'];
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: this.chartData.opinion
				    },
				    yAxis: {
				        type: 'value',
				        scale: true,
				        name: vm.chartData.recordType == 1 ? "   单位(mmol/L)" : "   单位(mmHg)",
				        boundaryGap: [0, '100%']
				    },
				    dataZoom: [{
				        type: 'slider',
				        start: 0,
				        end: 100,
				        zoomLock: false
				    }, {
				        start: 0,
				        end: 10,
				        type: 'inside',
				        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
				        handleSize: '100%',
				        handleStyle: {
				            color: '#fff',
				            shadowBlur: 3,
				            shadowColor: 'rgba(0, 0, 0, 0.6)',
				            shadowOffsetX: 2,
				            shadowOffsetY: 2
				        }
				    }],
				    series: seriesData
				};
	        this.charts.setOption(options)
        }
    },
    watch: {
    	chartData: function(data) {
    		this.charts.clear();
	        this.drawPie()
    	}
    }
})