Echarts折线图的部分修改

2023-11-15

 x轴刻度的隐藏显示:

xAxis: {
              axisTick: {
           show: true/false
       },

x轴的显示隐藏:

 xAxis: {
              axisLine: {
                  show: true/false
              },
       },

y轴去掉0刻度线:

 yAxis: 

                {

                    // min: 0,

                    scale: true,

                    axisLine: {

                        show: false,

                    },

                },

 (注意去掉min:0  ,数据比较小的时候0刻度不能去掉)

tooltip中使用fomatter(格式化 自定义):

formatter: (params) => {

consol.log(params);

                    const html =

                        `${params[0].axisValue}<br/>` +

                        `${params[0].seriesName}: <span style="color: #2cbeff">${Number(params[0].value).toFixed(0)}人</span>`;

                    return html;

                },

光滑折线,去掉拐点,鼠标hover显示效果:

 series: {
                //   symbol: "none",//没有小球和hover效果
                  type: 'line',
                  smooth: true, //是否平滑
                  showSymbol: false,
                  tooltip: {
                      show: true
                  },
},

series.showSymbol

说明:显示数据点。

默认值:true。

参数类型:boolean。

可选值:

       (1)true,显示所有数据点。

       (2)false,隐藏所有数据点,只有在 tooltip hover 的时候显示。

tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框。

修改legend的样式等:

默认是从与legend同级的color数组获取颜色,但是需要设置legend里面的data与series里面的name相同,并且去掉series.itemStyle.color

 color: [lineColor, "#2CBEFF"],

 legend: {

                type: "plain",

                icon: "diamond",

                data: [{ name: "岗位人数" }, { name: "核酸人数" }],

            },

 series: [

                {

                    //   symbol: "none",

                    name: "岗位人数",

                    type: "line",

                    color: lineColor,

                    smooth: true, //是否平滑

                    itemStyle: {

                        // color: "#ffffff",

                        borderColor: "rgb(0,115,100)",

                    },

                },

            

  {

                    //   symbol: "none",

                    name: "核酸人数",

                    type: "line",

                    color: #2CBEFF,

                    smooth: true, //是否平滑

                    itemStyle: {

                        // color: "#ffffff",

                        borderColor: "rgb(0,115,100)",

                    },

                },

(series中的series.color可以不用设置)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts折线图的部分修改 的相关文章

随机推荐

  • Qt中的私有信号

    一 什么是Qt私有信号 直接引用Qt文档中的描述 二 私有信号的作用 私有信号只能被响应 不能被用户代码来发射 emit 这是一种对某些信号的权限控制 也就是用户代码没有权力 发号施令 只能由Qt的类来发射 防止信号被 仿造 三 是否可以用
  • python网络爬虫--练习

    一 爬取王者荣耀英雄信息 单页 import json import pymysql import requests from lxml import etree def get heros url response requests ge
  • Linux中执行shell脚本

    在Linux系统下运行 sh文件有三种方法 比如我在root目录下有个test sh文件 第一种 在任何路径下 输入该文件的绝对路径 root test sh就可执行该文件 当然要在权限允许情况下 chmod 777 test sh tes
  • MATLAB二维绘图(一)使用plot函数进行简单绘图

    MATLAB二维绘图 一 使用plot函数进行简单绘图 1 使用plot绘制一个简单的图形 示例 单个参数绘图 clear clc close all t 1 200 y sin t pi 100 plot y t会默认从1开始间隔为1 结
  • 3dmax KeyError: ‘ Alphabet_S‘

    python opengl加载3d模型 报错 原因 mtl文件的name改了 更新一下就可以了 KeyError Alphabet S
  • QGIS-环境配置

    学习笔记 主要用于记录学习过程 及解决问题 如有侵权 请联系我 前言 本人是一名在校学生 应学校要求 学习QT QGIS 进行简单的遥感应用实现 一 学习环境 Windows10 VS2022 QT5 14 2 QGIS3 22 14 二
  • 蓝桥杯——《123》——python组十二届国赛真题

    题目描述 小蓝发现了一个有趣的数列 这个数列的前几项如下 1 1 2 1 2 3 1 2 3 4 小蓝发现 这个数列前 1 项是整数 1 接下来 2 项是整数 1 至 2 接下来3 项是整数 1 至 3 接下来 4 项是整数 1 至 4 依
  • iPhone/iPad如何与Windows10互传文件?

    本文提供共享文件夹的方式实现 例如在win10 D盘新建一个文件夹apple 右键属性 先后在 共享 S 高级共享 D 中设置 点击共享 S 添加Guest 权限设为读取 写入 之后依次点击共享 H 完成 D 按钮 点击高级共享 结果为下图
  • 4.11+4.12实习日志

    1 Qt帮助文档路径 Qt帮助文档路径 E Qt Qt5 9 9 5 9 9 mingw53 32 bin assistant exe 2 对象树 2 1 当创建的对象在堆区时候 如果指定的父亲是QObject派生下来的类或者QObject
  • SpringBoot返回json数据

    1 pom文件
  • uni-app搜索-历史记录

    效果图
  • 自建纯内网iot平台服务,软硬件服务器全栈实践

    基于以下几个考虑 自制硬件设备 mqtt内网服务器 1 米家app不稳定 逻辑在云端或xiaomi中枢网关只支持少部分在本地计算 2 监控homeassistant官方服务有大量数据交互 可能与hass安装小米账户有关 3 硬件 原理图 l
  • 【windTerm

    前言 随着时间的推移 在我们的日常工作中对于 SSH 工具的新鲜感日益不足 好多同学都在寻求一款新奇的 好用的 SSH 客户端 虽然目前市场上现存的 MobaXterm FinalShell CRT Putty Tabby 等工具已经能够满
  • Matlab/Simulink-PSFB移相全桥电路仿真搭建

    1 前言 Simulink零基础 PSFB移相全桥电路仿真搭建 PSFB电路仿真 移相全桥短路仿真 十分钟让你掌握PSFB移相全桥电路的闭环控制 移相全桥 PSFB DC DC转换器经常用于降压高直流母线电压 并在中大功率应用中提供隔离 P
  • python 线程池threadpool(使用篇)

    最近在做一个视频设备管理的项目 设备包括 摄像机 DVR NVR等 包括设备信息补全 设备状态推送 设备流地址推送等 如果同时导入的设备数量较多 如果使用单线程进行设备检测 那么由于设备数量较多 会带来较大的延时 因此考虑多线程处理此问题
  • python定义类的时候继承object类

    区别在于python2和python3 python3继承不继承object类都没有区别 但是python2继承object类的话 可以获得更多的魔术方法 静态方法 类方法的构造 类属性的快速访问 定制类实例的实现方法 PS python2
  • Python request content 和 text 的区别

    Python request content和text的区别 text 返回的是 unicode 型的数据 一般是在网页的 header 中定义的编码形式 content 返回的是 bytes 二级制型的数据 也就是说你如果想要提取文本就用
  • (20181206)在线计算GPS周、北斗周、周内日、年积日、简化儒略日

    介绍两个用于在线计算GPS周 周内日 年积日 简化儒略日的网站 网站一 http www gnsscalendar com 使用说明 网站二 http webapp geod nrcan gc ca geod tools outils ca
  • 根据相同主键,合并其他字段值,形成一条记录(oracle)

    将具有相同的主键INVT PROD ID值 其他列值CLAUSE MEMO CLAUSE TP CD BBCK DT使用 进行合并 形成一条记录 select INVT PROD ID MAX subStr CLAUSE MEMO 3 CL
  • Echarts折线图的部分修改

    x轴刻度的隐藏显示 xAxis axisTick show true false x轴的显示隐藏 xAxis axisLine show true false y轴去掉0刻度线 yAxis min 0 scale true axisLine