【Echarts】vue3打开echarts的正确方式

ECharts 是一个功能强大、灵活易用的数据可视化工具,适用于商业报表、数据分析、科研教育等多种场景。那么该如何优雅的使用Echarts呢? 这里以vue3为例。

安装echarts

bash 复制代码
pnpm i echarts

封装公用方法

ts 复制代码
// @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 }];
}

图表使用

html 复制代码
<template>
  <div ref="helloChartRef" class="chart"></div>
</template>
<script setup lang="ts">
  import { 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#toolbox
        feature: {
          // 按钮的位置和配置参数的排序有关
          restore: {}, // 刷新按钮
          dataZoom: {
            // 缩放按钮
            yAxisIndex: false, // 不选取y轴的坐标(就是全选y轴)
          },
          saveAsImage: {}, // 保存为图片的按钮
        },
      },
      series: {
        // 图表类型
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    });
  });
</script>

<style lang="less" scoped>
  .chart {
    height: 300px;
  }
</style>

效果

是不是很容易就上手了呢,也可以到我自己部署的案例网站看实际效果呢,还可以边看效果边看源码。

相关网站

摸鱼博客就写到这啦,听我说谢谢你,因为有你,我的博客浏览+1.

相关推荐
iphone108几秒前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck7 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00118 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00119 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾22 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐26 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价27 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花28 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101328 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树29 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js