echarts3d柱状图

news2024/10/7 8:31:32 
//画立方体三个面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 9.5, //柱状图宽
    zWidth: 4, //阴影折角宽
    zHeight: 3, //阴影折角高
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];

    ctx.moveTo(p0[0], p0[1]);
    // ctx.lineTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);

    ctx.closePath();
  },
});
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 9,
    zWidth: 9.5,
    zHeight: 5.5,
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];
    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
    const p6 = [
      shape.x + shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight / 2,
    ];
    const p7 = [
      shape.x - shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight,
    ];
    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p5[0], p5[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p4[0], p4[1]);

    // ctx.moveTo(p4[0], p4[1]);
    // ctx.lineTo(p6[0], p6[1]);
    // ctx.lineTo(p7[0], p7[1]);
    // ctx.lineTo(p1[0], p1[1]);
    // ctx.lineTo(p4[0], p4[1]);
    ctx.closePath();
  },
});
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
    width: 9,
    zWidth: 9.5,
    zHeight: 6,
  },
  buildPath: function (ctx, shape) {
    const api = shape.api;
    const xAxisPoint = api.coord([shape.xValue, 0]);
    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    const p4 = [shape.x + shape.width / 2, shape.y];
    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
    const p6 = [
      shape.x + shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight / 2,
    ];
    const p7 = [
      shape.x - shape.width / 2 + shape.zWidth,
      shape.y - shape.zHeight,
    ];
    // ctx.moveTo(p4[0], p4[1]);
    // ctx.lineTo(p3[0], p3[1]);
    // ctx.lineTo(p5[0], p5[1]);
    // ctx.lineTo(p6[0], p6[1]);
    // ctx.lineTo(p4[0], p4[1]);

    ctx.moveTo(p4[0], p4[1]);
    ctx.lineTo(p6[0], p6[1]);
    ctx.lineTo(p7[0], p7[1]);
    ctx.lineTo(p1[0], p1[1]);

    ctx.closePath();
  },
});
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
//定义颜色值
const colors = [
  [
    { offset: 0, color: "rgb(254, 223, 34)" },
    { offset: 0.5, color: "rgba(254, 223, 34,0.2)" },
    { offset: 1, color: "rgba(0, 0, 0,0.3)" },
  ],
  [
    { offset: 0, color: "rgba(23, 252, 238)" },
    { offset: 0.5, color: "rgba(23, 252, 238,0.2)" },
    { offset: 1, color: "rgba(0, 0, 0,0.3)" },
  ],
];
const leftColors = [
  [
    { offset: 0, color: "rgb(254, 223, 34,0.7)" },
    { offset: 0.5, color: "rgba(254, 223, 34,0.9)" },
    { offset: 1, color: "rgba(0, 0, 0,0.3)" },
  ],
  [
    { offset: 0, color: "rgba(23, 252, 238,0.7)" },
    { offset: 0.5, color: "rgba(23, 252, 238,0.9)" },
    { offset: 1, color: "rgba(0, 0, 0,0.3)" },
  ],
];
const topColors = [
  [
    {
      offset: 0,
      color: "rgba(204, 186, 49,0.5)",
    },
    {
      offset: 1,
      color: "rgba(204, 186, 49,0.8)",
    },
  ],
  [
    {
      offset: 0,
      color: "rgba(17, 159, 174,0.5)",
    },
    {
      offset: 1,
      color: "rgba(17, 159, 174,0.8)",
    },
  ],
];
function getSeriesData() {
  const data = [];
  seriesData.forEach((item, index) => {
    data.push({
      type: "custom",
      name: item.label,
      renderItem: function (params, api) {
        return getRenderItem(params, api);
      },
      // label:{
      //  show:true,
      // },
      data: item.data,
      itemStyle: {
        color: () => {
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
        },
      },
    });
  });
  data.push(
    {
      type: "bar",
      itemStyle: {
        color: "transparent",
      },
      label: {
        normal: {
          show: true,
          position: "top",
          fontSize: 12,
          color: "rgba(255, 255, 255, 0.9)",
          offset: [-5, -15],
        },
      },
      data: seriesData[0].data,
    },
    {
      type: "bar",
      itemStyle: {
        color: "transparent",
      },
      //  showBackground: true,

      label: {
        normal: {
          show: true,
          position: "top",
          fontSize: 12,
          color: "rgba(255, 255, 255, 0.9)",
          offset: [-7, -15],
        },
      },
      data: seriesData[1].data,
    }
  );
  return data;
}

