Chart statistics are of course indispensable as a standard feature of the backend management system. This project chose to use the most familiar eCharts.
The complete package of eCharts is too large, and only a small part of the charts will be used in general projects, so we only introduce it on demand to reduce the packaging volume as much as possible.
First install eCharts
npm install echarts --save
Create a new directory echarts under the src/components folder and create a new file echarts.ts.
This project simply uses a few basic charts of eChart. If your needs are more complex and require more chart components, you can modify the components introduced in echarts.ts
import * as echarts from 'echarts/core'
/**
引入需要的图表，需要什么就加什么
*/
import {
BarChart, LineChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
ToolboxComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件，上面引入的都需要在此注册
echarts.use([
ToolboxComponent,
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
BarChart,
LineChart,
PieChart
])
// 导出
export default echarts
In the scr/components/echarts folder, create a new MyEchart.vue
<template>
<div ref="chartRef" class="my-chart"></div>
</template>
<script setup lang="ts">
import {
onBeforeUnmount, onMounted, ref } from 'vue'
import echarts from './echarts'
const props = defineProps(['options'])
const chartRef = ref<HTMLDivElement>()
let chart: echarts.ECharts | null = null
const resizeHandler = () => {
chart?.resize()
}
onMounted(() => {
setTimeout(() => {
initChart()
}, 20)
window.addEventListener('resize', resizeHandler)
})
const initChart = () => {
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
...props.options
})
}
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chart?.dispose()
})
</script>
<style lang="scss" scoped></style>
Because this project usesunplugin-vue-components, the newly created MyEchart component can be used directly in the page. The following code implements A simple pie chart
<template>
<MyEchart :options="options" style="height: 300px"></MyEchart>
</template>
<script setup lang="ts">
import {
reactive } from 'vue'
import MyEchart from '~/components/echarts/MyEchart.vue'
const options = reactive({
title: {
text: '访问来源',
subtext: 'Fake Data',
left: 'left'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: 'Search Engine' },
{
value: 735, name: 'Direct' },
{
value: 580, name: 'Email' },
{
value: 484, name: 'Union Ads' },
{
value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
</script>