Vue3中使用Echarts（Vue3+Ts）

安装

pnpm install -S echarts

组件

<!--Echarts组件-->
<template>
	<div ref="main" class="main" :style="{ width: width, height: height }" />
</template>

<script lang="ts" setup>
import { ref, defineProps, watch, onMounted, onBeforeUnmount, withDefaults } from 'vue'
import * as echarts from 'echarts'
import { ECBasicOption, EChartsType } from 'echarts/types/dist/shared'
import { EventParams } from '@/echart.enum'
interface EchartsProps {
	options: ECBasicOption | null
	width?: string
	height?: string
	handlerClick?: (params: EventParams) => void | null
}
let instance: EChartsType = null as unknown as EChartsType
const props = withDefaults(defineProps<EchartsProps>(), {
	width: '100%',
	height: '100%'
})
const main = ref(null)
// 初始化图表
const initEcharts = () => {
	if (props.options == null) return
	instance = echarts.init(main.value as unknown as HTMLElement) as unknown as EChartsType
	instance.setOption(props.options as ECBasicOption)
	instance.on('click', handlerClick)
	window.onresize = handlerSize
}
function handlerSize() {
	instance.resize()
}
function handlerClick(params: EventParams | any): void {
	if (props.handlerClick != null) {
		props.handlerClick(params)
	}
}
onMounted(() => {
	initEcharts()
})
onBeforeUnmount(() => {
	if (instance) {
		instance.dispose()
		window.removeEventListener('onresize', handlerSize)
	}
})
// 监听数据变化
watch(props, () => {
	if (instance) {
		instance.setOption(props.options as ECBasicOption)
	} else {
		initEcharts()
	}
})
</script>

<style scoped lang="scss">
.main {
	width: 100%;
	height: 100%;
}
</style>

类型（EventParams）

export type EventParams = {
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number
  // 系列名称。当 componentType 为 'series' 时有意义。
  seriesName: string
  // 数据名，类目名
  name: string
  // 数据在传入的 data 数组中的 index
  dataIndex: number
  // 传入的原始数据项
  data: Object
  // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
  // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
  // 其他大部分图表中只有一种 data，dataType 无意义。
  dataType: string
  // 传入的数据值
  value: number | Array
  // 数据图形的颜色。当 componentType 为 'series' 时有意义。
  color: string
}

使用

<!-- 组件用途 ts基础模板 -->
<template>
	<div>首页</div>
	<Echarts :options="options" :width="'200px'" :height="'200px'" />
	<button @click="update">更新图表</button>
</template>

<script lang="ts" setup>
import Echarts from '@/components/echarts/Echarts.vue'
import { onMounted, ref } from 'vue'
let options = ref<any>(null)
onMounted(() => {
	options.value = {
		title: {
			text: 'ECharts 入门示例'
		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		},
		yAxis: {},
		series: [
			{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}
		]
	}
})

const update = () => {
	options.value = {
		title: {
			text: '数据改变'
		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		},
		yAxis: {},
		series: [
			{
				name: '销量',
				type: 'bar',
				data: [5, 20]
			}
		]
	}
}
</script>
<style lang="scss" scoped></style>