pnpm add echarts --save
新建echarts.ts文件
// /src/utils/echarts.ts
// 摘抄echarts官网:https://echarts.apache.org/handbook/zh
import * as echarts from 'echarts/core'
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption
} from 'echarts/charts'
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
export default echarts
在mian.ts导入echarts
import { createApp } from 'vue'
import './style.css'
import eCharts from '@/utils/echart'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$eCharts = eCharts
app.mount('#app')
最后直接使用
<template>
<div ref="chartEx" style="width: 100vw; height: 30vh"></div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue'
import { ECOption } from '@/utils/echart'
// 获取echarts
const app: any = getCurrentInstance()
const eCharts: any = app.appContext.config.globalProperties.$eCharts
// 基于准备好的dom,初始化echarts实例
const chartEx: any = ref(null)
const option: ECOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
onMounted(() => {
// 初始化图表
const myChart = eCharts.init(chartEx.value)
myChart.setOption(option)
// 窗口大小变化时重新设置图表容器高度
const resizeHandler = () => {
myChart.resize()
}
window.addEventListener('resize', resizeHandler)
// 在组件卸载时移除事件监听器
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
})
})
</script>
<style scoped></style>