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

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

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

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

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

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

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

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

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

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

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

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

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