Vue3项目中使用echarts实现数据可视化

本章主要记录如何在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实现数据可视化​​​​​​​