moral_fronted.git

			@@ -1,216 +1,278 @@
			<template>
			<div :class="className" :style="{ height: height, width: width }" />
			</template>

			<script>
			// import echarts from 'echarts'
			import * as echarts from 'echarts'
			require('echarts/theme/macarons') // echarts theme
			import resize from './mixins/resize'

			export default {
			mixins: [resize],
			props: {
			className: {
			type: String,
			default: 'chart',
			},
			width: {
			type: String,
			default: '100%',
			},
			height: {
			type: String,
			default: '350px',
			},
			autoResize: {
			type: Boolean,
			default: true,
			},
			chartData: {
			type: Object,
			required: true,
			},
			interval: {
			type: Number,
			default: 1,
			},
			// xdata: {
			// type: Array,
			// required: true
			// }
			},
			data() {
			return {
			chart: null,
			}
			},
			watch: {
			chartData: {
			deep: true,
			handler(val) {
			this.setOptions(val)
			},
			},
			// xdata: {
			// deep: true,
			// handler(val) {
			// console.log(val)
			// this.setOptions(val)
			// console.log('执行成功')
			// }
			// }
			},
			mounted() {
			this.$nextTick(() => {
			this.initChart()
			})
			},
			beforeDestroy() {
			if (!this.chart) {
			return
			}
			this.chart.dispose()
			this.chart = null
			},
			methods: {

			initChart() {
			this.chart = echarts.init(this.$el, 'macarons')
			this.setOptions(this.chartData)
			},
			setOptions(val) {
			function fontSize(res){
			let clientWidth = window.innerWidth\|\|document.documentElement.clientWidth\|\|document.body.clientWidth;
			if (!clientWidth) return;
			let fontSize = 100 * (clientWidth / 1920);
			return res*fontSize;
			}

			// console.log('组件设置的数据')

			console.log(val)
			this.chart.setOption(
			{
			title: {
			text: val.text,
			textStyle: {
			color: '#000000',
			},
			},
			xAxis: {
			data: val.xAxis.slice(0, 24),
			boundaryGap: false,
			axisTick: {
			show: false,
			},
			// axisTick: { // 决定是否显示坐标刻度
			// alignWithLabel: true,
			// show: true
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#000000'
			// }
			// },
			// axisLabel: {
			// interval: this.interval
			// }
			},
			grid: {
			left: '5%',
			right: '5%',
			top:'5%',
			containLabel: true,
			height:fontSize(3.3),
			},
			toolbox: {
			feature: {
			dataZoom: {
			yAxisIndex: 'none',
			},
			restore: {},
			saveAsImage: {},
			},
			},
			tooltip: {
			trigger: 'axis',
			position: function (pt) {
			return [pt[0], '10%']
			},
			},
			// tooltip: {
			// trigger: 'axis',
			// axisPointer: {
			// type: 'cross'
			// },
			// padding: [5, 10]
			// },
			yAxis: {
			axisTick: {
			show: false, // 轴线刻度
			},
			// axisLine: {
			// lineStyle: {
			// color: '#000000'
			// }
			// }
			},
			legend: {
			data: val.title,
			tooltip: {
			show: true,
			},
			textStyle:{
			fontSize:fontSize(0.12)
			},
			widht:'auto',
			height:'auto',
			top: fontSize(4.6),
			},
			dataZoom: [
			{
			type: 'inside',
			start: 0,
			end: 100,
			},
			{
			start: 0,
			end: 20,
			bottom: fontSize(4.4),
			height: fontSize(0.5),
			},
			],
			series: val.series,
			// [{
			// name: JSON.parse(JSON.stringify(val.title)),
			// itemStyle: {
			// normal: {
			// color: '#7AC5CD',
			// lineStyle: {
			// color: '#7AC5CD',
			// width: 2
			// }
			// }
			// },
			// smooth: true,
			// type: 'line',
			// data: val.series,
			// animationDuration: 2800,
			// animationEasing: 'cubicInOut',
			// areaStyle: {},
			// label: {
			// normal: {
			// show: true,
			// position: 'top'
			// }
			// }
			// }]
			},
			true
			)
			window.onresize = this.chart.resize;
			},
			},
			}
			</script>
			<template>
			<div :class="className" :style="{ height: height, width: width }" />
			</template>

			<script>
			// import echarts from 'echarts'
			import * as echarts from 'echarts'
			require('echarts/theme/macarons') // echarts theme
			// import resize from './mixins/resize'

			export default {
			// mixins: [resize],
			props: {
			className: {
			type: String,
			default: 'chart'
			},
			width: {
			type: String,
			default: '100%'
			},
			height: {
			type: String,
			default: '350px'
			},
			autoResize: {
			type: Boolean,
			default: true
			},
			isMouse: {
			type: Boolean,
			default: false
			},
			chartData: {
			type: Object,
			required: true
			},
			interval: {
			type: Number,
			default: 1
			}
			// xdata: {
			// type: Array,
			// required: true
			// }
			},
			data() {
			return {
			chart: null
			}
			},
			watch: {
			chartData: {
			deep: true,
			handler(val) {
			this.setOptions(val)
			}
			}
			// xdata: {
			// deep: true,
			// handler(val) {
			// console.log(val)
			// this.setOptions(val)
			// console.log('执行成功')
			// }
			// }
			},
			mounted() {
			this.$nextTick(() => {
			this.initChart()
			})
			},
			beforeDestroy() {
			if (!this.chart) {
			return
			}
			this.chart.dispose()
			this.chart = null
			},
			methods: {
			initChart() {
			this.chart = echarts.init(this.$el, 'macarons')
			this.setOptions(this.chartData)
			},
			setOptions(val) {
			function fontSize(res) {
			const clientWidth =
			window.innerWidth \|\|
			document.documentElement.clientWidth \|\|
			document.body.clientWidth
			if (!clientWidth) return
			const fontSize = 100 * (clientWidth / 1920)
			return res * fontSize
			}
			const that = this
			if (this.isMouse) {
			this.chart.on('mouseover', function(params) {
			that.chart.setOption({
			series: [
			{
			name: params.seriesName,
			label: {
			show: true,
			fontSize: 16,
			position: [10, -15],
			formatter: '{c}'
			}
			}
			]
			})
			})
			// 增加监听，mouseout事件（鼠标离开）
			this.chart.on('mouseout', function(params) {
			that.chart.setOption({
			series: [
			{
			name: params.seriesName,
			lineStyle: {
			width: 2
			},
			label: {
			show: false
			},
			endLabel: {
			show: false
			}
			}
			]
			})
			})
			}
			this.chart.setOption(
			{
			title: {
			text: val.text,
			textStyle: {
			color: '#000000'
			}
			},
			xAxis: {
			data: val.xAxis,
			boundaryGap: false,
			axisTick: {
			show: true
			}
			},
			grid: {
			left: '5%',
			right: '5%',
			top: '5%',
			containLabel: true,
			height: fontSize(4.3)
			},
			toolbox: {
			feature: {
			dataZoom: {
			yAxisIndex: 'none'
			},
			restore: {},
			saveAsImage: {}
			}
			},
			tooltip: {
			backgroundColor: 'rgba(50,50,50,0.5)',
			borderWidth: '0',
			trigger: 'axis',
			formatter: function(a) {
			const list = []
			let listItem = ''
			for (var i = 0; i < a.length; i++) {
			list.push(
			'<span style="display: inline-block;padding: 0px 0;" >' +
			'<i style="display: inline-block;width: 10px;height: 10px;background: ' +
			a[i].color +
			';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
			'</span>' +
			a[i].seriesName +
			'&nbsp&nbsp&nbsp&nbsp' +
			a[i].value +
			'</span>'
			)
			}
			listItem = list.join('<br/>')
			return ' <div div style = "width:15px; display:inline-block;" > ' + a[0].name +
			'</div>' + '<div style="padding:0px;">' + listItem + '</div>'
			},
			position: function(point, params, dom, rect, size) {
			// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
			const x = point[0]//
			const y = point[1]
			const viewWidth = size.viewSize[0]
			const viewHeight = size.viewSize[1]
			const boxWidth = size.contentSize[0]
			const boxHeight = size.contentSize[1]
			let posX = 0// x坐标位置
			let posY = 0// y坐标位置

			if (x < boxWidth) { // 左边放不开
			posX = 5
			} else { // 左边放的下
			posX = x - boxWidth
			}

			if (y < boxHeight) { // 上边放不开
			posY = 5
			} else { // 上边放得下
			posY = y - boxHeight
			}
			if (params && params.length > 20) {
			posX = point[1],
			posY = '-10%'
			}
			return [posX, posY]
			},
			axisPointer: {
			type: 'cross',
			label: {
			backgroundColor: '#6a7985'
			}
			},
			textStyle: {
			color: 'rgb(255, 255, 255);',
			fontSize: fontSize(0.117), // 字体大小
			lineHeight: 0
			}
			},

			yAxis: {
			axisTick: {
			show: true // 轴线刻度
			},
			axisLine: {
			show: true // 不显示坐标轴线
			},
			axisLabel: {
			show: true // 不显示坐标轴上的文字
			}
			// axisLine: {
			// lineStyle: {
			// color: '#000000'
			// }
			// }
			},
			legend: {
			data: val.title,
			tooltip: {
			show: true
			},
			textStyle: {
			fontSize: fontSize(0.15)
			},
			widht: 'auto',
			height: 'auto',
			top: fontSize(5.5)
			},
			dataZoom: [
			{
			type: 'inside',
			start: 0,
			end: 100
			},
			{
			start: 0,
			end: 20,
			top: fontSize(4.8),
			height: fontSize(0.5)
			}
			],
			series: val.series
			},
			true
			)
			window.onresize = this.chart.resize
			}
			}
			}
			</script>