网站手机版模板,热搜榜百度,佛山制作网站公司哪家好,销售做网站ECharts 是一个功能强大、灵活易用的数据可视化工具#xff0c;适用于商业报表、数据分析、科研教育等多种场景。那么该如何优雅的使用Echarts呢? 这里以vue3为例。 安装echarts
pnpm i echarts封装公用方法
// ts-nocheck
import * as echarts from echarts;
// 我们这里借… ECharts 是一个功能强大、灵活易用的数据可视化工具适用于商业报表、数据分析、科研教育等多种场景。那么该如何优雅的使用Echarts呢? 这里以vue3为例。 安装echarts
pnpm i echarts封装公用方法
// ts-nocheck
import * as echarts from echarts;
// 我们这里借助vueUse提高可视化体验, useResizeObserver监听dom大小改变, useDebounceFn监听中添加防抖
import { useResizeObserver, useDebounceFn } from vueuse/core;
// 引入地图json 按需,不是地图则不需要
// import china from ./china.json;
// echarts.registerMap(china, china);/*** param el 图表挂在dom* param options 图表配置*/
export function useECharts(el: HTMLElement, options: echarts.EChartsOption) {let chart: any;// 图表初始化chart echarts.init(el);// 设置图表配置chart.setOption(options);// 挂载dom宽度改变监听重新渲染图表useResizeObserver(el,useDebounceFn(() {chart.resize();}, 50));// 定义setData方法const setData (dataset: echarts.DatasetOption | echarts.DatasetOption[]) {chart.setOption(Object.assign(options, { dataset }));};// 返回echarts实例,和更新data方法,方便更新图表return [chart, { setData }];
}图表使用
templatediv refhelloChartRef classchart/div
/template
script setup langtsimport { onMounted, ref } from vue;import { useECharts } from /utils;import type { EChartsType } from echarts;let chart: EChartsType;const helloChartRef ref();const theme ref(dark);onMounted(() {// todo 为了vue模板看起来干净,可以吧options抽离到外部js中去chart useECharts(helloChartRef.value, {xAxis: {// x轴data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {// y轴},toolbox: {// 工具箱 官方文档http://echarts.apache.org/zh/option.html#toolboxfeature: {// 按钮的位置和配置参数的排序有关restore: {}, // 刷新按钮dataZoom: {// 缩放按钮yAxisIndex: false, // 不选取y轴的坐标就是全选y轴},saveAsImage: {}, // 保存为图片的按钮},},series: {// 图表类型name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},});});
/scriptstyle langless scoped.chart {height: 300px;}
/style效果
是不是很容易就上手了呢,也可以到我自己部署的案例网站看实际效果呢,还可以边看效果边看源码。
相关网站
echarts官方文档博客demo
摸鱼博客就写到这啦,听我说谢谢你,因为有你,我的博客浏览1.
