当前位置： 首页 > news >正文

数据可视化高级技术Echarts(快速上手柱状图进阶操作)

news 2026/3/26 19:12:47

目录

1.Echarts的配置

 2.程序的编码

3.柱状图的实现（入门实现）

相关属性介绍（进阶）：

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

series系列（需要构造多组数据才能实现，下面有Sale和Sale1两组数据）

data系列（同一组数据每个柱状图不同的显示）

6.showBackground

7.label

8.title  标题属性及相关设置

9.tooltip  鼠标经过时，出现提示框

10.toolbox  工具按钮（下载、复原什么的操作按钮）

11.legend  图例

1.Echarts的配置

        在  src  下新建目录JS，将echarts.js放入其中(这个是Eclipse的截图，其他开发IDE只需要引入echarts.js即可)

注意：Eclipse需要创建Dynamic Web Project才能运行

 2.程序的编码

        回顾五个基本步骤（通过简单的5个步骤, 就能够把一个简单的图表显示在网页中了。这几个步骤中, 步骤4最重要,一个图表最终呈现什么样,完全取决于这个配置项。所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的。）

1.导入ECharts插件

<script type="text/javascript">

2.为ECharts准备一个DOM容器

<div id="main" style="width: 600px;height: 400px;"></div>

3.基于准备好的DOM，初始化echarts实例

var myChart=echarts.init(document.getElementById('main'));

4. 指定图表的配置项和数据（对ECharts进行一些配置）

var option={ }

5.将配置和参数传递给ECharts，显示图表

myChart.setOption(option);

3.柱状图的实现（入门实现）

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script src="JS/echarts.js"></script>  
</head>  
<body>  
<div id='main' style="width:600px;height:400px"></div>  
<script>  
var chartDom = document.getElementById('main');  
var myChart = echarts.init(chartDom);  
var option;  option = {/* 设置x轴数据 */xAxis:{data:["冰箱","电视","洗衣机","手机","微波炉"]},/* 设置x轴数据 */yAxis:{},/* 填写series序列的类型 */series:{type:'bar', /* 设置图标类型 */data:[200,128,150,340,178] /* 插入数据 */},/* 设置提示框 */tooltip:{},/* 添加标题 */title:{text:'电器销售图' /* 设置文本内容 */}
}; myChart.setOption(option);   
</script>  
</body>  
</html>

相关属性介绍（进阶）：

1.标记最大值/最小值

2.标记平均值

3.柱的宽度

4. 横向柱状图

5.colorBy

从调色盘 option.color 中取色的策略，可取值为：

  • 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
  • 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
series系列（需要构造多组数据才能实现，下面有Sale和Sale1两组数据）
option = {tooltip: {},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4],colorBy: "series"},{name: "Sale1",type: "bar",data: [3, 25, 76, 18, 14, 4, 10],colorBy: "series"}]
}

data系列（同一组数据每个柱状图不同的显示）
option = {tooltip: {},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4],colorBy: "data"}]
}

6.showBackground
  • 是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
  • 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。

注意：两个参数需要同时使用才能生效

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',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]
};

7.label

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。

  • show：是否显示标签
  • distance：距离图形元素的距离
  • rotate：旋转标签。从-90°到90°。正值是逆时针。
  • offset：文字偏移量。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
option = {tooltip: {},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4],colorBy: "series",legendHoverLink: true,label: {show: true,distance: 5,rotate: 50,offset: [5, 8]}}]
}

8.title  标题属性及相关设置
  • text：设置文章（主）标题
  • subtext：设置文章（副）标题
  • left：设置标题的 --水平-- 位置（可以为 'left'，'center'，'right'，或者指定为数值）
  • top：设置标题 --垂直-- 位置（可以为 'up'，'center'，'down'，或者指定为数值）
  • textStyle：设置（主）标题的颜色
  • borderWidth：设置标题边框宽度（厚度）
  • borderColor：设置标题边框颜色
  • boderRadius：设置标题边框圆角
option = {tooltip: {},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4]}],title:{text:'柱状图的标题',subtext:'这个是副标题（注意观察位置）',textStyle:{color:'green' },borderWidth:2,borderColor:'blue',borderRadius:5,// left:'right',left:180,top:10}
}

