目标：利用尽量简单的步骤做一个图表实例，这期可以说是懒人必备
预期效果：
前言
技术栈：Vue3+TypeScript+ECharts
（其实主要用的是封装好了的vue-echart）
框架是基于Vite的Vue框架:
npm create vue@latest
我的node.js版本是v22.14.0(长期支持版)
1.在项目中安装vue-echarts
这里echarts与vue-echart一起安装了
npm install echarts vue-echarts -s
下完后可以在终端用npm list或npm ls查看是否把echarts和vue-echarts都下载了
vue-echarts是把echarts封装好了的，用起来非常方便
膜拜_:(´□`」 ∠)_
2.在main.ts中配置
在原来的代码添加上这三句就行
import {
createApp } from 'vue'
import {
createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import 'echarts' // 1.导入echarts
import ECharts from 'vue-echarts' // 2.导入组件
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.component('v-chart', ECharts) // 3.全局注册组件
app.mount('#app')
3.在组件里使用v-chart
这个v-chart是刚刚注册了的，你也可以改成别的名字
这个option先不管
注意：一定要给v-chart设一个高度，不然他会显示不出来
<template>
<!-- 我这里新建了一个组件来做示范 -->
<v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
//这个option先不管
</script>
<style scoped>
/* 一定要设置高度，否则echarts会显示不出来 */
.chart {
height: 500px;
}
</style>
4.打开echarts官网，挑一个喜欢的示例
这里我挑第一个
然后选择TS，复制左边的代码（因为过程太简单无脑，嘴角上扬有点压不住了）
粘贴到刚刚的组件内，然后运行
<template>
<v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
// 粘贴到这里↓
// 最好加个const或let
const option = {
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'
}
]
};
</script>
<style scoped>
/* 一定要设置高度，否则echarts会显示不出来 */
.chart {
height: 500px;
}
</style>
效果图
看!就这么简单~
vue-chart的github仓库里面有更详细的代码和说明
5.把数据做成响应式的（重要）
上面的数据是静态的，这里就需要用到computed了
<template>
<v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
import {
ref, computed } from 'vue'
//初始的数据
const data = ref([
{
value: 88, name: 'A' },
{
value: 67, name: 'B' },
{
value: 44, name: 'C' },
{
value: 76, name: 'D' },
{
value: 55, name: 'E' },
])
const option = computed(() => {
return {
//返回一个option对象（↓把原先的复制到这里）
xAxis: {
type: 'category',
data: data.value.map((item) => item.name), // x轴数据 把data数组映射到name里
},
yAxis: {
type: 'value',
},
series: [
{
data: data.value.map((item) => item.value), // y轴数据 把data数组映射到value里
type: 'line',
},
],
//（↑把原先的复制到这里）
}
})
//再用setInterval，来每隔2秒改变图表y轴的值
setInterval(() => {
data.value = data.value.map((item) => {
//随机生成一个0-100的数
return {
...item, // 解开item对象
value: Math.random() * 100, // 替换value的值
}
})
}, 2000)
</script>
<style scoped>
/* 一定要设置高度，否则echarts会显示不出来 */
.chart {
height: 500px;
}
</style>
效果：
6.根据需求修改
一些常用的选项
title:设置标题
tooltip:鼠标移动上去会有显示
legend:图例
series:一个储存对象的数组，用来存储数据
参考示例修改，比如改成饼图：
<template>
<v-chart class="chart" :option="option" />
</template>
<script setup lang="ts">
// 饼图的option
const option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
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>
<style scoped>
/* 一定要设置高度，否则echarts会显示不出来 */
.chart {
height: 500px;
}
</style>
效果：
篇幅有限，各位可以查看echarts官方的配置项手册，写得很详细~
有什么其他问题欢迎在评论区提出哦，希望这篇文章对你有所帮助(吐舌)
じゃね！
