Echarts
关注
分享
扫一扫
文章平均质量分 93
以实战为引，逐步深入Echarts开发各个环节，打造完美数据可视化工作流，体现数据之美
Nick Peng
There is but one secret to success.
---Stick to the minute.
展开
-
Echarts 每种图表制作的适用场景以及优劣势
目录一、柱状（条形）图二、折线（面积）图三、饼（圆环）图四、地图五、雷达（面积）图七、漏斗图八、词云图九、散点（气泡）图十、双轴图好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、柱状（条形）图效果图：适用场景：主要是二维数据集（每个数据点包括两个值 x 和 y ），但是只有一个维度需要进行比较，用于显示一段时间内的数据变化或显示各项之间的比较情况。适...原创 2020-03-03 02:04:05 · 7569 阅读 · 0 评论 -
Echarts 图表制作建议指南思维导图，教你什么数据画什么图
Echarts图表制作思维指南总结 。。。---- Nick.Peng一、Echarts图表制作建议指南有了它，开发时就知道什么样的数据画什么图了，以后画图再也不用发愁啦 。。。...原创 2020-03-03 01:00:57 · 3023 阅读 · 1 评论 -
利用 Echarts 图表对豆瓣热播电影排名进行分析以及跨域解决方案
目录一、涉及问题和资源解决方案二、最终排名分析效果图三、完整源代码步骤及解析Echarts 案例二： 利用 Echarts 对豆瓣热播电影排名进行分析 。。。好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、涉及问题和资源解决方案豆瓣API文档： https://github.com/zce/douban-api-docs/blob/master/docs/...原创 2020-03-02 17:45:38 · 2288 阅读 · 1 评论 -
Echarts 开发迁徙图异步请求实现方案
文章目录一、前言二、异步加载实现效果图三、完整源代码 及 详解四、附录：data.json数据一、前言为上一篇 blog《Echarts 开发静态数据模拟实现迁徙图步骤详解》改版，实现动态异步加载数据。好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng二、异步加载实现效果图三、完整源代码 及 详解本文不在对步骤详解，迁徙图实现基本步骤详见上一篇文章：《Ech...原创 2020-03-01 01:55:29 · 1562 阅读 · 3 评论 -
Echarts 开发静态数据模拟实现迁徙图步骤详解
文章目录一、前言二、先来看看百度迁徙图三、Echarts 实现迁徙图基本步骤第一步：引入Echarts.js及相关JS第二步：为ECharts准备一个Dom第三步：基于Dom初始化echarts实例第四步：为Echarts设定配置项（ `难点`）第五步：用制定的配置项和数据显示图表四、最终实现效果图五、完整源代码 - 非异步六、异步加载数据实现迁徙图一、前言ECharts 的学习也有一段时间...原创 2020-03-01 01:34:56 · 3564 阅读 · 7 评论 -
ECharts 中的事件和行为实现 之 click事件
文章目录一、前言二、简介三、Click事件实现步骤四、Click事件触发效果图五、完整源代码及解析六、附录 - 事件参数params一、前言在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。下面一起来实现一下最常用的 click 事件 ！！！好文章 记得收藏+点赞+关注...原创 2020-02-26 00:07:36 · 11753 阅读 · 1 评论 -
Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一、简介二、新增loading加载动效2.1 实现原理2.2三、好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、简介Echarts 图表在异步请求数据时，如果加载时间较长，一个空的坐标轴放在画布上会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。二、新增loading加载动效2.1 实现原理利用 E...原创 2020-02-25 22:53:46 · 9360 阅读 · 0 评论 -
Echarts 开发图表 两种方式实现异步数据加载
文章目录一、异步加载数据 方法一二、异步加载数据 方法二 - 推荐好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、异步加载数据 方法一ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行；代码 6 步实现及解析如下：<!DOCTYPE htm...原创 2020-02-25 02:37:46 · 4479 阅读 · 2 评论 -
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录一、前言二、分析&解决方案三、Http-Server简介&安装方法四、启动http本地服务方法五、附：Http-Server可选配置一、前言最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时，制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；...原创 2020-02-25 01:49:21 · 3842 阅读 · 6 评论 -
Echarts 开发图表自定义主题，并实现动态切换
文章目录一、下载官方主题二、引入主题JS文件三、初始化主题 - 静态配置四、动态切换主题配置五、完整源代码好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、下载官方主题下载地址：官网 Echarts 主题下载，除了下面官方提供的主题外，还可以定制你自己的主题将下载的主题js文件，保存在项目同级theme文件夹下二、引入主题JS文件指定 Echarts 的...原创 2020-02-24 22:58:24 · 4924 阅读 · 1 评论 -
Echarts 开发混搭图表实现步骤，并实现多图联动
文章目录一、Echarts图表制作准备工作二、给饼图和柱状图增加配置项三、分别画饼图和柱状图四、配置两个图表样式 ------ 显示在一行五、实现多图联动六、完整源代码好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、Echarts图表制作准备工作引入Echarts.js分别为饼图和柱状图指定 Dom 大小<!DOCTYPE html><html...原创 2020-02-23 23:51:39 · 7451 阅读 · 6 评论 -
Echarts 图表开发四大步骤详解
文章目录一、引入Echarts二、初始化Echarts实例三、准备展示数据Data四、设定图表配置项Option五、图表展示最终效果六、完整实例代码及解析好文章 记得收藏+点赞+关注额 ！！！---- Nick.Peng一、引入Echarts引入 Echarts.js<!DOCTYPE html><html><head> <met...原创 2020-02-22 18:21:57 · 2821 阅读 · 0 评论