eta_front/src/views/dataEntry_manage/components/chart.vue

<template>
	<div :id="'container'+index" class="chart">
	</div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HightchartsExport from 'highcharts/modules/exporting';
import HighchartszhCN  from '@/utils/highcahrts-zh_CN'
HighchartszhCN(Highcharts)
HighchartsMore(Highcharts)
HightchartsExport(Highcharts)
const elementResizeDetectorMaker = require("element-resize-detector");//引入监听dom变化的组件
const erd = elementResizeDetectorMaker();

import { defaultOpts } from '@/utils/defaultOptions'
export default {
	name:'',
	props: {
		chartId: {
			type: Number,
		},
		options: {
			type: Object,
		},
		//maxHeight
		height: {
			type: String,
			default: ''
		},
		minHeight: {
			type: String,
			default: ''
		},
		//多个chart的情况
		index: {
			type: String,
			default: '1'
		},
		chartInfo: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		'options': {
			handler(newval) {
				console.log('重绘')
				this.init()
			},
			deep:true
		}
	},
	data () {
		return {
			chart:null,
		};
	},
	methods: {

		init() {
			/* eta1.4.1增加了主题色
			仍然以defaultOpts为最底层配置 外层配置在这里统一设置了如legend chart背景色
			x轴y轴系列等样式还是需要在具体的options中单独设置 */

			let themeOptions = this.setThemeOptions();
			const options = {...defaultOpts,...themeOptions,...this.options}

			console.log(themeOptions,this.options)
			
			let thatThis = this
			//stock不支持线形图只支持时间图 部分图用原始chart
			let is_linear = this.options.series 
				? this.options.series.some(_ => _.chartType === 'linear')
				: false ;

			Highcharts.setOptions({ global: { useUTC: false } });
			this.chart = is_linear 
				? Highcharts.chart(`container${this.index}`, options) 
				: Highcharts.stockChart(`container${this.index}`,options);

			let that = this;
      if(!$('#right')[0]) return
			erd.listenTo($('#right')[0], function (element) { //执行监听 
				that.$nextTick(function () {
					that.chart.reflow(); //变化重新渲染
				})
			})
		},
		// 点击Y轴标题监听事件
		clickYAxisTitle(){
			this.$emit('clickYAxisTitle')
		},

		// 点击X轴标题监听事件  散点图
		clickXAxisTitle(){
			// 目前点击Y轴标题和X轴都是同一个方法 所以直接派发跟Y轴点击的方法
			this.$emit('clickYAxisTitle')
		},

		//主题色一些外层公用配置  目前只有绘图区和legend和colors
		setThemeOptions() {
			if(!this.chartInfo||!this.chartInfo.ChartThemeStyle) return {}

			let chartTheme = JSON.parse(this.chartInfo.ChartThemeStyle)		
			return {
				legend: {
					...defaultOpts.legend,
					...chartTheme.legendOptions
				},
				chart: {
					...defaultOpts.chart,
					...chartTheme.drawOption,
					spacing: chartTheme.legendOptions.verticalAlign==='bottom' ? [23,10,2,10] : [2,10,2,10],//图例在底部顶部空间留大点给单位
				},
				colors: chartTheme.colorsOptions
			}
		},

		initHeight() {
			/* 1550以下 */
			if($(window).width() <= 1710) {
				$(`#container${this.index}`)[0].style.height = this.minHeight || '350px';
			}else {
				$(`#container${this.index}`)[0].style.height = this.height || '440px';
			}
			// if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
			// 	this.$nextTick(()=>{
			// 		const h=$(`#container${this.index}`)[0].style.height
			// 		if(h=='500px'){
			// 			this.options.xAxis.offset=-200.5
			// 		}else if(h=='440px'){
			// 			this.options.xAxis.offset=-170.5
			// 		}else if(h=='350px'){
			// 			this.options.xAxis.offset=-125.5
			// 		}
			// 		// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
			// 		// this.options.xAxis.offset=-h/2;
			// 	})
			// }

		}
	},
	created() {},
	mounted() {
		this.initHeight();
		this.init();
		window.addEventListener('resize', this.initHeight);
	},
	destroyed() {
		window.removeEventListener('resize', this.initHeight);
		
	}
}
</script>
<style lang='scss' scoped>
.chart {
	/* width: 100%; */
	min-height:300px;
}
</style>