echarts 三角锥形柱状图 + 带阴影的折线图示例

news2024/10/7 6:46:09

该示例有如下几个特点:

        ①三角锥形+折线图

        ②折线图自带阴影

        ③三角锥形鼠标放置时颜色改变

        ④数据随着鼠标移动而展示

        ⑤鼠标放置时tooltip样式自定义(echarts 实现tooltip提示框样式自定义-CSDN博客)

代码如下:

this.options = {
  animation: true,
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    textStyle: {
      align: "left",
    },
    className: "custom-tooltip-box",
    formatter: function (params) {
      return `<div class='custom-tooltip-style'>
        <span>${params[0].name}年</span></br>
        <div class="span">
          <span>缺材停飞:</span>
          <span>${params[0].value}件</span>
        </div>
      </div>`;
    },
  },
  grid: {
    top: "18%",
    left: "13%",
    bottom: "18%",
    right: "5%",
  },
  xAxis: {
    data: this.xAxisData,
    axisTick: {
      show: false, //隐藏X轴轴线
    },
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: "#355d8d", // 坐标轴线线的颜色
      },
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff", //X轴文字颜色
      },
      fontSize: "12", //x轴字体大小
      margin: 14,
    },
  },
  yAxis: {
    type: "value",
    name: "单位:架",
    nameTextStyle: {
      fontSize: this.handleWidth(12),
      color: "#FFFFFF99",
    },
    gridIndex: 0,
    axisLabel: {
      show: true,
      margin: 14,
      fontSize: 12,
      textStyle: {
        color: "#FFFFFF99",
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#87C2FF66",
        width: 0.7,
        type: "dashed",
      },
    },
  },
  series: [
    {
      // name: "预制预储包总数",
      type: "pictorialBar",
      symbol: "triangle",
      data: this.echartData,
      barWidth: 25,
      itemStyle: {
        color: "#E3FF3433",
        emphasis: {
          color: "#E3FF34FF",
          label: {
            show: true,
            formatter: "{c}",
            color: "#E3FF34FF",
            position: "top",
            fontSize: 14,
          },
        },
      },
    },
    {
      name: "预制预储包总数",
      type: "line",
      symbol: "rect",
      data: this.echartData,
      showSymbol: false,
      smooth: true,
      itemStyle: {
        color: "#E3FF34FF",
      },
      lineStyle: {
        shadowColor: "#00000066",
        shadowBlur: 3,
        shadowOffsetY: 20,
        shadowOffsetX: 0,
      },
    },
  ],
}

效果图如下:

该示例中的属性可在官网中查阅,若有其他疑问可私信留言互相交流学习~

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

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

相关文章

【GUI】-- 08 JButton、JRadioButton、JCheckBox

GUI编程 03 Swing 3.5 JButton 图片置于按钮之上的JButton&#xff1a; package com.duo.lesson05;import javax.swing.*; import java.awt.*; import java.net.URL;public class JButtonDemo01 extends JFrame {public JButtonDemo01() {Container contentPane getConten…

opencv(4):颜色空间

文章目录 颜色空间RGB 人眼的色彩空间HSV 色彩空间HSLYUVYUV420&#xff1a;YUV422&#xff1a;YUV444&#xff1a; 颜色空间转换代码示例 颜色空间 不同色彩空间显示效果是不一样的。 RGB 人眼的色彩空间 HSV 色彩空间 HSV 代表色相&#xff08;Hue&#xff09;、饱和度&a…

YOLO改进系列之注意力机制(EffectiveSE模型介绍)

模型结构 ESE(Effective Squeeze and Extraction) layer是CenterMask模型中的一个block&#xff0c;基于SE&#xff08;Squeeze and Extraction&#xff09;改进得到。与SE的区别在于&#xff0c;ESE block只有一个fc层&#xff0c;(CenterMask : Real-Time Anchor-Free Insta…

2019年12月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 以下程序执行后,角色面向的方向是? A:右上 B:右下 C:左上 D:左下 答案:B 面向-135度,是面向左下角,向右旋转-90度等于向左旋转90度。所以会旋转到右下角。 第2题 以下程…

WordPress网站迁移实战经验

前几日,网站服务器到期,换了服务商,就把我的WordPress的网站迁移到本地电脑了。方便以后文章迁移。 本次迁移网站主要经历以下几个步骤。 1.域名转出。 2.备份数据库及网站文件下载。 3.重新搭建WordPress网站。 4.网站文件及数据库导入。 下面详细介绍下每个步骤的操作…

基于STC12C5A60S2系列1T 8051单片的IIC总线器件数模芯片PCF8591实现数模转换应用

基于STC12C5A60S2系列1T 8051单片的IIC总线器件数模芯片PCF8591实现数模转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍IIC总线器件数模芯片PCF8591介绍通过按…

RabbitMQ 安装及配置