9.tooltip  鼠标经过时，出现提示框
  • trigger：设置触发类型（分为 item 和 axis ）
  • triggerOn：设置触发时机（分为 mousemove 和 click ）
  • formatter：设置格式化显示，即显示的标签格式（字符串模板，eg：{b}:{c} ）
  • axisPointer：设置触发显示为阴影（trigger为  axis 时生效） -->  下面图二
{tooltip: {trigger:'axis',triggerOn:'mousemove',// triggerOn:'click',formatter:'{b}:{c}',axisPointer:{type:'shadow'}},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4]}],
}

此时设置鼠标经过显示（mousemove）且axisPointer未生效（注释掉）

此时设置鼠标点击（click）且axisPointer生效

不想设置的话，建议加一个空白的tooltip，会自动给你有一些默认显示

 

10.toolbox  工具按钮（下载、复原什么的操作按钮）

只有五个工具：

  • 保存图片：savaAsImage
  • 数据视图：dataView（显示原始数据）
  • 重置还原：restore
  • 数据区域缩放：dataZoom
  • 动态类型切换：magicType（需要设置类型）
option = {tooltip: {},legend: {},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4]}],toolbox:{feature:{saveAsImage:{},dataView:{},restore:{},dataZoom:{},magicType:{type:['bar','line']}}}
}

11.legend  图例

        图例需要和数据组对应，才能正确显示（设置name）

  • left：设置到左边的距离（可以是数值，或者百分比）
  • top：设置到上边的距离（可以是数值，或者百分比）
  • orient：设置图例的排列方向  horizontal（水平，默认） ，vertical（垂直）
option = {tooltip: {},legend: {left:200,top:50,orient:'vertical'},xAxis: {data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]},yAxis: {},series: [{name: "Sale",type: "bar",data: [5, 20, 36, 10, 10, 20, 4]},{name: "Sale1",type: "bar",data: [5, 20, 36, 10, 10, 20, 4]}]
}

 

相关文章：

数据可视化高级技术Echarts(快速上手柱状图进阶操作)

目录 1.Echarts的配置 2.程序的编码 3.柱状图的实现&#xff08;入门实现&#xff09; 相关属性介绍&#xff08;进阶&#xff09;&#xff1a; 1.标记最大值/最小值 2.标记平均值 3.柱的宽度 4. 横向柱状图 5.colorBy series系列&#xff08;需要构造多组数据才能实现…...

编程日记 2024/4/7 23:08:50

【数据结构与算法】力扣 206. 反转链表

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a; head [1,2,3,4,5] 输出&#xff1a; [5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a; head [1,2] 输出&#xff1a; [2,1]示例 3&#…...

编程日记 2024/4/7 23:07:47

【随笔】Git 高级篇 -- 本地栈式提交 rebase | cherry-pick（十七）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…...

编程日记 2024/4/7 23:05:45

数据结构-- 基于顺序表的通讯录代码讲解

我们了解顺序表之后来一个比较简单的小项目来巩固一下. 每一个函数我都进行了详细的补充, 各位可以仔细阅读。我将整个项目分为了Contact.h 、Contact.c和test.c三个文件中&#xff0c;其中Contact.h用于函数声明和结构体创建&#xff0c;Contact.c用于函数的实现&#xff0c;t…...

编程日记 2024/4/7 23:04:43

qt-C++笔记之QLabel加载图片

qt-C笔记之QLabel加载图片 —— 2024-04-06 夜 code review! 文章目录 qt-C笔记之QLabel加载图片0.文件结构1.方法一&#xff1a;把图片放在项目路径下&#xff0c;在 .pro 文件中使用 DISTFILES添加图片文件1.1.运行1.2.qt_test.pro1.3.main.cpp 2.方法二&#xff1a;不在 .pr…...

编程日记 2024/4/7 23:03:41

Unity中UI系统1——GUI

介绍 工作原理和主要作用 基本控件 a.文本和按钮控件 练习&#xff1a; b.多选框和单选框 练习&#xff1a; 用的是第三种方法 c.输入框和拖动框 练习&#xff1a; 练习二&#xff1a; e.图片绘制和框 练习&#xff1a; 复合控件 a.工具栏和选择网格 练习&#xff1a; b.滚动视…...

编程日记 2024/4/7 22:57:35

GIt 删除某个特定commit

目的 多次commit&#xff0c;想删掉中间的一个/一些commit 操作方法 一句话说明&#xff1a;利用rebase命令的d表示移除commit的功能&#xff0c;来移除特定的commit # 压缩这3次commit,head~3表示从最近1次commit开始&#xff0c;前3个commit git rebase -i head~3rebase…...

编程日记 2024/4/7 22:55:33

Django --静态文件

静态文件 除了由服务器生成的HTML文件外&#xff0c;WEB应用一般需要提供一些其它的必要文件&#xff0c;比如图片文件、JavaScript脚本和CSS样式表等等&#xff0c;用来为用户呈现出一个完整的网页。在Django中&#xff0c;我们将这些文件统称为“静态文件”&#xff0c;因为…...

编程日记 2024/4/7 22:52:30

蓝桥杯第十三届省赛C++B组(未完)

目录 刷题统计 修剪灌木 X进制减法 【前缀和双指针】统计子矩阵 【DP】积木画 【图DFS】扫雷 李白打酒加强版 DFS (通过64%&#xff0c;ACwing 3/11&#xff09;; DFS(AC) DP&#xff08;AC&#xff09; 砍竹子(X) 刷题统计 题目描述 小明决定从下周一开始努力刷题准…...

编程日记 2024/4/7 22:51:29

编程生活day7--明明的随机数、6翻了、吃火锅

明明的随机数 题目描述 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了N个1到1000之间的随机整数&#xff08;N≤100&#xff09;&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数…...

编程日记 2024/4/7 22:48:26

css酷炫边框

边框一 .leftClass {background: #000;/* -webkit-animation: twinkling 1s infinite ease-in-out; 1秒钟的开始结束都慢的无限次动画 */ } .leftClass::before {content: "";width: 104%;height: 102%;border-radius: 8px;background-image: linear-gradient(var(…...

编程日记 2024/4/7 22:46:23

使用 Docker 部署 Photopea 在线 PS 工具

1&#xff09;Photopea 介绍 GitHub&#xff1a;https://github.com/photopea/photopea 官方手册&#xff1a;https://www.photopea.com/learn/ Adobe 出品的「PhotoShop」想必大家都很熟悉啦&#xff0c;但是「PhotoShop」现在对电脑配置要求越来越高&#xff0c;体积越来越大…...

编程日记 2024/4/7 22:44:21

回溯法(一)——全排列 全组合 子集问题

全排列问题 数字序列 [ l , r ] [l,r] [l,r]​区间内元素的全排列问题 extern int ans[],l,r,num;//num&#xff1a;方案数 extern bool flag[]; void dfs(int cl){//cl:current left&#xff0c;即为当前递归轮的首元素if(cl r 1){//数组已越界&#xff0c;本轮递归结束for…...

编程日记 2024/4/7 22:42:18

【Pt】马灯贴图绘制过程 04-玻璃脏迹

目录 效果 步骤 一、透明玻璃 二、烟熏痕迹 三、粗糙 四、浮尘 效果 步骤 一、透明玻璃 1. 打开纹理集设置&#xff0c;着色器链接选择“新的着色器链接” 在着色器设置中可以看到此时名称为“Main shader &#xff08;Copy&#xff09;” 这里修改名称为“玻璃” 在…...

编程日记 2024/4/7 22:40:16

Rust 程序设计语言学习——枚举模式匹配

枚举&#xff08;enumerations&#xff09;&#xff0c;也被称作 enums。match 允许我们将一个值与一系列的模式相比较&#xff0c;并根据相匹配的模式执行相应代码。 1 枚举的定义 假设我们要跨省出行&#xff0c;有多种交通工具供选择。常用的交通工具有飞机、火车、汽车和轮…...

编程日记 2024/4/7 22:38:12

正则表达式（1）

文章目录 专栏导读1、match2、匹配目标3、通用匹配4、常用匹配规则表格 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对大学生…...

编程日记 2024/4/7 22:37:11

nginx + keepalived 搭建教程

1.安装依赖 yum install -y keepalived systemctl start keepalived systemctl enable keepalived 2.配置 a. keepalived.conf配置 global_defs {router_id nginx_server2 # 机器标识(backup节点为nfs_server2) }vrrp_script chk { script "/etc/keepalived/check_po…...

编程日记 2024/4/7 22:36:09

React事件和原生事件的执行顺序

在 React 中&#xff0c;事件处理分为两种类型&#xff1a;React 合成事件&#xff08;Synthetic Event&#xff09;和原生 DOM 事件&#xff08;Native DOM Event&#xff09;。它们的执行顺序略有不同。 React 合成事件 React 合成事件的执行顺序&#xff1a; React 合成事件…...

编程日记 2024/4/7 22:34:07

为什么在计算查询Q和键K的矩阵乘法时需要转置键矩阵K。示例说明q11，k11代表什么。线性变换矩阵 W_q 用于生成查询，W_k 用于生成键怎么获取的。

目录 为什么在计算查询Q和键K的矩阵乘法时需要转置键矩阵K。 示例说明q11，k11代表什么。...

编程日记 2024/4/7 22:32:05

剑指Offer题目笔记27（动态规划单序列问题）

面试题89&#xff1a; 问题&#xff1a; ​ 输入一个数组表示某条街道上的一排房屋内财产的数量。相邻两栋房屋不能同时被盗&#xff0c;问小偷能偷取到的最多财物。 解决方案一&#xff08;带缓存的递归&#xff09;&#xff1a; 解决方案&#xff1a; 由于有报警系统&…...

编程日记 2024/4/7 22:29:02

League-Toolkit 英雄联盟工具集完整教程：从新手到高手的效率革命

League-Toolkit 英雄联盟工具集完整教程&#xff1a;从新手到高手的效率革命 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在…...

编程新知 2026/3/26 19:10:49

神经高利贷：预支未来技能导致认知崩溃

在软件测试领域&#xff0c;从业者常面临一个隐形威胁&#xff1a;过度追求新技能而忽视认知极限&#xff0c;最终引发崩溃。这种现象被称为“神经高利贷”&#xff0c;即通过预支未来学习能力来应对当前挑战&#xff0c;结果导致认知资源枯竭、错误率飙升&#xff0c;甚至职业…...

编程新知 2026/3/26 18:40:38

网络协议与文件系统，小车亮灯实验

网络协议与文件系统 一、项目背景二、项目核心目标与环境二者协同工作流程 四、Linux文件系统与设备操作实战五、完整Python代码实现配置项&#xff08;根据自身硬件调整&#xff09;安全退出函数&#xff1a;捕获CtrlC&#xff0c;关闭LED后退出注册CtrlC信号&#xff0c;绑定…...

编程新知 2026/3/26 18:38:38

League Akari：英雄联盟玩家的智能效率助手，提升90%游戏体验

League Akari&#xff1a;英雄联盟玩家的智能效率助手&#xff0c;提升90%游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit …...

编程新知 2026/3/26 16:59:19

STM32F407实战：手把手教你搞定永磁同步电机FOC电流环（附示波器调试避坑指南）

STM32F407实战&#xff1a;永磁同步电机FOC电流环深度优化与示波器调试全攻略 在电机控制领域&#xff0c;永磁同步电机(PMSM)的磁场定向控制(FOC)一直是工程师们关注的焦点。而电流环作为FOC控制中最核心的环节&#xff0c;其性能直接影响整个系统的响应速度和稳定性。本文将基…...

编程新知 2026/3/26 16:57:19

Element-UI Loading动画实战：如何优雅处理路由跳转与请求拦截（附自定义图标技巧）

Element-UI Loading动画深度优化&#xff1a;从路由拦截到视觉定制的完整方案 在Vue技术栈项目中&#xff0c;Element-UI的Loading服务是提升用户体验的关键组件之一。当页面需要等待数据加载或路由跳转时&#xff0c;一个流畅的加载动画能有效缓解用户的焦虑情绪。本文将深入探…...

编程新知 2026/3/26 16:04:53

ChatTTS流式音频合成实战：从原理到高并发优化

最近在做一个智能客服项目&#xff0c;需要将AI生成的文本实时转换成语音播报给用户。一开始我们用的是传统的TTS服务&#xff0c;文本传过去&#xff0c;等它全部合成完&#xff0c;再把整个音频文件返回。在用户量不大的时候还好&#xff0c;但一到高峰期&#xff0c;问题就全…...

编程新知 2026/3/26 10:57:29

RePKG完整指南：Wallpaper Engine资源提取与格式转换工具全解析

RePKG完整指南&#xff1a;Wallpaper Engine资源提取与格式转换工具全解析 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg 一、功能解析&#xff1a;掌握RePKG核心能力 1.核心功能…...

编程新知 2026/3/26 10:47:26

阴阳师自动化脚本百鬼夜行智能控制指南：从配置到精通

阴阳师自动化脚本百鬼夜行智能控制指南&#xff1a;从配置到精通 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 阴阳师自动化脚本是一款强大的游戏辅助工具&#xff0c;专为提升…...

编程新知 2026/3/26 9:00:41

动态生成展示：LiuJuan20260223Zimage模型根据实时天气创作“风晴雨雪”主题画

动态生成展示&#xff1a;LiuJuan20260223Zimage模型根据实时天气创作“风晴雨雪”主题画 你有没有想过&#xff0c;家里的数字画框或者手机壁纸&#xff0c;能像有生命一样&#xff0c;随着窗外的天气实时变化&#xff1f;今天&#xff0c;我就带你体验一个特别有意思的玩法&…...

编程新知 2026/3/26 8:56:40