vue3+ts 实现一个图表

前端钢铁侠。

已于 2023-01-27 17:50:35 修改

阅读量524

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript echarts 开发语言 typescript

于 2023-01-26 00:51:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74956049/article/details/128763652

本文介绍如何在Vue3项目中结合TypeScript实现一个图表应用。展示了实际效果，并提供了详细的代码实现过程，帮助开发者理解如何在现代前端框架中集成数据可视化组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果图

2.代码如下

<template>
  <div
    ref="main"
    id="main"
    style="height: 100%; width: 100%; background: black"
  ></div>
</template>

<script setup lang="ts">
// 引入hook
import { ref, reactive, onMounted } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
import type { utilsParams, funcFace1 } from '@/utils/interface'
const obj: utilsParams = {
  id: 11,
  name: 'yancy'
}

const func: funcFace1 = (str) => str
const user: utilsParams = reactive({
  id: 11,
  name: 'yancy'
})
console.log(user)
console.log(obj, func('str'))
// 定义一个ref
const main = ref<any>(null)
// const a = ref<string | number>(20)
// 定义初始化echarts函数
const initView = (): void => {
  const chinas = echarts.init(main.value)
  const option: utilsParams = {
    toolti