前言 当你准备构建一个分布式系统、微服务架构或者需要处理大量异步消息的应用程序时&#xff0c;消息队列就成为了一个不可或缺的组件。而RabbitMQ作为一个功能强大的开源消息代理软件&#xff0c;提供了可靠的消息传递机制和灵活的集成能力&#xff0c;因此备受开发人员和系…

CMakeLists.txt基础指令与cmake-gui生成VS项目的步骤

简介 本博客主要介绍cmake的基本指令&#xff0c;同时&#xff0c;很多使用Visual Studio小白从Gitbub下载项目源码后&#xff0c;看到CMakeLists.txt&#xff0c;不知道如何使用Visual Studio编译源码&#xff1b;针对以上问题&#xff0c;做一下简单操作与解释&#xff0c;方…

各类好玩免费API推荐,早知道就不用到处爬数据了...

啥是API/接口&#xff1f; 使用方法 API平台 淘宝/京东API接口数据 一些好玩的api 地图接口 天气查询接口 快递查询接口 笔记接口 其它接口 小结 啥是API/接口&#xff1f; 有些读者刚开始学习编程遇到API或者接口不太明白到底什么意思&#xff0c;没关系&#xff0…

Java项目实战《苍穹外卖》 一、项目概述

人道洛阳花似锦&#xff0c;偏我来时不逢春。 系列文章目录 苍穹外卖是黑马程序员2023年的Java实战项目&#xff0c;作为业余练手用&#xff0c;需要源码或者课程的可以找我&#xff0c;无偿分享 Java项目实战《苍穹外卖》 一、项目概述Java项目实战《苍穹外卖》 二、项目搭建 …

PyTorch - 高效快速配置 Conda + PyTorch 环境 (解决 segment fault )

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134463035 在配置算法项目时&#xff0c;因网络下载速度的原因&#xff0c;导致默认的 conda 与 pytorch 包安装缓慢&#xff0c;需要配置新的 co…

使用VMware安装linux虚拟机

文章目录 一、介绍二、下载VMware三、下载centOS镜像文件四、新建虚拟机1. 选择配置类型2. 安装centOS操作系统3. 命名4. 指定磁盘容量5. 虚拟机配置信息确认6. 稍后选择系统镜像 五、安装虚拟机1. 选择语言2. 设置时间、系统、以及yum源3. 开始安装4. 设置root用户密码5. 完成…

Angular菜单项激活状态保持

菜单项激活状态保持 需求描述详细需求 解决方案 需求描述 如果有个需求&#xff0c;让你实现一个导航栏&#xff0c;点击不同菜单&#xff0c;图表会有不同变化&#xff0c;页面刷新后&#xff0c;该菜单状态仍旧保持&#xff0c;实现方法如下&#xff1a; 例图&#xff0c;有…

中级程序员——vue3+js+git面试题

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;vue3jsgit面试题 文章目录 vue3最大缺点和优点&#xff1f;vue3组合式里面&#xff0c;如何去调用子组件里面的方法&#xff1f;watch和watcheffect有什么区别&#xff1f;计算属性和watch的区别是什…

DOA估计算法——Capon算法

1.波速形成基本思想 在理解Capon算法之前&#xff0c;我们有必要先了解波束形成的基本思想以及原理到底是什么。这有助于我们更好的理解Capon算法的思想。 图 1 如图1展示了均匀阵列波束导向的示意图。图中wm表示加权值&#xff0c;波速形成(DBF)的基本思想就是将各阵元输出进…

5g路由器赋能园区无人配送车联网应用方案

随着人工智能、无人驾驶技术和自动化技术的不断进步&#xff0c;无人配送技术得到了极大的发展。园区内的物流配送任务通常是繁琐的&#xff0c;需要大量的人力资源和时间。无人配送技术能够提高配送效率并减少人力成本。无人配送车辆和机器人能够根据预定的路线和计划自动完成…

QT上位机串口控制MCU

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言1.…

做外贸如何开发客户?外贸客户开发六大方法一次性分享

客户是外贸业务的基础&#xff0c;有了客户才会有订单&#xff0c;因此开发客户永远是外贸人们重点关注的&#xff01;那作为外贸小白要通过哪些渠道找到客户&#xff1f;有哪些外贸客户开发方法可以入手呢&#xff1f;今天就跟着东哥一起来了解一下外贸客户开发都有哪六个方法…

二百零二、Hive——Hive解析JSON字段(单个字段与json数组)

一、目的 用Flume采集Kafka写入到Hive的ODS层在HDFS路径下的JSON数据&#xff0c;需要在DWD层进行解析并清洗 &#xff08;一&#xff09;Hive的ODS层建静态分区外部表 create external table if not exists ods_queue(queue_json string ) comment 静态排队数据表——静…

CAN总线负载及CANoe查看总线负载率

文章目录 一、什么是CAN总线的负载率&#xff1f;二、负载率计算三、CANoe查看总线负载率 一、什么是CAN总线的负载率&#xff1f; 一般业内对负载率的定义为&#xff1a;实际数据传输速率和理论上能达到的数据传输速率的比值。 传输速率一般是按秒来计算&#xff0c;数据传输…