1.使用npm下载
npm install echarts --save
2.在vue中新建echarts.ts文件
![](https://i-blog.csdnimg.cn/blog_migrate/b296d97ab0f765af137269ab4b74fb23.png)
下面是echarts.ts文件代码
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 引入柱状图and折线图图表and散点图,图表后缀都为 Chart */
import { BarChart, LineChart,ScatterChart } from "echarts/charts";
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
} from "echarts/components";
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart,
ScatterChart
]);
// 导出
export default echarts;
3.在main.ts中导入echarts,再挂载到vue实例里面
下面是main.ts代码
import { createApp } from 'vue'
// vue-router
import router from './router/index'
// Element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import echarts from './util/echarts'
// app.sass
import './assets/style/app.sass'
// 根组件
import App from './App.vue'
const app = createApp(App)
// 挂载到vue实例中
app.provide('$echarts', echarts);
app.use(router).use(ElementPlus, { locale: zhCn }).mount('#app')
下面是echarts.vue代码
<template>
<div id="chartcontainer"></div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineComponent, inject, onMounted} from 'vue';
const echarts = inject('$echarts');
onMounted(() => {
const myChart = (echarts as any).init(document.getElementById('chartcontainer'));
myChart.setOption({
title: {
text: 'ECharts 散点图',
},
xAxis: {
data: ['1', '5', '10', '15', '20', '25'],
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 310],
},
],
});
});
</script>
<style lang="scss" scoped>
#chartcontainer {
width: 800px;
height: 600px;
}
</style>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/42e8f639e4433e100674e78f9fa48afb.png)