Vue3和ECharts markPoint使用

Vue3 ECharts markPoint使用

前言

需求：要求客户自行输入阀值的文本内容，下拉框选项是向上或者向下，点击一个按钮后再原来的基础折线图再加一个折线，两段颜色不一样，然后再第二段中找到向上或者向下的【0】值，也就是阀值再弹出来，可以使用markPoint实现

一、markPoint是什么？

示例：一般的是 ‘min’ 最小值；‘max’ 最大值；‘average’ 平均值。

二、使用步骤

1.官网使用

1.代码如下（示例）：

    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 

    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

2.绘制表格前一定要再div里定义宽高，否则可能会没有效果

<div id="chartLeft" style="height: 560px; background-color: #fff; width: 100%"></div>

3.绘制图表 单独写个initChart函数开始绘制表格 （state.pastData和state.futureData都是后端提供的数据，两段的数据都是需要转换成value:[a,b]的格式，并且xAxis的type: ‘category’,很重要）

if (m_chartMain) {
		m_chartMain.clear();
	}
	m_chartMain = echarts.init(document.getElementById('chartLeft'));
	//获取历史数据的echart图表
	const dataValue = state.pastData.map((item) => {
		return {
			value: [item.DataTime, item.DataValue],
		};
	});
	//获取未来的图表的数据
	const futureValue = state.futureData.map((v) => {
		return {
			value: [v.DataTime, v.DataValue],
		};
	});

	var color_curve = '#4169E1';
	let series_arr = [];
	series_arr.push(
		{
			type: 'line',
			showSymbol: false,
			hoverAnimation: false,
			data: dataValue,
			lineStyle: {
				color: color_curve,
			},
		},
		{
			type: 'line',
			showSymbol: false,
			hoverAnimation: false,
			data: futureValue,
			lineStyle: {
				color: 'red',
			},
		}
	);

	var main_chart_option = {
		title: {
			text: '', //主标题
		},
		legend: {
			top: '0%',
			textStyle: {
				color: 'black', //图例文字
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				animation: false,
			},
		},
		grid: [
			{
				top: 40,
				right: 60,
				left: 50,
				bottom: 60,
				containLabel: true,
			},
		],
		toolbox: {
			show: true,
			top: 0,
			right: 40,
			itemSize: 20,
			iconStyle: {
				color: '#87CEFA', //设置颜色
			},
		},
		dataZoom: [
			{
				id: 'dataZoomX',
				type: 'slider',
				xAxisIndex: [0],
				start: 0,
				end: 100,
				bottom: 30,
				filterMode: 'filter',
				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: '80%',
				handleStyle: {
					color: '#fff',
					shadowBlur: 3,
					shadowColor: 'rgba(0, 0, 0, 0.9)',
					shadowOffsetX: 2,
					shadowOffsetY: 2,
				},
				borderColor: '#999',
			},
			{
				// 这个dataZoom组件，也控制x轴。
				type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
				start: 0, // 左边在 24% 的位置。
				end: 100, // 右边在 100% 的位置。
			},
		]
		xAxis: {
			type: 'category',
			splitLine: {
				show: true,
			},
			axisPointer: {
				type: 'shadow',
			},
			splitNumber: 8,
			minInterval: 1,
			minorTick: {
				show: false,
				splitNumber: 2,
			},
			minorSplitLine: {
				show: true,
				lineStyle: {
					color: '#aaa',
					type: 'dashed',
				},
			},
		},
		yAxis: {
			nameLocation: 'middle',
			nameGap: 48,
			type: 'value',
			axisLabel: {
				formatter: '{value} ',
			},
			scale: true,
			boundaryGap: ['0%', '35%'],
			splitLine: {
				show: true,
			},
			nameTextStyle: {
				color: color_curve,
			},
			// 整条y轴
			axisLine: {
				show: true,
			},
			// y轴上的小横线
			axisTick: {
				show: true,
			},
		},

		series: series_arr,
	};
	state.m_chartOption = main_chart_option;//vue3里reactive定义成全局的值，方便再后期再次给它赋值
	m_chartMain.setOption(main_chart_option);

4.如果特殊的需要获取阀值最高/最低点

//可以先声明一个数组
let makePoint_common = [];
//将后端的拿到的数据整理成如下，这个item是后端数据循环后声明的值
state.futureData.forEach((item) => {
let pointObj = {
				value: item.DataValue,
				coord: [item.DataTime, item.DataValue],
				};
})
//然后将值push到数组里,并且拿到第一个值
makePoint_common.push(pointObj);
state.pointMax = makePoint_common[0];
let _markPoint = {
				symbol: 'pin',
				data: [state.pointMax],
			};
state.m_chartOption.series[1].markPoint = _markPoint;
//setTimeout加上是为了初始化的时候也能出现图表，即使还没掉接口
setTimeout(() => {
				m_chartMain.setOption(state.m_chartOption);
	}, 500);   

该处使用的url网络请求的数据，实现如下图

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，欢迎各位留言~~