function getRenderItem(params, api) {

  const index = params.seriesIndex;
  let location = api.coord([api.value(0) + index, api.value(1)]);
  const shape = {
    api,
    xValue: api.value(0) + index,
    yValue: api.value(1),
    x: location[0],
    y: location[1],
    xAxisPoint: api.coord([api.value(0), 0]),
  };
  return {
    type: "group",
    children: [
      {
        position: seriesData[index].position,
        type: "CubeTop",
        shape: shape,
        style: {
          fill: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            topColors[index]
          ),
        },
      },
      {
        position: seriesData[index].position,
        type: "CubeLeft",
        shape: shape,
        style: {
          fill: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            leftColors[index]
          ),
        },
      },
      {
        position: seriesData[index].position,
        type: "CubeRight",
        shape: shape,
        style: api.style(),
      },
    ],
  };
}


const seriesData = [
  {
    label: "话务",
    position: [-20, 0],
    data: [386, 247, 298, 476],
  },
  {
    label: "工单",
    position: [-60, 0],
    data: [200, 374, 154, 200],
  },
];

let option = reactive({
  tooltip: {
    show: false,
  },
  xAxis: {
    data: ["投诉", "咨询", "建议", "保修"],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#0b3b67",
        width: 3,
      },
    },
    axisLabel: {
      show: true,
      color: "#fff",
    },
  },

  yAxis: {
    show: true,
    axisLabel: {
      show: false,
    },
    splitNumber: 7,
    splitLine: {
      show: true,
      lineStyle: {
        color: "#0b3b67",
      },
    },
  },
  series: getSeriesData(),
});

 

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

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

相关文章

OSCS 闭门研讨第一期实录：软件供应链安全建设价值

OSCS 闭门研讨第一期实录：软件供应链安全建设价值

2023 年 7 月 18 日晚 19:30，软件供应链安全技术交流群（OSCS）组织了第一次线上的闭门研讨会，本次研讨会我们收到 71 个来自各个企业关注软件供应链安全的技术专家的报名，根据研讨会参与规则要求，我们对报名…
阅读更多...
一文告诉你，Intellij IDEA神器隐藏的11种实用小技巧！

一文告诉你，Intellij IDEA神器隐藏的11种实用小技巧！

el/2022/10/4 6:58:50 点击上方“程序员大咖”，选择“置顶公众号” 关键时刻，第一时间送达！ Intellij IDEA真是越用越觉得它强大，它总是在我们写代码的时候，不时给我们来个小惊喜。出于对Intellij IDEA的喜爱&#x…
阅读更多...
【uniapp】uniapp打包H5（网页端）：

【uniapp】uniapp打包H5（网页端）：

