vue3中，echarts使用（一）——柱状图和折线图的结合使用

vue3中，echarts使用（一）——柱状图和折线图的结合使用

官网：https://echarts.apache.org/zh/index.html

官网示例：https://echarts.apache.org/examples/zh/index.html

官网配置项API：https://echarts.apache.org/zh/option.html#title

效果-柱状图和折线图的结合

代码

index.vue

src\hooks\useEcharts.ts

import { onUnmounted } from "vue";
import * as echarts from "echarts";

/**
 * @description 使用Echarts(只是为了添加图表响应式)
 * @param {Element} myChart Echarts实例(必传)
 * @param {Object} options 绘制Echarts的参数(必传)
 * @return void
 * */
export const useEcharts = (myChart: echarts.ECharts, options: echarts.EChartsCoreOption) => {
	if (options && typeof options === "object") {
		myChart.setOption(options);
	}
	const echartsResize = () => {
		myChart && myChart.resize();
	};

	window.addEventListener("resize", echartsResize, false);

	onUnmounted(() => {
		window.removeEventListener("resize", echartsResize);
	});
};