ECharts笔记-------柱状图与折线图

news2024/11/25 4:41:49

 

 这幅图表由title、legend、series、xAxis、yAxis和tooltip这六个组件组成,每个组件都有对应的属性来调节参数,title和legend的代码跟上一篇一样,这里就不多讲了。

tooltip组件

tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
},
trigger触发类型,可选:'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用、'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
axisPointer.type指示器类型。'line'直线指示器、'shadow' 阴影指示器、'cross'十字准星指示器。

xAxis组件

xAxis:[
    {
        type:'category',
        axisTick:{
            alignWithLabel:true
        },
        data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    }
],
type'category'类目轴,适用于离散的类目数据、'value'数值轴,适用于连续数据、'time'时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同、'log'对数轴,适用于对数数据。
axisTick.alignWithLabel为‘true’可以保证刻度线和标签对齐。
data类目数据,在类目轴(type: 'categiry')中有效。

yAxis组件

yAxis:[
    {
        type:'value',
        name:'降水量',
        min:0,
        max:250,
        position:'right',
        axisLabel:{
            formatter:'{value}ml'
        }
     },
     {
        type: 'value',
        name: '温度',
        min: 0,
        max: 25,
        position: 'left',
        axisLabel: {
             formatter: '{value} °C'
        }
     }
],
type'category'类目轴,适用于离散的类目数据、'value'数值轴,适用于连续数据、'time'时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同、'log'对数轴,适用于对数数据。
name坐标轴名称。
min坐标轴刻度最小值。
max坐标轴刻度最大值。
postionx 轴的位置。
axisLabel.formatter刻度标签的内容格式器。

series组件

