PowerAnalysis/src/pages/dataAnalysis/tempAnalysis/components/lineChart.vue

<script setup>
import util from "@tools/util";
import chartTheme from './../rateAnalysis.json'
import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts'
const chartId = 'chart-' + util.newGUID(); //chartId
const chartIns = ref(null)  //chart 实例
const emits = defineEmits(['getSelected'])
const props = defineProps({
	xAxis: {
		type: Object,
		required: true,
		default: () => ({})
	},
	yAxis: {
		type: Array,
		required: false
	},
	series: {
		type: Array,
		required: true
	},
	dataset: {
		type: Array,
		required: false,
		default: () => ([])
	},
	height: {
		type: String,
		required: false,
		default: '500px'
	},
	width: {
		type: String,
		required: false,
		default: '500px'
	},
	title: {
		type: String,
		required: false
	},
	subtext: {
		type: String,
		required: false
	},
	brush: {
		type: Boolean,
		required: false,
		default: false
	}
})

/**定义option */
const option = computed({
	get() {
		return {
			color:[
				"#325dab",
				"#0098d980",
				"#626c91",
				"#a0a7e6",
				"#c4ebad",
				"#96dee8"
			],
			title: {
				text: props.title || '',
				subtext: props.subtext || '',
				top: 6,
				left: '5%',
			},
			xAxis: props.xAxis || {},
			yAxis: props.yAxis || {},
			brush: {
          seriesIndex: [1],
          yAxisIndex: 0,
          transformable: true,
          throttleType: "debounce",
          throttleDelay: 1000,
          removeOnClick: true,
          brushType: props.brush? "polygon" : false,
          brushMode: "multiple",
          brushStyle: {
            borderWidth: 1,
            borderColor: "#ff2424",
          },
        },
			toolbox:{
				show: props.brush,
			},
			tooltip: {
				confine: true,
				axisPointer: {
            type: "cross",
          },
			},
			dataset: props.dataset || [],
			series: props.series || [],
			legend: {
				right: "120",
				top: "5",
				itemWidth: 6,
			},
			grid: {
				top: 80,
				left: 40,
				right: 40,
				bottom: 40,
			},
			dataZoom: [
          {
            type: "inside", //图表下方的伸缩条
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
          {
            type: "slider", //图表下方的伸缩条
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
		}
	},
	set(val) { }
})
watch(() => option, (newVal, oldVal) => {
	if (chartIns.value) {
		const echartIns = toRaw(chartIns.value)
		echartIns.setOption(toRaw(newVal.value))
	}
}, { deep: true })
watch([() => props.width, () => props.height],(newVal, oldVal) => {
	if(chartIns.value){
		const echartIns = toRaw(chartIns.value)
		nextTick(() => echartIns.resize())
	}
})
const funBrushChange = (flag) => {
	const echartIns = toRaw(chartIns.value)
	echartIns.dispatchAction({
			type: "takeGlobalCursor",
			// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
			key: "brush",
			brushOption: {
				seriesIndex: [1],
				yAxisIndex: 0,
				transformable: true,
				throttleType: "debounce",
				throttleDelay: 1000,
				removeOnClick: true,
				brushType: flag? "polygon" : false,
				brushMode: "multiple",
				brushStyle: {
					borderWidth: 1,
					color: "rgba(255,36,36,0.2)",
					borderColor: "#ff2424",
				},
			},
		});
	echartIns.off("brushSelected");
	echartIns.on("brushSelected", (params) => {
		emits("getSelected", params.batch || []);
	});
}
watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))

onMounted(() => {
	nextTick(() => {
		echarts.registerTheme('chartTheme', chartTheme)
		const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
		chartIns.value = echartIns
		echartIns.setOption(option.value)
		funBrushChange(props.brush)
		window.addEventListener('resize', () => {
			echartIns.resize()
		})
	})
})
</script>
<template>
	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
</template>