本章主要记录如何在vue3项目中使用echarts实现数据可视化,分享给大家,仅供参考~
项目背景技术栈:vue3 + ts + vite + less + vue-router + axios + vant + pinia + echarts
1. 项目引入echarts
npm install echarts --save
2. 新建一个vue页面
<script setup lang="ts">
import { onMounted,ref,Ref } from 'vue'
//导入echarts
import * as echarts from 'echarts'
//引入EChartsOption作为option类型
type EChartsOption = echarts.EChartsOption
//ref挂载节点
let chartbox: Ref<HTMLElement | null> = ref(null)
//声明配置option数据,各个参数请参阅官方文档
const option: EChartsOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
}
onMounted(() => {
//页面加载完成后加载echarts
let myecharts = echarts.init(chartbox.value as HTMLElement)
option && myecharts.setOption(option)
//随页面动态缩放
window.onresize = function () {
myecharts.resize()
}
})
</script>
<template>
<!-- 盛放echarts图表容器 -->
<div ref="chartbox" class="chart"></div>
</template>
<style scoped lang="less">
//设置容器样式,必须设置宽高
.chart{
width: 100vw;
height: 300px;
padding: 10px;
box-sizing: border-box;
}
</style>
3. 结果展示
4. 示例简要说明
在vue3 + ts项目中使用echarts实现数据可视化两点需要注意:
1). 声明option类型是echarts.EChartsOption
2). 推荐采用ref作为挂载节点,且须声明节点类型,否则会报错
5. 具体详情请参阅:
1). 折线图官方链接:Examples - Apache ECharts
2). option中的参数说明文档:Documentation - Apache ECharts
3). React中使用echarts可参阅:react项目中使用echarts实现数据可视化