ECharts
文章平均质量分 55
晴雨相拥,同心逐梦
记笔记的地方,不要较真。。。
展开
-
数据可视化ECharts:中国地图模拟飞行模块
原先是用ECharts自带的社区做的,但是现在在新版已经没有了,然后我又找到了一个相似的。- 第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入。- 修改地图省份背景 #142957 areaColor 里面做修改。- 第一需要下载china.js提供中国地图的js文件。- 地图放大通过 zoom 设置为1.2即可。- 使用社区提供的配置即可。原创 2022-11-05 18:34:07 · 820 阅读 · 0 评论 -
数据可视化ECharts:饼形图2 地区分布模块制作(南丁格尔玫瑰图)
需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )- 需求4:数据使用更换(series对象 里面 data对象)饼图图形上的文本标签可以控制饼形图的文字的一些样式。- 需求5:字体略小些 10 px ( series对象里面设置 )- 官网找到类似实例, 适当分析,并且引入到HTML页面中。- 需求2:修改饼形图大小 ( series对象)- 需求3: 把饼形图的显示模式改为 半径模式。- 需求1:颜色设置。- 根据需求定制图表。原创 2022-11-05 13:33:17 · 718 阅读 · 0 评论 -
数据可视化ECharts:饼形图 1年龄分布模块制作
修改内圆半径和外圆半径为 ["40%", "60%"] 带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小。- 文字大小为12 颜色 rgba(255,255,255,.5)- 官网找到类似实例, 适当分析,并且引入到HTML页面中。- 每个小图标的宽度和高度修改为 10px。- 修改图例组件在底部并且居中显示。4. 让图表跟随屏幕自动的去适应。- 修改水平居中 垂直居中。定制需求4: 更换颜色。- 根据需求定制图表。定制需求3:更换数据。原创 2022-11-03 18:28:20 · 1349 阅读 · 0 评论 -
数据可视化ECharts:定制折线图2 播放量模块制作
需求1: 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12。- 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12。- x轴线的颜色为 rgba(255,255,255,.2)需求5: 修改两个线模块配置(注意在series 里面定制)- 官网找到类似实例, 适当分析,并且引入到HTML页面中。需求4: 修改y轴的相关配置。需求3: 修改x轴相关配置。需求2: 修改图表大小。- 根据需求定制图表。原创 2022-11-02 19:48:55 · 323 阅读 · 0 评论 -
数据可视化ECharts:定制折线图1
点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]- 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。- x轴刻度标签字体颜色:#4c9bfd。- 分割线颜色:#012f4a。- 字体颜色:#4c9bfd。原创 2022-11-01 18:02:03 · 201 阅读 · 0 评论 -
数据可视化ECharts:定制柱形图
官网找到类似实例, 适当分析,并且引入到HTML页面中。需求5: 修改第二组柱子的相关配置(框状)需求4: 修改第一组柱子相关样式(条状)需求7: 设置两组柱子层叠以及更换数据。- 设置第一组柱子内百分比显示数据。需求1: 修改图形大小 grid。需求6: 给y轴添加第二组数据。- y轴文字的颜色设置为白色。- 不显示y轴线和相关刻度。- 设置第一组柱子不同颜色。需求3: y轴相关定制。传递进来的是柱子对象。- 根据需求定制图表。需求2: 不显示x轴。原创 2022-11-01 18:01:48 · 653 阅读 · 0 评论 -
数据可视化ECharts:定制柱状图bar
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px。- Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框。- 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)// x轴中更换data数据。原创 2022-11-01 18:01:27 · 1405 阅读 · 0 评论 -
数据可视化ECharts:ECharts使用
需要了解的主要配置:`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']数据堆叠,同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加。- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用。// 系列图表配置 它决定着显示那种类型的图表。原创 2022-11-01 18:02:25 · 591 阅读 · 0 评论 -
数据可视化ECharts:静态页面制作--主体
5. no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont。8. no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px。7. 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2);原创 2022-11-01 18:01:08 · 749 阅读 · 0 评论 -
数据可视化ECharts:静态页面制作--头部
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。用这个插件,并修改为80px,这样因为我们引入就1rem=80px。数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。考虑到页面尺寸发生改变,它也随之该变,引入flexible.js。- 基于ECharts 数据可视化展示。- ECharts 柱状图数据设置。修改10等分为24等分。原创 2022-11-01 13:52:40 · 564 阅读 · 0 评论