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

该示例有如下几个特点:

        ①三角锥形+折线图

        ②折线图自带阴影

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

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

        ⑤鼠标放置时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.mfbz.cn/a/160096.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙ToastDialog内嵌一个xml页面会弹跳到一个新页面《解决》

ToastDialog 土司组件 1.问题展示2.代码展示3.问题分析 1.问题展示 0.理想效果 错误效果: 1.首页展示页面 (未点击按钮前) 2.点击按钮之后&#xff0c;弹窗不在同一个位置 2.代码展示 1.点击按钮的 <?xml version"1.0" encoding"utf-8"?> <…

HTTP1.0协议详解

前言主要特点存在的不足与HTTP1.1的区别在Java中应用HTTP1.0协议知识拓展 前言 HTTP是由蒂姆伯纳斯李&#xff08;Tim Berners-Lee&#xff09;爵士创造的。他在1989年提出了一个构想&#xff0c;借助多文档之间相互关联形成的超文本&#xff08;HyperText&#xff09;&#x…

[开源]基于 AI 大语言模型 API 实现的 AI 助手全套开源解决方案

原文&#xff1a;[开源]基于 AI 大语言模型 API 实现的 AI 助手全套开源解决方案 一飞开源&#xff0c;介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术&#xff0c;一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区&#xff0…

keepalived离线安装

上传离线安装包 将离线安装包拖动到服务器上 进入到离线安装包路径&#xff0c;执行下面脚本进行安装 rpm -Uvh --force --nodeps *.rpm

C++初级项目-webserver(1)

1.引言 Web服务器是一个基于Linux的简单的服务器程序&#xff0c;其主要功能是接收HTTP请求并发送HTTP响应&#xff0c;从而使客户端能够访问网站上的内容。本项目旨在使用C语言&#xff0c;基于epoll模型实现一个简单的Web服务器。选择epoll模型是为了高效地处理大量并发连接…

CF1899A Game with Integers(思维题)

题目链接 题目 题目大意 t 组测试样例 每组给一个正整数 n&#xff0c; 有两种操作&#xff1a; 1-1 A 和 B 轮流操作&#xff0c; 如果这个整数变成了一个能被3整除的数&#xff0c;A赢&#xff0c;输出First 如果在10次操作以内&#xff0c;n不能被3整数&#xff0c;B赢&…

TCP与UDP协议

TCP与UDP协议 1、TCP协议&#xff1a; 1、TCP特性&#xff1a; TCP 提供一种面向连接的、可靠的字节流服务。在一个 TCP 连接中&#xff0c;仅有两方进行彼此通信。广播和多播不能用于 TCP。TCP 使用校验和&#xff0c;确认和重传机制来保证可靠传输。TCP 给数据分节进行排序…

智能驾驶汽车虚拟仿真视频数据理解(一)

赛题官网 datawhale 赛题介绍 跑通demo paddle 跑通demo torch 提交的障碍物取最主要的那个&#xff1f;不考虑多物体提交。障碍物&#xff0c;尽可能选择状态发生变化的物体。如果没有明显变化的&#xff0c;则考虑周边的物体。车的状态最后趋于减速、停止&#xff0c;时序…

OpenAI的Whisper蒸馏:蒸馏后的Distil-Whisper速度提升6倍

1 Distil-Whisper诞生 Whisper 是 OpenAI 研发并开源的一个自动语音识别&#xff08;ASR&#xff0c;Automatic Speech Recognition&#xff09;模型&#xff0c;他们通过从网络上收集了 68 万小时的多语言&#xff08;98 种语言&#xff09;和多任务&#xff08;multitask&am…

Windows11怎样投屏到电视上?

电视屏幕通常比电脑显示器更大&#xff0c;能够提供更逼真的图像和更震撼的音效&#xff0c;因此不少人也喜欢将电脑屏幕投屏到电视上&#xff0c;缓解一下低头看电脑屏幕的烦恼。 Windows11如何将屏幕投射到安卓电视&#xff1f; 你需要在电脑和电视分贝安装AirDroid Cast的电…

Python | 机器学习之SVM支持向量机

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《人工智能奇遇记》&#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 目录结构 1. 机器学习之SVM支持向量机概念 1.1 机器学习 1.2 SVM支持向量机 2. SVM支持向量机…

hahahaha发到这里吧

一大早上笑死我 恭喜在座的各位&#xff0c;一直以为这次比赛public和private排名会相差不大&#xff0c;结果前6有4个人都是从银牌歘一下上来的&#xff0c;想象地到他们看到结果时的喜悦

python引入自己不同目录的模块

1.目录结构 from manual_data.utils import delete_and_insert_center

ceph学习笔记

ceph ceph osd lspoolsrbd ls -p testpool#查看 ceph 集群中有多少个 pool,并且每个 pool 容量及利 用情况 rados dfceph -sceph osd tree ceph dfceph versionsceph osd pool lsceph osd crush rule dumpceph auth print-key client.adminceph orch host lsceph crash lsceph…

搞科研、写论文,如何正确使用GPT?AIGC技术解析、提示词工程高级技巧、AI绘图、ChatGPT/GPT4应用

目录 专题一 OpenAI开发者大会最新技术发展及最新功能应用 专题二 AIGC技术解析 专题三 提示词工程高级技巧 专题四 ChatGPT/GPT4的实用案例 专题五 让ChatGPT/GPT4成为你的论文助手 专题六 让ChatGPT/GPT4成为你的编程助手 专题七 让ChatGPT/GPT4进行数据处理 专题八 …

这就是不创业的最大的原因,机器视觉兄弟们创业要谨慎,为什么99.99%机器视觉公司老板是销售人员?

机器视觉公司&#xff0c;99%公司实行销售优先原则&#xff0c;企业老板99%从销售人员中产生。所以机器视觉兄弟们创业要谨慎。 企业的本质就是通过销售获得利润的组织&#xff0c;销售是立足之本&#xff0c;没有销售&#xff0c;创业就是耍流氓。因此&#xff0c;企业的一切…

CF1899B 250 Thousand Tons of TNT

题目链接 题目 题目大意 T T T 组测试数据 每组 n n n 个货物&#xff0c;第 i i i 个货物 的重量是 a i a_i ai​ 用k辆货车按顺序装这些货物&#xff0c;条件是每辆车上的货物个数都一样&#xff0c;也即是说 n n n 必须能被 k k k 整除&#xff0c; 求任意两辆车货物总…

Redis 访问控制列表(ACL)

Redis ACL 关于 Redis ACL与旧版本兼容ACL helpACL 配置模式redis.conf 配置模式外部 ACL File 配置模式 ACL 规则总结 关于 Redis ACL Redis ACL (访问控制列表) 是 Access Control List 的缩写&#xff0c;它允许某些连接在可以执行的命令和可以访问的密钥方面受到限制。它…

代码随想录算法训练营第五十八天丨 动态规划part18

739. 每日温度 思路 首先想到的当然是暴力解法&#xff0c;两层for循环&#xff0c;把至少需要等待的天数就搜出来了。时间复杂度是O(n^2) 那么接下来在来看看使用单调栈的解法。 什么时候用单调栈呢&#xff1f; 通常是一维数组&#xff0c;要寻找任一个元素的右边或者左边…

智能配电房管理系统

智能配电房管理系统依托电易云-智慧电力物联网&#xff0c;是一种集成了互联网、物联网、大数据、人工智能等先进技术的管理系统&#xff0c;专门用于配电房的智能化管理和运维。以下是智能配电房管理系统的主要功能和特点&#xff1a; 一、主要功能&#xff1a; 实时监测与数据…
最新文章