ECharts
关注
分享
扫一扫
文章平均质量分 74
ECharts
Web - Nancy
前端程序媛
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue3 ECharts 实现暗黑风纹理渐变饼图（双层装饰圆环、中心总量文字、自定义斜线纹理、自适应适配）组件抽离复用 - 附完整示例
本文基于Vue3结合ECharts v5.6.0，封装适配暗黑可视化大屏的纹理渐变饼图复用组件。通过自定义Canvas生成斜线纹理、多层圆环嵌套、渐变立体边框与阴影特效，解决原生饼图样式单调、视觉单薄的问题。组件支持数据动态更新、窗口防抖自适应，内置完整内存优化逻辑与TS类型约束，开箱即用，可广泛应用于数据大屏统计展示场景。原创 2026-07-06 08:00:00 · 244 阅读 · 0 评论 -
Vue3+ECharts使用渐变堆叠面积图实现图例横向滚动，超出出现滚动条，组件抽离复用，包含图表自适应窗口大小 - 附完整示例
本文介绍了Apache ECharts这一基于JavaScript的开源可视化图表库的使用方法。主要内容包括：1）安装方式（通过npm安装）；2）在Vue项目中的使用步骤，包括按需引入、容器设置和数据处理；3）关键配置项详解，如自定义tooltip样式、图例横向滚动和面积渐变效果；4）提供了完整的Vue组件示例代码，包含响应式设计、自适应重绘和内存优化等功能。文章还特别展示了如何实现平滑曲线、动态数据更新等高级效果，为开发者提供了全面的ECharts集成方案。原创 2026-06-29 08:00:00 · 172 阅读 · 0 评论 -
Vue3 ECharts 使用条形图实现渐变色柱体（左侧显示排名、中间显示名称 + 条形图 + markLine 、右侧显示数值）组件抽离复用，包含图表自适应窗口大小 - 附完整示例
本文介绍了如何使用ECharts（Apache开源的JavaScript可视化库）创建渐变色进度条图表。主要内容包括：1）通过npm安装echarts和echarts-gl依赖；2）关键实现步骤：引入ECharts、设置容器尺寸、处理数据（计算百分比和最大值）、配置渐变色与标记线；3）完整示例代码展示了一个带排名、名称提示和数值显示的进度条榜单组件，支持响应式布局和点击事件。文章还提供了官方文档链接和组件封装建议，适用于需要在Vue项目中实现数据可视化展示的场景。原创 2026-06-15 08:00:00 · 235 阅读 · 0 评论 -
Vue3中使用vue-echarts - 以曲线图为例 - 附完整示例
Vue3中使用vue-echarts - 以曲线图为例 - 附完整示例原创 2025-12-22 08:00:00 · 573 阅读 · 0 评论 -
Vue3 ECharts 使用条形图实现渐变色柱体且自定义y轴（左侧显示标签、右侧显示数值） + symbol - 附完整示例
Vue3 ECharts 使用条形图实现渐变色柱体且自定义y轴（左侧显示标签、右侧显示数值） + symbol - 附完整示例原创 2025-12-01 08:00:00 · 396 阅读 · 0 评论 -
Vue3 ECharts 使用柱状图实现渐变色的尖峰状 - 附完整示例
Vue3 ECharts 使用柱状图实现渐变色的尖峰状 - 附完整示例原创 2025-11-17 08:00:00 · 393 阅读 · 0 评论 -
Uniapp Vue3 Vite 使用echarts - 附完整示例
Uniapp Vue3 Vite 使用echarts - 附示例原创 2025-04-14 08:00:00 · 5612 阅读 · 3 评论 -
Vue3 ECharts 嵌套环形进度圈图 - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2025-02-10 08:00:00 · 956 阅读 · 0 评论 -
Vue3 ECharts 使用数据集dataset - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-10-28 08:00:00 · 974 阅读 · 0 评论 -
ECharts 解决tooltip自动播放遮住popover气泡卡片的问题 - extraCssText调整tooltip的层级
在项目使用了tooltip自动播放，造成遮住popver气泡卡片的问题。原创 2024-07-29 08:00:00 · 501 阅读 · 0 评论 -
Vue3 ECharts tooltips动态循环依次展示数据
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-06-24 08:00:00 · 1258 阅读 · 0 评论 -
ECharts 仪表盘 label和刻度线根据值数据内容动态颜色变化 - 以空气质量指数为例 - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-04-15 08:00:00 · 1916 阅读 · 0 评论 -
Vue3 ECharts Uncaught(in promise)Error: Initialize failed: invalid dom.at Module.init2(echarts.js:22
一开始使用的根据ID获取节点，无论是使用onMouted，还是nextTick，甚至是onMouted + nextTick，都获取不到dom节点，使用ref即可。原创 2024-04-08 08:00:00 · 2156 阅读 · 0 评论 -
Vue3 ECharts Uncaught TypeError: Cannot read properties of undefined (reading ‘type‘) + (reading ‘0‘
使用ResizeObserver监听ECharts宽高变化，出现了以下两种报错，外加图表与数据错位的问题。原创 2024-04-01 08:00:00 · 805 阅读 · 3 评论 -
Vue3 封装ECharts 组件 抽离复用 包含图表随着窗口宽高变化而变化 - 附完整示例
避免重复的代码造成冗余，抽离封装提高复用性代码逻辑更加清晰，方便后期维护Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-03-25 08:00:00 · 2131 阅读 · 0 评论 -
Vue ECharts line3D点击空白处重置图表视角- 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-03-11 08:00:00 · 2403 阅读 · 0 评论 -
Vue ECharts 散点图上画一个圆形 - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-02-05 08:00:00 · 2011 阅读 · 0 评论 -
Vue ECharts X轴 type为value的数据格式 + X轴固定间隔并向上取整十位数 - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2024-01-29 08:00:00 · 2046 阅读 · 0 评论 -
Vue ECharts 二次渲染/重新渲染宽高为0，图表不显示，改变浏览器窗口大小即可显示图表的问题
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。前言：这篇博客是基于父组件传值（option）给子组件即echart页面为基础的渲染图标的。话不多说，直接看代码。一个基于 JavaScript 的开源可视化图表库。原创 2023-07-24 08:45:00 · 2489 阅读 · 0 评论 -
Vue ECharts 多折线图只有一条X轴（合并X轴数据并去重排序） - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2023-12-25 08:00:00 · 1410 阅读 · 0 评论 -
Vue+Ant Design of Vue+ECharts 图表跟随父元素的宽高变化重新渲染-resize()/element-resize-detector/ResizeObserver-附完整示例
目录效果一、介绍 1、官方文档（1）Ant Design Vue（2）echarts（3）element-resize-detector（4）Resize Observer 二、准备工作1、安装依赖包 2、示例版本 三、使用步骤1、ant-design-vue 1.1、在main.ts引入2、ecahrts 2.1、在单页面引入 ' echarts ' 2.2、指定容器并设置容器宽高3、resize 3.1、window的resize事件注：有局限性，原创 2023-12-04 08:00:00 · 3154 阅读 · 0 评论 -
Vue ECharts bar柱状图 动态生成渐变色 - echarts.graphic.LinearGradient + 圆角半径 - barBorderRadius - 附完整示例
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2023-11-20 08:00:00 · 2468 阅读 · 0 评论 -
Vue ECharts 预设颜色数组，循环显示，强制设置坐标轴分割间隔，坐标轴的每一项都显示- 附完整示例
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2023-10-30 08:00:00 · 947 阅读 · 0 评论 -
Vue ECharts 动态设置多y轴相同的最大值（包含是否连接空数据，统一的最大值向上取整，强制设置坐标轴分割间隔，设置每条y轴的index）- 附完整示例
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。原创 2023-09-28 08:00:00 · 1875 阅读 · 0 评论 -
Vue ECharts y轴设置固定分段 + makerline设置为不同的样式作为区分 - 附完整示例
一个基于 JavaScript 的开源可视化图表库。Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。效果。原创 2023-09-04 08:00:00 · 1449 阅读 · 0 评论 -
Vue ECharts markline设置为legend - 附完整示例
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。一个基于 JavaScript 的开源可视化图表库。原创 2023-07-31 08:00:00 · 1862 阅读 · 1 评论
