
相关推荐

2022-05-16
ECharts 水球图
#container { height: 600px; padding: 10px; background: white; border-radius: 12px; } var data = [ { name: '', data: [] } ] var config = { theme: 'LIGHT', // LIGHT | DARK colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] } var container = document.getElementById('container') var chart = echarts.getInstanceByDom(container) || echarts.init(container, null, { renderer: 'svg' }) var rowNum = d...

2022-11-06
ECharts 生涯彩虹图
#container { height: 600px; padding: 10px; background: white; border-radius: 12px; } var data1 = [ { value: 7, name: '0' }, { value: 7, name: '1' }, { value: 7, name: '2' }, { value: 6, name: '3' }, { value: 6, name: '4' }, { value: 6, name: '5' }, { value: 6, name: '6' }, { value: 6, name: '7' }, { value: 6, name: '8' }, { value: 6, name: '9' }, { value: 5, name: '10' }, { value: 5, name: '11' }, { value: 5, name: '12' }, { value: 4, n...

2021-01-05
在 Hexo 中插入 ECharts 动态图表
ECharts 简介ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(Chrome,Firefox,Safari,IE8/9/10/11 等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。它提供了常规的折线图、柱状图、散点图、饼图、K 线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。 Hexo 中的 EChartsECharts 的 Hexo 插件目前有三个版本,分别为: hexo-tag-echarts 需要手动引入 ECharts.js hexo-tag-echarts3 自动引入 https://cdn.bootcss.com/echarts/3.8.0/echarts.min.js hexo-tag-echarts4 自动引入 https://cdn.bootcss.com/echar...

2021-05-17
Hexo 博客实时访问统计图
前言本文教程主要针对 Hexo 博客,对博客站点的的访问地图、每月访问量、访问来源的维度绘制统计图,使用的是 ECharts 开源可视化库。具体效果可以点击本站的 统计--博客统计 页面查看。 本文数据来源均为百度统计,请确保博客站点已加入百度统计,以 butterfly 主题为例,可参照 Butterfly 安装文档(四) 主题配置-2 的分析统计段落实现。 本地主机访问(localhost)也会记录到百度统计,推荐在 【百度统计】--【管理】--【统计规则设置】--【过滤规则设置】--【受访域名统计规则】--【勾选排除 localhost(本地主机)】 排除本地主机访问(貌似在勾选后生效,但是以前的访问记录仍会统计)。 此文是针对于文章 Hexo 博客访问统计图 改良版,实时调用百度统计 API 获取访问数据。 本教程将会泄漏属于百度统计的站点 ID 和百度统计 AccessToken,请先前往 百度统计用户手册 了解,介意者请谨慎部署。 2021-05-14 新增访客数的统计,统计指标 metrics 可以选择统计访问次数(PV)还是访客数(UV)。 2021-05-1...

2021-08-01
ECharts 时序图
#container { height: 300px; padding: 10px; background: white; border-radius: 12px; } var data = [ { 'name': '时间', 'data': [ '2021-01', '2021-03', '2021-05', '2021-07', '2021-09', '2021-11', '2022-01' ] }, { 'name': '地点', 'data': [ '地点1', '地点2', '地点3', '地点4', '地点5', '地点6', '地点7' ] }, { 'name': '标题', 'data': [ '标题1标题1标题1', '标题2标题2...

2022-06-10
ECharts 对比漏斗图
#container1, #container2 { height: 500px; padding: 10px; background: white; border-radius: 12px; } var data1 = [ { 'name': '指标', 'data': [ '展示', '点击', '咨询', '下单' ] }, { 'name': '天猫', 'data': [ 3532093380, 1462451270, 639296573, 318559381 ] } ] var data2 = [ { 'name': '指标', 'data': [ '展示', '点击', '咨询', '下单' ] }, { 'name': '天猫', 'data'...
评论