文章目录 一、设置appid：二、设置router：三、打包：【1】[CLI 发行uni-app到H5：https://hx.dcloud.net.cn/cli/publish-h5](https://hx.dcloud.net.cn/cli/publish-h5)【2】HBuilderX 四、最终效果： 一、设置appid&…
阅读更多...
W5100S-EVB-PICO 做TCP Server进行回环测试（六）

W5100S-EVB-PICO 做TCP Server进行回环测试（六）

前言 上一章我们用W5100S-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试，那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么？什么是TCP Server？能干什么？ TCP (Transmission Control Protocol) 是一种面向连…
阅读更多...
芯片常见测试手段：CP测试和FT测试

芯片常见测试手段：CP测试和FT测试

参考链接： 芯片测试的术语解释（FT、CP），持续更新...._ft测试_染不尽的流年的博客-CSDN博客 如何区分芯片cp测试和ft测试 (baidu.com) 芯片常见测试手段：CP测试和FT测试 - 测量仪表 - 电子发烧友网 芯片测试是极其重要…
阅读更多...
2023年加湿器市场数据分析（天猫数据分析怎么做）

2023年加湿器市场数据分析（天猫数据分析怎么做）

随着人们生活水平提高、空调广泛使用，导致皮肤紧绷、口舌干燥、咳嗽感冒等空调病的滋生。可以看出，空气湿度与人体健康以及日常生活有着密切的联系。而加湿器作为室内空气湿度控制的重要工具，在近年来受到了越来越多的重视。根据鲸参谋电商数…
阅读更多...
pytest 常用命令参数

pytest 常用命令参数

-x 用例一旦失败或错误时就立即停止执行 共两条用例，运行第一条报错失败或报错，第二条就不会执行 pytest -vs -x test_pytest_study.py::TestCommon1 共2条用例，当执行到第一条失败时候，第二条不执行 --maxfailnum …
阅读更多...
快速入门:【c# 之 Winform开发】

快速入门:【c# 之 Winform开发】

C#基础 面向对象(OOP) c语言是面向过程。 c是面向过程面向对象。 c#是纯粹的面向对象: 核心思想是以人的思维习惯来分析和解决问题。万物皆对象。 面向对象开发步骤: 分析对象 特征行为关系(对象关系/类关系) 写代码: 特征–>成员变量 方法–>成员方法 实例化–具体对…
阅读更多...
26.配电网规划——考虑潮流约束的配电网规划

26.配电网规划——考虑潮流约束的配电网规划

MATLAB代码直达：26.多时段-考虑潮流约束的配电网规划 clc;clear;close all; %% 导入数据 load(data.mat); MGpowerxlsread(MG1-3.xlsx); % 微电网的日负荷曲线 nt3 ; % 变压所个数 Sn25; % 变电所容量 MVA G…
阅读更多...
第二、三章 线性表、栈、队列和数组

第二、三章 线性表、栈、队列和数组

一、数据结构定义 线性表 顺序存储（顺序表就是将线性表中的元素按照某种逻辑顺序，依次存储到从指定位置开始的一块连续的存储空间，重点是连续的存储空间。与数组非常接近） 静态分配（数组的大小和空间固定&#xff0c…
阅读更多...
【IDEA问题】下载不了源代码

【IDEA问题】下载不了源代码

引出问题 最近不知道怎么打开 IDEA，本想查看源代码，然后点击下载源码，总是报找不到此对象的源代码。百度找了半天，GPT问了半天还是解决不了，直到遇到了这篇：idea中无法下载源码问题解决，终于得…
阅读更多...
wms仓储管理系统是什么，wms仓储管理系统有什么用

wms仓储管理系统是什么，wms仓储管理系统有什么用

阅读本文，您可以了解：1、wms仓储管理系统是什么；2、wms仓储管理系统有什么用 一、wms仓储管理系统是什么 WMS是Warehouse Management System（仓储管理系统）的缩写。它是一种用于优化和管理仓库操作的软件系统。WMS帮…
阅读更多...
液压机行业分析报告：市场规模调查及行业发展趋势

液压机行业分析报告：市场规模调查及行业发展趋势

液压机是一种以液体为工作介质，根据帕斯卡原理制成的用于传递能量以实现各种工艺的机器。液压机一般由本机（主机）、动力系统及液压控制系统三部分组成。 液压机应用领域 【汽车】液压机被汽车和卡车零件制造商用于原始设备和售后市场产品。…
阅读更多...
小白到运维工程师自学之路 第七十二集 （半自动yum安装k8s集群）

小白到运维工程师自学之路 第七十二集 （半自动yum安装k8s集群）

一、准备环境 修改主机名 hostnamectl set-hostname k8s-master hostnamectl set-hostname k8s-node1 hostnamectl set-hostname k8s-node2 bashvim /etc/hosts 192.168.77.14 k8s-master 192.168.77.15 k8s-node1 192.168.77.16 k8s-node2 下载阿里源 wget -O /etc/yum…
阅读更多...
Typora缩小行间距

Typora缩小行间距

Typora确实是个好工具，但行间距太宽，写东西写起来太难受，作为已经深度使用两天的大神(小白)终于找到了正确的打开方式，以下： Ⅰ.ShiftEnter # 不太推荐，不符合日常习惯，效果约等于单回车 Ⅱ.直…
阅读更多...
QProgressDialog进度条类

QProgressDialog进度条类

QProgressDialog 常用API简单的使用 QProgressDialog类是QDialog的子类, 通过这个类我们可以得到一个带进度条的对话框窗口 常用API // 构造函数 /* 参数:- labelText: 对话框中显示的提示信息- cancelButtonText: 取消按钮上显示的文本信息- minimum: 进度条最小值- maximum…
阅读更多...
Mysql整理

Mysql整理

一、基础概念 1. 索引 之前的文章已经写过了，比较细 数据库索引含义,类别,用法,创建方式_表结构加树形id和索引是为什么_马丁•路德•王的博客-CSDN博客 简单概括就是在表的某个列或者多个列或者联合表的时候加个索引，类似图书馆书本的索引编号&…
阅读更多...
lwip使用收发线程和不使用收发线程差异

lwip使用收发线程和不使用收发线程差异

使用收发线程的方式相对于不使用收发线程的方式，效率可能会稍低一些，这取决于具体的应用场景和实现方式。 lwIP（轻量级IP协议栈）是一个针对嵌入式系统的开源TCP/IP协议栈。它可以在单个线程中运行，也可以在多个线程中…
阅读更多...
强大的AI语言模型

强大的AI语言模型

1.kameAI 点我 1️⃣可以绘图 2️⃣对接4.0 3️⃣具有长篇写作
阅读更多...
UG NX二次开发（C#）-CAM自定义铣加工的出口环境

UG NX二次开发（C#）-CAM自定义铣加工的出口环境

文章目录 1、前言2、自定义铣削加工操作3、出错原因4、解决方案4.1 MILL_USER的用户参数4.2 采用自定义铣削的方式生成自定义的dll4.2 配置加工的出口环境4.3 调用dll5、结论1、前言 作为一款大型的CAD/CAM软件， UG NX为我们提供了丰富的加工模板，通过加工模板能直接用于生成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023