整理echarts的一些常用配置(附代码示例)

藏色散人

藏色散人

2023-04-18

2046人浏览

转载

echarts的基础用法就不讲了,官网上有很多demo,复制粘贴就能跑。这里主要整理一下笔者在公司中的常用配置。

1.双Y轴

当你的数据出现多条折线,而有的线条的数据很大,有的线条的数据很小,如果都统一放在一条Y轴上显示数据,则数据量小的会非常贴近X轴,这样就看不出数据的变化趋势,此时可以将数据分别展示,数据量大的在一边展示,数据量小的在另一边展示。

image.png

只需要配置好options.yAxis,然后在options.series中,给每个数据配置yAxisIndex即可,0是左边,1是右边。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2.loading效果

echarts自带了loading,在数据加载时可以调用showLoading(),取消加载时可以用hideLoading()

录制_2022_10_08_17_17_03_520.gif

3.no-data占位

echarts没有提供什么好的no-data占位,只能用title魔改。当没有数据的时候,首先是手动清空X轴和Y轴,然后再添加title;而当有数据的时候,删除delete title。

image.png

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更

下载
options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

4.标签带单位

echarts的默认标签是没有带单位的,echarts提供了单位的配置。在series的每条折线中都配置tooltip.valueFormatter,就可以了。

image.png

image.png

如果对标签展示的样式不太满意的,echarts也允许你自定义标签的html,此时可以在formatter的html里面添加单位。

配置如下,根据自己的项目自行更改:

<br>

image.png

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript 前端

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

487

5

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

2023.09.13

1606

8

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

2023.11.13

1219

4

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.12.29

437

3

火山引擎云服务器使用教程
火山引擎云服务器使用教程

火山引擎云服务器使用教程适合第一次购买、部署和管理云服务器的用户参考。本专题整理控制台入口、实例创建、地域和配置选择、系统镜像设置、安全组放行、远程连接、网站部署、续费计费和常见连接失败问题,帮助用户快速完成云服务器基础使用流程。

2026.08.04

0

10

火山引擎API Key绑定大模型教程
火山引擎API Key绑定大模型教程

火山引擎API Key怎么绑定大模型适合需要在火山方舟、应用后台、脚本工具或AI编程软件中调用模型的开发者参考。本专题整理控制台服务开通、API Key创建、模型权限检查、模型ID选择、Base URL填写、调用测试和鉴权失败排查,帮助用户完成从密钥到模型调用的配置流程。

2026.08.04

0

10

火山引擎API Key获取教程
火山引擎API Key获取教程

火山引擎API Key适合需要调用火山引擎云服务、AI模型、火山方舟接口或其他开放能力的开发者参考。本专题整理控制台入口、账号认证、服务开通、API Key创建、密钥复制保存、权限检查、调用测试和Key无效等常见问题排查。

2026.08.04

4

10

火山引擎API接入教程
火山引擎API接入教程

火山引擎API接入适合需要在应用、脚本、后台服务或AI工具中调用火山引擎能力的开发者参考。本专题整理控制台入口、服务开通、API Key获取、接口地址配置、请求参数填写、调用测试、权限设置、额度查询和常见接口报错排查。

2026.08.04

4

10

火山引擎DeepSeek API调用教程
火山引擎DeepSeek API调用教程

火山引擎DeepSeek API适合需要在应用、脚本、智能体或AI编程工具中调用DeepSeek模型的开发者参考。本专题整理火山引擎控制台入口、模型服务开通、API Key获取、Base URL配置、模型名称填写、调用测试、额度查询和常见接口报错排查。

2026.08.04

2

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程