vus3+Ts Apache ECharts 的使用（可视化图表库）

VIP文章入门中……

已于 2022-12-14 21:16:30 修改

阅读量339

点赞数 3

分类专栏： vue3 可视化页面 setup语法文章标签： echarts apache 前端 vue typescript

于 2022-12-13 11:51:28 首次发布

本文链接：https://blog.csdn.net/m0_59680972/article/details/128299285

版权

vus3+Ts Apache ECharts 的使用（可视化图表库）

是什么：一个基于 JavaScript 的开源可视化图表库

ECharts官网：快速上手 - Handbook - Apache ECharts

1.下载
npm install echarts --save

2.基本使用(实现代码)

<script setup lang='ts'>

// 导入echarts

import * as echarts from 'echarts';

import 'echarts/theme/macarons.js'

import { ref, onMounted } from 'vue';

//  定义dom变量用于获取dom节点

const dom: any = ref<HTMLElement | null>(null);

// 定义变量用于接收初始化echarts实例

let myChart: any = ''

// 绘制图表

onMounted(() => {

  //基于准备好的dom，初始化echarts实例

  myChart = echarts.init(dom.value, 'macarons');

  optionsHandler()

})

//专门用于做配置项的方法

const optionsHandler = () => {

  //开始配置

  myChart.setOption({