1. Use npm to download
npm install echarts --save
2. Create a new echarts.ts file in vue
The following is the echarts.ts file code
// 引入 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. Import echarts in main.ts, and then mount it into the vue instance
Below is the main.ts code
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')
The following is the echarts.vue code
<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>
Renderings: