echarts的学习（二） 通用的配置，就是不管是什么图形，这些配置都可以使用

一写代码就开心 一写代码就开心 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 383平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-04-21 03:40:02 发布 383 阅读 AI 写同款· GEO 优化 ›
从零构建安全Linux系统：Pyramid Linux定制与iptables防火墙实战 Linux系统安全是运维和网络工程中的核心议题，其基础在于对系统内核与网络栈的深度控制。Netfilter作为Linux内核的包过滤框架，通过iptables等用户空间工具，实现了基于状态检测、地址转换和规则链的精细化流量管控。这种机制为构建企业级防火墙、安全网关和嵌入式设备防护提供了底层支持，尤其在需要最小化攻击面、定制化部署的场景中价值显著。Pyramid Linux这类极简发行版，以其高度可定制性和嵌入式友好的特性，成为实践安全加固的理想平台。通过结合Pyramid Linux的系统构建与iptabl 阅读详情

通用配置

在这里插入图片描述

在这里插入图片描述

1 .标题 title

从官网我们可以看到很多的配置，其中关于标题的样式，就是在title里面，我们展开这个，就可以看到关于标题的配置的代码，下面的这些都是关于标题的配置

在这里插入图片描述
在这里插入图片描述

2 提示框组件tooltip

这个配置的作用就是，鼠标放到图形上面，弹出提示框，里面写一定的东西，或者鼠标移动会有提示框出现。

在这里插入图片描述
在这里插入图片描述

3 工具栏toolbox

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们制作的图形要展示工具栏，只需要进行简单的配置就可以了

在这里插入图片描述
写上以上框住的代码，工具栏就会出现

在这里插入图片描述

4 多个图例切换legend

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

收录于
echarts

当前文章被收录于：

echarts
9 篇文章 1 人学习
订阅专栏 查看详情
标签
#数据可视化 #js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
栏目一：使用echarts绘制简单图形 Echarts是一款基于JavaScript的可视化图表库。它提供了丰富的图表类型和交互功能，可以用于在网页中展示各种数据。Echarts支持多种数据格式的转换和操作，可以轻松地将数据转换为图表所需的格式，并且可以对图表进行个性化的配置和设置。Echarts还支持响应式布局，可以根据不同的设备和屏幕大小自动调整图表的显示效果。Echarts的文档齐全，使用简便，并且具有强大的扩展性，可以满足各种复杂的数据可视化需求。本章节将从在线编辑图表和本地绘制图表两个方面进行介绍。 阅读详情

相关推荐

（新手）关于echarts图形导出到excel

（新手）关于echarts图形导出到excel

潇潇土鳖的博客 1万+

详解：当鼠标放上echarts图形时，显示数据、名称，或者自定义tooltip弹窗

效果一： 效果二： 主要知识点：tooltip{}该配置项为：提示框组件相关设置 效果一实现代码 tooltip: {//提示框组件 trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: '{a} <

GongWei_的博客 4万+

基于vue+echarts实现图形统计

背景：公司后台管理系统需要针对公司本身业务做一个图形统计，然而高逼格的D3.js没接触过，由于时间关系导致不敢这么贸然去尝试。最后考虑再三还是使用大众化的且功能同样强大的Echarts第一步：安装项目依赖 在控制台输入并运行npm install echarts --save-dev第二步：引入项目&lt;template&gt; &lt;div class="echarts-box" :id...

ly272864318的专栏 1万+

一个项目里同时用2个或多个不同版本的echarts插件

情景：在项目中需要用到echarts新版本的功能，但是发现项目中一直用的是老版本的echarts，假如直接升级echarts版本就会影响之前echarts图的一下功能；实现：下载新版本的echarts同时在项目中引入进来，再修改新版本的echarts.js文件，把echarts.js文件中所有的‘echarts’改成‘echarts4’（如果你下载的是echarts.4.0.x 的版本就改成‘ec...

tempuser78的博客 7358

LIO-SAM运行报错‘process has died’？别慌，一个命令搞定libmetis.so库路径问题

本文详细解析了LIO-SAM运行中常见的‘process has died’报错问题，特别是由libmetis.so库路径错误导致的节点崩溃。通过一个简单的命令移动库文件到正确位置，即可快速解决这一问题，同时提供了多种替代方案和预防措施，帮助开发者更好地理解Linux动态库加载机制和ROS环境管理。

weixin_29231221的博客 206

用STM32F407做个USB声卡：从CubeMX配置到播放录音全功能实战（附源码）

本文详细介绍了如何使用STM32F407开发板实现USB音频设备的全功能实战，包括CubeMX配置、硬件连接、音频流处理和性能优化。通过双缓冲DMA机制和音频数据处理流程，开发者可以构建高质量的USB声卡系统，适用于录音和播放场景。附源码，助力快速上手STM32音频开发。

weixin_30301449的博客 517

Echarts2.2 和 4 版本更换主题

2.2版本更换主题，我没能成功使用myChart.setTheme()这个方法，我找了很多，只有下面这一种方法可以 把这个目录下的主题文件拷贝到build\dist\theme下，没有theme文件夹，新建一个就行 然后在代码里这样写 <script type="text/javascript"> // 路径配置 require.config...

留住这时光的博客 4028

清理异常值（MAD：绝对中位差）

清理异常数据： 中位数绝对偏差（MAD）：用来描述单变量样本在定量数据中可变的一种标准 在统计学中，绝对中位差是刻画一元数据样本变化的一个鲁棒度量。由公式可以看出，其求解还算简单，给定一个数据样本集，首先求其中位数，然后求原始数据减去中位数的绝对值从而形成一个新的数据样本，再求新的数据样本的中位数即为绝对中位差。比如说有一个数据样本集X={2 3 8 7 9 6 4}，这时候数据的中位数是6，原...

spider_man 1万+

echarts中graphic_Echarts graphic原生图形元素组件

前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置...

weixin_39634900的博客 8071

长上下文技术的底层逻辑：Attention、压缩、缓存与跨页推理

如果把模型的参数视为“固化智能”，动态智能（Dynamic Intelligence）——模型不必依赖训练时的记忆，而是可以随时调用外部信息。这一点正在改变大模型的范式：Prompt 不再是输入，而是“操作系统事件”文档不再是知识，而是“模型的临时记忆”模型不再是一段神经网络，而是一个“具备阅读循环的推理引擎”当我们把上下文从 128K 拉到百万级，我们做的不是扩容，而是让模型第一次拥有阅读、回溯、定位、跨页分析的能力。这是一种新的智能。

aifs2025的博客 998

企业碳排放计算方法与实践：从年度总量到月度分配的完整流程

本文系统介绍了企业碳排放计算的全流程方法，包括数据预处理、能源活动与产品生产碳排放计算、年度汇总及月度分配优化。通过ARIMA模型预测补充缺失数据，采用二次规划算法实现基于用电量模式的月度碳排放分配，确保计算结果的准确性与合理性。该方法为企业碳排放管理提供了科学工具，有助于精准监控排放、制定减排策略并满足合规要求。实施中需注重数据质量控制和排放因子选择，并根据企业特点调整参数。该流程适用于制造业企业，为实现碳中和目标提供可靠的数据基础和管理支持。

applehunqiu的博客 1574

Echarts饼图 配置、样式详解 二、 图形中间文字、 图形旁边文字上下显示等

效果图： 图形中间文字详细配置： https://www.echartsjs.com/option.html#graphic.elements-text 代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &

freedomVenly的博客 4万+

手把手教你学PCIE(9.3)--pcie常见故障及原因：配置错误介绍

PCIe 设备的配置错误可能涉及操作系统设置、BIOS 设置、驱动程序设置和配置文件设置等多个方面。通过以上方法，可以有效地诊断和解决 PCIe 设备的配置错误。

MHD0815的博客 2441

Echarts数据可视化

EchartsEcharts 简介Echarts快速上手柱状图柱状图的基本使用其他常见效果通用配置项titletooltiptoolboxlegend折线图折线图基本配置其他效果饼状图 Echarts 简介 Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具 Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形 Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器

weixin_47723644的博客 2万+

4D毫米波雷达天线设计

多种天线布局方案介绍、天线设计要点介绍

5736

大数据分析工具Power BI（二）：Power BI下载安装和模块介绍

首先在Microsoft官方网站上下载PowerBI Desktop，然后进行安装。id=58494点击"Next"后会弹出下载框，进行下载即可，下载好的PowerBI名称为"PBIDesktopSetup_x64.exe"，也可以在"资料"中获取安装包，双击安装包即可安装。

Lansonli（蓝深李）的博客 2323

Echarts series line图形markLine的使用

代码中配置的两个方向是Y轴下标5位置与X轴下标5位置，也就是说会显示在响应的下标位置，在实际应用中你markLine.data应该是遍历得到的数组，当你默认data数组的xAxis是你遍历X轴的每条数据的index，那么就是有多少条X轴类目，就显示多少条标线，但与此文要说的需求并不相同，如上面示例展示实际上是。其中会看到series中的data坐标系存在null，请看第一张示例图中绿色line，可以看到存在断开，这也是需求的一部分，当然不能补空字符也可以‘’。以下就是示例的全部代码。

霓虹伊的博客 3093

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

echarts的使用, echarts配置项

(params) => { return ‘提示文本’ } 格式化显示文本,params(name(列名), value(列值), data(提供的数据))‘item’(放在每一项上时) | ‘axis’(在一列区域内，多用于折线图和柱状图) 提示文本触发时机。‘left’(默认) | ‘center’ | ‘right’ 设置标题的对齐方式。‘top’(默认) | ‘middle’ | ‘bottom’ 垂直对齐方式。'vertical’垂直 | ‘horizontal’(默认) 水平。

2401_84538062的博客 1252

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

使用ECharts框架实现图形化报表展示

在这个大数据越来越盛行的年代，越来越多的使用图表的形式来进行数据统计的展示，如折线图、柱状图、散点图、饼图、K线图，盒形图， 地图、热力图、线图等等；如果在以前，要实现这些图表，可能很多人会选择flash。但是flash开发难度大，成本较高，图表多的时候很耗性能。后来越来越多的纯js框架出现，让大家有了更多的选择，比如ECharts、Highcharts以及D3等等。本文将为大家介绍如何使用ECh...

chendaike的博客 1万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

【使用echarts及其配置图像】

例如，在展示一个包含数百万数据点的散点图时，Echarts 可以通过数据采样的方式，先展示部分数据点的大致分布情况，当用户放大图表某个区域时，再逐步加载和显示更详细的数据。动画效果优化：支持多种动画效果，如数据更新时的过渡动画、图表的加载动画等。例如，在动态更新柱状图的数据时，柱子的高度变化可以通过平滑的动画过渡，让用户更直观地感受到数据的变化过程。比如，在分析股票数据时，把价格走势的折线图和成交量的柱状图组合在一起，这样用户就能同时观察到股价变化及其对应的成交量变化，更全面地理解数据之间的关系。

lyp20230101026的博客 1761

echarts图形导出到excel

一、情景：本人刚接触echarts不久，之前有一个小功能需要实现：将echarts生成的图形导出到excel中，百度了好久。由于本人是新手，所有百度上的获取图形的base64编码的有些方法是没有理解，同事有个大神写了一个js，各种方法获取编码，然后用使用虚拟表单提交，直接一脸懵逼，耽误好长时间才解决。后来为了完成任务，直接套用这个大神的方法，根本不理解。后来回头研究了一下，这里总结一下自己的实现过...

6841

03、echarts 图例组件legend配置

默认的图例数据会从系列中获取，如果需要设置不同的图例样式或者不需要展示某个系列图例则可设置数据。图例的数据字段name必须是系列中的系列名称或数据名,测试不展示最后一项高跟鞋.并设置数据名为雪纺衫的图例图形为pinlegend: {// ...data: [name: "衬衫",},name: "羊毛衫",},name: "雪纺衫",},name: "裤子",},],},// ...七、type:scroll。

qq_38210427的博客 1万+

ECharts的基本使用

ECharts是百度公司开源的一个使用实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。开源免费它是开源免费的，也就是我们可以免费的使用ECharts，不需要缴纳任何的费用功能丰富它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制,满足各种需求，比如折线图、柱状图、饼图、K线图等.在他的官方示例中,提供了上百种图表,可以用 只有你想不到,没有她做不到 这句话来形容社区活跃。

黑马程序员官方博客 1万+

echarts图形库的学习

一般我们会画 折线图 柱形图 圆形图 或者散点图 用于数据可视化 所以我们使用echarts图形库 介绍在vue与react 还有原生的使用 https://blog.youkuaiyun.com/qq_43505774/article/details/106319044 这一期说了简单使用 现在我们准备深入学习echarts图形库 以react为例 vue与原生使用很接近 我直接上效果图 import React ,{Component} from 'react'; import {Card} from 'antd

AI模型自研小参数,智能体开发，langchain，langgraph，垂直类模型开发，魔搭社区模型微调，人工智能软件全周期落地，从0到1开发小模型，多模态，多模型，多智能体，然后数据中台，模型中台，集群部署算力调度，并发优化模型 476

ssm中使用echarts做图形展示数据

Map和数据库表的取存值，map和list遍历取出map值     Echarts的使用： Echarts的引用 script type="text/javascript" src="${pageContext.request.contextPath}/script/echarts.min.js">script>   图形存放展示位置

shanshuihanmu的博客 4034
上一篇： echarts的学习（一）快速上手,很快创建一个echarts的项目
下一篇： echarts的学习（三）echarts常用的图表介绍。
点赞 0
评论 0
书签 书签 0
一写代码就开心
一写代码就开心
博客等级 码龄7年 2万+粉丝 1037原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一写代码就开心

你的打赏将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值