首页 前端知识 Vue3项目中使用echarts实现数据可视化

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

2024-05-06 09:05:12 前端知识 前端哥 902 874 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7164.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!