echarts 入门
工作中第一次碰到echarts,当时有大哥。二进宫没办法,只能搞定它。
感觉生活就是这样,不能解决的问题总是会反复出现。通过看视频、查资料,完成了工作要求。写一篇Hello World,进行备查。
基本使用
快速上手
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>ECharts快速上手</title>
</head>
<body>
<!-- 1. 创建echarts容器-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">//2. 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 3. 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 4. 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>
echarts 使用分为固定的四步
1 定义容器container
定义容器必须设置width\height,否则不会显示
2.初始化echarts对象myChart
3.创建选项option
4.echarts和option进行绑定
注意:
1. 每次修改option中的数据或配置后,必须重新调用setOption进行绑定;
2. option选项采用的是覆盖方式,在第N次修改的option,是对前面option选项的调整。(新option设置的,进行设置;没有指定的采用原来的配置项)
3. echarts 使用的难点在于option配置项太多,一定要养成勤查字典的习惯 官方地址***
基础知识
常用图表和其对应的作用
series.type字段指定图表类型。 图表类型和作用说明如下:
type | 图表名称 | 用途 | 图片 |
---|---|---|---|
line | 折线图 | 展现数据的变化趋势 | ![]() |
bar | 柱状图图 | 分类数据对比 | ![]() |
pie | 饼图 | 不同类目的数据在总和中的占比 | ![]() |
scatter | 散点图 | 展现数据的 x,y 之间的关系 | ![]() |
radar | 雷达图 | 多属性分析 | ![]() |
map | 地图 | 地理区域数据的可视化 | ![]() |
了解基础配置
需要了解的基本配置:
series
xAxis
yAxis
grid
tooltip
title
legend
color
-
series是一个数组,里面可以放多种图表(eg.多为柱状图、折线图和柱状图一起显示)。图表类型由对象里面的type字段指定, 根据要使用的type类型去series 配置选项 查找对应的配置项。
-
grid:直角坐标系内绘图网格。 常见的柱状图、折线图需要直角坐标系.通过left 、top等属性,设置图形距离容器的边距。
containLabel:true //将刻度标签算作grid内 -
xAxis:直角坐标系x 轴
-
yAxis:直角坐标系 y 轴
-
title:标题组件
下图1111即标题
-
tooltip:提示框组件
trigger触发方式
‘item’:数据项图形触发,主要在散点图,饼图等无X\Y轴的图表中使用。
‘axis’:坐标轴触发,主要在柱状图,折线图等会使用X\Y轴的图表中使用。 -
legend:图例组件
上方标志线条颜色和类型对应关系
-
color:调色盘颜色列表
指定 color:[‘red’]效果
坐标系X轴、Y轴配置参数
坐标系X轴、Y轴配置参数完全一致 明确要修改的内容、
找到对应的配置参数,进行调整。
名称 | 属性 |
---|---|
轴线 | axisLine |
刻度 | axisTick |
标签 | axisLabel |
网格线 | splitLine |
boundaryGap
boundaryGap:xAxis子属性,坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。说实话,我也没看懂啥意思,通过下面的图对比看一下。
柱状图自动标注极值
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',markLine:{data:[{type: 'average', name:'平均值',lineStyle:{color: '#FFA022',width:2},label:{show:true,color:'#f00',shadowColor: 'transparent',position:'end',formatter: function(params){return '平均值:'+params.value}}}]}}]
};
series-bar.markLine进行控制。
type | 作用 |
---|---|
average | 平均值 |
min | 最小值 |
max | 最大值 |
median | 中位数 |
地图缩放处理
监听屏幕变化,调用缩放方法
window.addEventListener('resize',()=>{console.log('处理窗口缩放时要处理的逻辑操作!');mychart.resize();});
地图使用指南
展示中国地图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">fetch('./json/china.json').then(res => res.json()).then(res => {let chinaJson = res//附加 注册地图echarts.registerMap('china', chinaJson)//1. 初始化dom 容器let mychart = echarts.init(document.querySelector('.map'))//2. 初始化选项let option = {series: [{type: 'map',map: 'china',roam: true,zoom: 1.2,itemStyle: {areaColor: '#6080f1',borderColor: '#ccc'},label: {show: true,color: '#fff'},emphasis: {itemStyle: {areaColor: '#0f3cde'}}}]}mychart.setOption(option)})</script>
</body>
</html>
参照原来的一般规则(附加地图注册),就可以展示一张简单的地图。注意注册的名字必须和map value一致。
这个地图也太简单了,几乎没有功能。下面在地图上添加标注。
地图添加标注
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">fetch('./json/china.json').then(res => res.json()).then(res => {let chinaJson = res//附加 注册地图echarts.registerMap('china', chinaJson)//2. 初始化dom 容器let mychart = echarts.init(document.querySelector('.map'))//3. 初始化选项let option = {geo: {tooltip: {show: true},map: 'china',roam: true},series: [{type: 'scatter',coordinateSystem: 'geo',geoIndex: 0,data: [{name: '上海',value: [121.48, 31.22, 11]},{name: '广州',value: [113.23, 23.16, 31]}],symbol: 'image://./images/ic_location.png',// symbol: 'image://http://api.tianditu.gov.cn/img/map/markerA.png',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'symbolSize: 30,label: {show: true,color: '#fff',fontSize: 18,formatter: function (params) {// console.error('params:' + JSON.stringify(params))return params.value[2]}}}]}//4. 进行绑定mychart.setOption(option)})</script>
</body>
</html>
在地图上添加标记时,处理方式有所不同。
- 在option根属性下必须添加一个geo选项,个人理解就是添加地图坐标系
- series 数组下 type scatter,指定为散点图 coordinateSystem、geoIndex指定散点图坐标系。
- 其中的data 就是散点。 symbol 散点图标、label散点标签
地图下钻
名字起的有点专业了,就是点击中国地图山东版块后,展示山东行政区各个地级市的地图。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 1. 创建容器-->
<div class="map" style="width:500px;height:500px;">
</div>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript">//1. 初始化dom 容器let mychart = echarts.init(document.querySelector('.map'))function clickMap(cityName) {// alert('Hello, World!');fetch(`./json/${cityName}.json`).then(res => res.json()).then(res => {let cityJson = res;echarts.registerMap(cityName, cityJson)let option = {geo: {map: cityName,roam: true},}mychart.setOption(option)})}fetch('./json/china.json').then(res => res.json()).then(res => {let chinaJson = res//附加 注册地图echarts.registerMap('china', chinaJson)mychart.on('click', function (params) {console.error('params:' + params.name) //新疆维吾尔自治区clickMap(params.name)})//2. 初始化选项let option = {geo: {tooltip: {show: true},map: 'china',roam: true},}mychart.setOption(option)})</script>
</body>
</html>
前端知识杂记
css 特殊符号
.mainbox{display:flex;.column{flex:3;&:nth-child(2){ //1st节点选择器为 first-childflex:5}}
}
这样就可以实现个别元素的定制化。
& 代表单签的选择器。当嵌套定义样式时,&会替换父选择器。
:: 用于定义伪元素 eg. &::before{} &::after{}
: 用于定义伪类 eg. :hover
选择器
document.querySelector 可以获取文档中的第一个匹配的元素。
. class查询
# id查询
什么都不写,进行标签查询 eg. div
居中的典范代码
.login{width: 200px;height: 200px;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);background-color:#cccccc;
}
一般使用规则
- 找一个参考样本 素材库
- 在上面进行配置项调整,直到做出满意的效果,直接复制即可
- 对于配置项存在的问题 查字典解决
问题总结
行政区边界下载
行政区边界在线访问 https://geo.datav.aliyun.com/areas_v3/bound/650102.json
650102 行政区域码
参考资料
pink ECharts数据可视化项目
echarts 官网
相关文章:

echarts 入门
工作中第一次碰到echarts,当时有大哥。二进宫没办法,只能搞定它。 感觉生活就是这样,不能解决的问题总是会反复出现。通过看视频、查资料,完成了工作要求。写一篇Hello World,进行备查。 基本使用 快速上手 <!DO…...

WPF实现类似网易云音乐的菜单切换
这里是借助三方UI框架实现了,感兴趣的小伙伴可以看一下。 深色模式: 浅色模式: 这里主要使用了以下三个包: MahApps.Metro:UI库,提供菜单导航和其它控件 实现步骤:1、使用B…...
OpenCV人脸检测与识别:构建智能识别系统
在当今科技日新月异的时代,人脸识别技术以其独特的便利性和安全性,在各个领域都展现出了巨大的应用潜力。从智能手机的面部解锁,到机场的自动安检,再到商场的顾客行为分析,人脸识别技术无处不在。本文将深入探讨如何使…...

H5 Canvas 举牌小人
之前看到这种的举牌小人的图片觉得很有意思,最近有时间所以就尝试写写看。 在线链接 https://linyisonger.github.io/H5.Examples/?name./080.Canvas%20%E4%B8%BE%E7%89%8C%E5%B0%8F%E4%BA%BA.html 生成效果 实现代码 <!DOCTYPE html> <html lang"…...

rom定制系列------小米6x_澎湃os1.0.28安卓13定制固件修改 刷写过程与界面预览
💝💝💝 在接待很多定制化系统过程中。小米6x机型为很多工作室客户使用。但官方低版本固件无法适应新应用的使用。有些第三方固件却可以完美解决。此固件是客户分享的卡刷固件。需要修改为可以批量刷写的线刷固件。去除一些内置应用。需要自带…...

电脑硬件性能:HDD + SSD + CPU + GPU
文章目录 任务管理器:性能参数详解一、电脑的硬件组成二、机械硬盘和固态硬盘2.1、详细介绍:HDD SSD2.2、读写性能2.2.1、(HDD)读写性能的影响因素:寻道时间 旋转延迟 数据传输时间2.2.2、(SSDÿ…...

通过粒子系统customData传值给材质球
粒子特效使用的材质球,如果通过动画控制shader的某个参数,例如溶解阈值,所有的粒子都会按照相同的数值变化,如果需要每个粒子在自己的生命周期内按照曲线变化,则可以通过customData实现。 1.ParticleSystem中勾选Cust…...
常用分布的数学期望、方差、特征函数
文章目录 相关教程相关文献常用分布的数学期望&方差&特征函数定义事件域概率条件概率随机变量分布函数连续随机变量的概率密度函数数学期望离散随机变量连续随机变量 方差与标准差最大似然估计特征函数 不等式Chebyshev(切比雪夫)不等式 作者&am…...
ssh-配置
生成 SSH 密钥是一项重要的安全措施,用于在客户端和服务器之间建立加密连接。以下是在 Windows 和 Linux 系统上生成 SSH 密钥的详细步骤。 一、在 Linux 上生成 SSH 密钥 Linux 通常预装了 ssh-keygen 工具,可以通过以下步骤生成 SSH 密钥:…...

Python 在 JMeter 中如何使用?
要在JMeter中使用Python,需要使用JSR223 Sampler元素来执行Python脚本。使用JSR223 Sampler执行Python脚本时,需要确保已在JMeter中配置了Python解释器,并设置了正确的环境路径。 1、确保JMeter已安装Python解释器,并将解释器的路…...
贪心day1
文章目录 前言雪糕的最大数量重新分装苹果装满石头的背包的最大数量K 次取反后最大化的数组和不同整数的最少数目 前言 💫你好,我是辰chen,本文旨在准备考研复试或就业 💫文章题目大多来自于 leetcode,当然也可能来自洛…...

Redis 完整指南:命令与原理详解
目录 1. Redis 概述什么是 RedisRedis 应用场景 2. 安装与启动Redis 安装步骤源代码安装使用包管理器安装(以 Ubuntu 为例) 编译与启动命令编客户端连接 3. Redis 存储结构KV 存储结构数据结构类型String(字符串)List(…...
【2024软考高级架构师】论文篇——3、论Web系统的测试技术及其应用
【摘要】 本人于2023年8月参与了某地级市的市级机关电子政务信息系统的建设工作,该项目是该市机关的电子政务网建设计划的一部分,笔者在该项目中担任项目经理和系统分析师一职,主要负责项目的日常全面管理和质量保证与质量控制工作。该项目是基于WEB系统的,由于WEB系统具有…...

迪杰斯特拉算法的理解
图片转载自:最短路径算法-迪杰斯特拉(Dijkstra)算法 - 程序小哥爱读书的文章 - 知乎 https://zhuanlan.zhihu.com/p/346558578 迪杰斯特拉,一个广度优先算法,采用了贪心策略。 第一步,选取顶点D,更新和D相连的节点C&a…...

华为OD机试 - 文本统计分析(Python/JS/C/C++ 2024 E卷 200分)
华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…...
计算机挑战赛9
Excel表列名称由字母A~Z组成,列字母的规律如下: A、B、C.、AA、AB....AZ、BA、B...ZZZZY、ZZZZ...输入: 输入包含两个列名称字符串,长度均小于等于5。 输出: 输出两个列名称之间共有多少列 样例输入: AA AZ 样例输出: 24 代码: C&…...

C++学习路线(十六)
void类型指针 void -> 空类型 void* -> 空类型指针,只存储地址的值,丢失类型,无法访问,要访问里面的值 我们必须对指针进行正确的类型转换,然后再间接引用指针 所有其它类型的指针都可以隐式自动转换成 void 类型…...

2024年最受欢迎的AI工具与实际应用:AI技术对未来生活的深远影响
2024年最受欢迎的AI工具与实际应用:AI技术对未来生活的深远影响 随着2024年的到来,人工智能(AI)技术已经深入渗透到我们生活的方方面面。从日常工作到科学研究,AI工具的应用变得越来越广泛。无论是生成式AI工具&#…...
【网络安全】账户安全随笔
未经许可,不得转载。 作者:Enoch 原文出处:https://mp.weixin.qq.com/s/oKBpZ0F6Kl5NNmHSYCYIPw 文章目录 账户类型资金划转问题幂等ID使用错误多接口并发问题精度问题其他划转问题特殊资金盗取问题科学计数法问题账户类型 在互联网金融和电商企业中,账户安全直接关系到用…...

在线培训知识库管理系统:教育行业的新动力
在当今数字化时代,教育行业正经历着前所未有的变革。随着在线教育的兴起,如何高效地管理和传播知识成为了一个关键问题。在线培训知识库管理系统应运而生,它以其强大的知识整合、分享和管理能力,为教育行业注入了新的活力。 一、…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...

2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...