series:[
    {
        name:'降水量',
        type:'bar',
        yAxisIndex:0,
        data:[6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
        name:'温度',
        type:'line',
        smooth:true,
        yAxisIndex:1,
        data:[6.0,10.2,11,11.6,10.3,13.2,14.3,16.4,18.0,16.5,12.0,5.2]
    }
]
name系列名称,用于tooltip的显示,legend的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
type图表类型。
yAxisIndex使用的y轴的index,在单个图表实例中存在多个 y轴的时候有用。
smooth是否平滑曲线显示。
data对应xAxis每一项的数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/754168.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统组网图

接收路由器发送的数据信息并解析,做出相应的指示,点击按键表示完成拣货。 标签ID码正面显示无线通信868M,跳频通信通信速率200K/50K覆盖通信半径30米以上多色LED高亮指示灯自定义双向通信协议,安全可靠 电子标签拣货系统就是通过…

诺康达将再次上会接受审核:曾遭暂缓审议,业绩可持续性值得商榷

撰稿|行星 来源|贝多财经 近日,深圳证券交易所披露的信息显示,北京诺康达医药科技股份有限公司(下称“诺康达”)将于2023年7月20日接受上市委的审议,并于7月13日更新了招股书(上会稿)。 据招股…

总部V批恩没有发送到分支流量,只有接收分支流量,分支无法访问总部内网资源

环境: 分支设备: AF8.0.48 联想笔记本 总部设备: SSL V批恩 V7.0 AF8.0.75 RUIJIE NBS5710-24GT4SFP-E 问题描述: 总部V批恩没有发送到分支流量,只有接收分支流量,分支无法访问总部内网资源&#…

H3C-Cloud Lab实验-单臂路由实验

实验拓扑图: 实验需求: 1. 按照图示为 PC3 和 PC4 配置 IP 地址和网关 2. PC3 属于 Vlan10,PC4 属于 Vlan20,配置单臂路由实现 Vlan10 和 Vlan20 三层互通 3. PC3 和 PC4 可以互通 实验步骤: 1. 连接所有设备 2. …

Unity游戏源码分享-卡通填色游戏Drawing Coloring Extra Edition 1.09

Unity游戏源码分享-卡通填色游戏Drawing Coloring Extra Edition 1.09 非常适合小朋友玩的小游戏 功能很齐全完善 项目地址:https://download.csdn.net/download/Highning0007/88050261

KuiperInfer深度学习推理框架环境配置-Ubuntu 22.04

KuiperInfer项目地址 Github项目地址 B站课程地址 安装Armadillo 官网:Armadillo官网 介绍:Armadillo C Library是一种C的线性代数库,包含一些矩阵和向量的运算,可以选用高效的LAPACK和BLAS进行加速。 矩阵相关计算的文档&…

Arthas和常量池

一、Arthas 快速入门 | arthas 1、Arthas使用 运行arthas提供的应用程序 curl -O https://arthas.aliyun.com/math-game.jar java -jar math-game.jar 运行arthas工具jar包 curl -O https://arthas.aliyun.com/arthas-boot.jar java -jar arthas-boot.jar 启动界面如下图&…

Google Play针对恶意软件采取最新反制措施!

近日,谷歌开始针对Google Play上不断入侵的恶意软件采取反制措施,要求所有以机构名义注册的新开发者账户在提交应用程序之前提供一个有效的D-U-N-S号码。 这项新措施能有效提高平台的安全性和可信度,同时也能够有效遏制新账户提交恶意软件的…

kubernetes中特定域名使用自定义DNS服务器出现的解析异常

故障发生背景: 租户反馈生产业务服务连接到中间件的时候,偶尔会有连接失败的情况,然后我们查看对应组件服务正常,手动请求组件服务也显示正常,让租户查看业务服务日志发现报错无法解析对应的域名,我们手动是…

数据库的分片策略

数据库的分片策略 1、范围分片2、hash 取模分片3、一致性hash 分片 1.分片策略 数据库的分片策略是指将数据库中的数据按照一定的规则和方式进行分割(分片)存储在不同的物理节点或服务器上的策略。分片策略旨在实现水平扩展,提高数据库的性…

暑假第九天打卡

英语: 新东方六级一单元单词刷题复习 离散: 例12 使用消解算法判断下述公式是否是可满足的: 公式 S p∧(p∨q)∧(p∨q)∧(q∨r)∧(q∨r) 解: S p∧(p∨q)∧(p∨q)∧(q∨r)∧(q∨r) //化为主合取式 循环1: S0 S1 {p…

Windows 进程和作业

Windows 进程和作业 创建进程CreateProcess 函数的参数CreateProcess 的流程 创建Windows“现代化”进程创建其他类型的进程 进程的内部构造EPROCESSKPROCESSPEBCSR_PROCESSW32PROCESS 受保护进程最小进程和 Pico 进程最小进程Pico进程 Trustlet 安全进程进程的终止作业作业的限…

合并完之后,进行回退

我是将分支合并到了uat_v3上,现在又要求将uat_v3上的代码回退到合并以前; 我是将origin/uat_v3 checkout 除一份本地uat_v3,然后选中合并以前的commit记录,新建分支 temp/reverse 分支; 这样我本地的temp/reverse分支就已经是合…

[Java进阶] Swing两万字大总结一(超详细教程,这不得收藏一波)

🔥一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去🎶 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 🦄 …

将类模板做为参数(类模板中使用)

将类模板做为参数(类模板中使用) 这种方式只在类模板中使用,函数模板不能使用这种方法。 将模板名做为一种特殊的数据类型,实例化对象的时候,使用模板名做为参数,传递给模板。 下面例子中,数组…

Unity 上传文件到阿里云 对象存储OSS服务器

首先登录阿里云 免费试用–对象存储OSS --点击立即试用,可以有三个月的免费试用 创建Buket 新建AccessKey ,新建完成后,会有一个CSV文件,下载下来,里面有Key ,代码中需要用到 下载SDK 双击打开 sln文件&#xff0…

Java初识,继承

文章目录 环境变量配置的意义javapath与classpath伪随机数的生成RandmomMathThreadLocalRandomSecureRandom javamain函数Scanner 函数打印函数 注释Java中的注释主要分为以下三种 Stringboolean equals(Object anObject)int compareTo(String s) 数组数组的遍历数组名数组参数…

第八章:SegNet——一个用于强大的语义像素级标注的深度卷积编码-解码架构

0.摘要 我们提出了一种新颖的深度架构SegNet,用于语义像素级图像标注。SegNet具有一些吸引人的特性: (i)它只需要对完全学习的函数进行前向评估,就可以获得平滑的标签预测; (ii)随着深度增加,像素标注考虑了更大的上下…

网络安全中黑客的问题,黑客真的那么厉害吗?

前言 黑客这个名字一直是伴随着互联网发展而来,给大家的第一印象就是很酷,而且技术精湛,在网络世界里无所不能。目前几乎所有的公司企业甚至国家相关部门都会争相高薪聘请技术精湛的黑客作为互联网机构的安全卫士,所以黑客也是很…

超市商品信息管理系统设计与实现(论文+源码)

超市商品信息管理系统设计与实现(论文源码) 本篇 论文源码私我 以上内容只是精简版 还有很多原创类型论文 摘 要 本次主要先介绍研究背景、研究目标及相应价值的基础上,分析了国内外电子商务及相应超市管理系统的研究现状。随着计算机技术和网络技术的发展&#xf…