2022年1月8日

Echart可视化学习集合

摘要： Echart可视化学习集合 ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行 阅读全文

posted @ 2022-01-08 21:27 那山的狐狸 阅读(479) 评论(1) 推荐(0) 编辑

终-Echart可视化学习（十二）

摘要： 进入官网寻找 里面可以搜素很多 这里直接使用下面这个示例 gallery.echartsjs.com/editor.html?c=x0-ExSkZDM 可以看到源码 实现步骤： 第一需要下载china.js提供中国地图的js文件 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 阅读全文

posted @ 2022-01-08 20:55 那山的狐狸 阅读(154) 评论(0) 推荐(0) 编辑

Echart可视化学习（十一）

摘要： 官网找到类似实例， 适当分析，并且引入到HTML页面中 代码整理 去掉标题 去掉工具箱 去掉一个图 查看效果 Index.html中的组件 在index.js中立即执行函数 实例化对象 指定配置 把配置给实例对象 让图表跟随屏幕自动的去适应 查看效果 根据需求定制图表 需求1：颜色设置 需求2：修改 阅读全文

posted @ 2022-01-08 20:33 那山的狐狸 阅读(73) 评论(0) 推荐(0) 编辑

Echart可视化学习（十）

摘要： 官网找到类似实例， 适当分析，并且引入到HTML页面中 代码也简单改一下 效果如下 在index.html中添加容器 在index.js中，完成立即执行函数 实例化对象 指定配置，将准备好的代码粘贴过来 把配置给实例对象 让图表跟随屏幕自动的去适应 查看效果 根据需求定制图表 定制图表需求1： 修改 阅读全文

posted @ 2022-01-08 20:22 那山的狐狸 阅读(49) 评论(0) 推荐(0) 编辑

Echart可视化学习（九）

摘要： 官网找到类似实例， 适当分析，并且引入到HTML页面中 去掉一些不需要的 数据留2个就可以了 查看效果 在index.js中编写立即执行函数 对应的index.html中 实例化对象 指定配置，将前面准备官方实例代码复制过来 把配置给实例对象 让图表跟随屏幕自动的去适应 查看效果 根据需求定制图表 阅读全文

posted @ 2022-01-08 20:00 那山的狐狸 阅读(46) 评论(0) 推荐(0) 编辑

Echart可视化学习（八）

摘要： 新增需求 点击 2020年 2021年 数据发生变化 在index.html中添加语句 在index.css中添加样式 查看效果 tab栏切换事件 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0] 点击2020按钮 需要把 series 第二个 阅读全文

posted @ 2022-01-08 19:41 那山的狐狸 阅读(33) 评论(0) 推荐(0) 编辑

Echart可视化学习（七）

摘要： 官网找到类似实例， 适当分析，并且引入到HTML页面中 打开后，查看源码 去掉Title，剩下的引入到们的文件中 回到index.js文件中，编写立即执行函数 实例化对象 将前面的官网示例代码粘贴过来，完成配置指定 把配置给实例对象 查看效果 为了方便显示，删除3条线 删除后 查看效果 根据需求定制 阅读全文

posted @ 2022-01-08 19:21 那山的狐狸 阅读(71) 评论(0) 推荐(0) 编辑

Echart可视化学习（六）

摘要： 柱状图定制 官网找到类似实例， 适当分析，并且引入到HTML页面中 引入代码 在之前的index.html中添加代码 查看效果 根据需求定制图表 实例化对象 指定配置和数据 没有网的同学代码如下： 把配置给实例对象同时让图表跟随屏幕自动的去适应 查看效果 需求1： 修改图形大小 grid 查看效果 阅读全文

posted @ 2022-01-08 18:47 那山的狐狸 阅读(64) 评论(0) 推荐(0) 编辑

Echart可视化学习（五）

摘要： 常见的数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代 阅读全文

posted @ 2022-01-08 18:06 那山的狐狸 阅读(103) 评论(0) 推荐(0) 编辑

Echart可视化学习（四）

摘要： 地图模块高度为 810px 添加样式 查看效果 里面包含4个盒子： chart 放图表模块 球体盒子 旋转1 旋转2 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度0.3 查看效果 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放1 阅读全文

posted @ 2022-01-08 17:38 那山的狐狸 阅读(92) 评论(0) 推荐(0) 编辑

Echart可视化学习（三）

摘要： 编写中间模块 添加显示样式 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距 查看效果 注意中间列 column 有个 左右 10px 下 15px 的外边距 查看效果 no 模块里面上下划分 上面是数字（no-hd) 下面是相关文字说明(no- 阅读全文

posted @ 2022-01-08 17:09 那山的狐狸 阅读(92) 评论(0) 推荐(0) 编辑

Echart可视化学习（二）

摘要： 页面主体部分 设置测试样式 查看页面效果 需要一个上左右的10px的内边距 添加文本 样式更改 查看效果 接下来column 列容器，分三列，占比 3：5：3 首先是“父亲” ——mainbox添加flex属性 然后主体添加三个部分的“孩子” 分别分成3：5：3 接下来准备一个：公共面板模块 pan 阅读全文

posted @ 2022-01-08 16:37 那山的狐狸 阅读(173) 评论(0) 推荐(0) 编辑

Echart可视化学习（一）

摘要： 创建需要的目录结构及文件 目录：css、font、images、js 文件：index.html 在css目录下创建一个css文件 Index.html文件中编写基本代码 初始化css 我们查看下引入的文件是否正确，在body中检测一下 双击运行下 准备js文件flexible.js 引入js文件 阅读全文

posted @ 2022-01-08 15:57 那山的狐狸 阅读(281) 评论(1) 推荐(0) 编辑

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示