【大前端】ECharts 绘制立体柱状图

news2024/12/23 5:19:13

立体柱状图分为：

  1. 纯色立体柱状图
  2. 渐变立体柱状图

常用实现方式

纯色立体柱状图

纯色立体柱状图，使用MarkPoint和颜色渐变就实现，如下代码

在这里插入图片描述

import * as echarts from "echarts";

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;

const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];

const markPointData = [];

const barWidth = 30;

const linearColor = {
  type: 'linear',
  x: 0,
  y: 0,
  x1: 0,
  y1: 1,
  colorStops: [
    {
      offset: 0,
      color: '#28A9A2' // 0% 处的颜色
    },
    {
      offset: 0.5,
      color: '#28A9A2' // 0% 处的颜色
    },
    {
      offset: 0.5,
      color: '#35FFF4' // 0% 处的颜色
    },
    {
      offset: 1,
      color: '#35FFF4' // 100% 处的颜色
    }
  ],
  global: false // 缺省为 false
};

yAxisData.forEach((v, i) => {
  //添加顶部渐变
  markPointData.push({
    xAxis: xAxisData[i],
    yAxis: v,
    symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标
    symbolSize: [barWidth, barWidth * 0.5],
    itemStyle: {
      color: 'rgba(126, 255, 248,1)'
    }
  });
  // //添加底部渐变
  markPointData.push({
    xAxis: xAxisData[i],
    y: 698,// 到左上角Y轴距离
    symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z', //菱形图标
    symbolSize: [barWidth, barWidth * 0.5],
    symbolOffset: ['0%', '100%'],
    itemStyle: {
      color: linearColor
    }
  });
});

option = {
  title: {
    text: '立体柱状图示例'
  },
  tooltip: {},
  xAxis: {
    data: xAxisData
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: yAxisData,
      barWidth: barWidth,
      markPoint: {
        data: markPointData,
        silent: true
      },
      itemStyle: {
        borderRadius: [0, 0, 30, 30],
        color: linearColor
      }
    }
  ]
};

option && myChart.setOption(option);

SVG

SVG适用于纯色立体柱状图和渐变立体柱状图

ECharts不能直接使用SVG字符串，须要转化为Base64格式的数据（可以使用网络SVG图片地址）

在这里插入图片描述

import * as echarts from "echarts";

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, "dark");
var option;

const xAxisData = ["A", "B", "C", "D", "E"];
const yAxisData = [10, 20, 30, 50, 60];

const markPointData = [];

const barWidth = 30;

const svgStr =
    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="105" viewBox="0 0 14 105"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_1_6290"><stop offset="0%" stop-color="#28A9A2" stop-opacity="1"/><stop offset="100%" stop-color="#28A9A2" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_1_6296"><stop offset="0%" stop-color="#35FFF4" stop-opacity="1"/><stop offset="100%" stop-color="#35FFF4" stop-opacity="0"/></linearGradient></defs><g><g><rect x="0" y="0" width="7" height="105" rx="0" fill="url(#master_svg0_1_6290)" fill-opacity="1"/></g><g><rect x="7" y="0" width="7" height="105" rx="0" fill="url(#master_svg1_1_6296)" fill-opacity="1"/></g></g></svg>';
// 转换为Base64格式
const svgDataURL = "data:image/svg+xml;base64," + btoa(svgStr);

yAxisData.forEach((v, i) => {

    //添加顶部渐变
    markPointData.push({
        xAxis: xAxisData[i],
        yAxis: v,
        symbol: "path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z", //菱形图标
        symbolSize: [barWidth, barWidth * 0.5],
        itemStyle: {
            color: "rgba(126, 255, 248,1)"
        }
    });
});

option = {
    title: {
        text: "立体柱状图示例"
    },
    tooltip: {},
    xAxis: {
        data: xAxisData
    },
    yAxis: {},
    series: [
        {
            name: "销量",
            type: "pictorialBar",
            data: yAxisData,
            barWidth: barWidth,
            markPoint: {
                data: markPointData,
                silent: true
            },
            symbol:`image://${svgDataURL}`,
        }
    ]
};

option && myChart.setOption(option);

2. MarkPoint

MarkPoint 适用于多组图标组合展示

它和SVG不同的是绘制方式不一样，SVG是互联网通用绘制方式，MarkPoint是ECharts特有的绘制方式

在这里插入图片描述

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

const xAxisData = ['A', 'B', 'C', 'D', 'E'];
const yAxisData = [10, 20, 30, 50, 60];

const markPointData = [];

const barWidth = 30;

// 计算柱状图高度
function computedBarHeight(value, params) {
  // 左上角 到 Y轴 0 刻度的高度，如果x轴是数值轴，则例使用xAxisIndex标记
  const zeroHeight = myChart.convertToPixel({ yAxisIndex: 0 }, 0);
  // 左上角到Y轴目标数值的高度，如果x轴是数值轴，则例使用xAxisIndex标记
  const height = myChart.convertToPixel({ yAxisIndex: 0 }, params.data.yAxis);
  // 返回柱状图大小，高度等于0刻度距离-目标数值距离的差值
  return [barWidth / 2, zeroHeight - height];
}

yAxisData.forEach((v, i) => {
  //添加左侧渐变
  markPointData.push({
    xAxis: xAxisData[i],
    yAxis: v,
    symbol: 'rect',
    symbolSize: computedBarHeight,
    symbolOffset: ['-50%', '50%'],
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(40, 169, 162,1)'
          },
          {
            offset: 1,
            color: 'rgba(40, 169, 162,0)'
          }
        ],
        global: false
      }
    }
  });

  //添加右侧渐变
  markPointData.push({
    xAxis: xAxisData[i],
    yAxis: v,
    symbol: 'rect',
    symbolSize: computedBarHeight,
    symbolOffset: ['50%', '50%'],
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(53, 255, 244,1)'
          },
          {
            offset: 1,
            color: 'rgba(53, 255, 244,0)'
          }
        ],
        global: false
      }
    }
  });

  //添加顶部渐变
  markPointData.push({
    xAxis: xAxisData[i],
    yAxis: v,
    symbol: 'path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z',//菱形图标
    symbolSize: [barWidth, barWidth * 0.5],
    itemStyle: {
      color: 'rgba(126, 255, 248,1)'
    }
  });
});

option = {
  title: {
    text: '立体柱状图示例'
  },
  tooltip: {},
  xAxis: {
    data: xAxisData
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: yAxisData,
      barWidth: barWidth,
      markPoint: {
        data: markPointData,
        silent: true
      },
      z: 3,
      itemStyle: {
        color: 'rgba(255, 53, 64,0)'
      }
    }
  ]
};

option && myChart.setOption(option);

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

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

相关文章

基于Spring Ai 快速创建一个AI会话

基于Spring Ai 快速创建一个AI会话

文章目录 1、创建SpringBoot项目2、引入依赖3、修改配置文件4、一个简单的会话 前期准备 在OpenAI 注册页面创建帐户并在API 密钥页面生成令牌。 Spring AI 项目定义了一个配置属性&#xff0c;您应该将其设置为从 openai.com 获取的spring.ai.openai.api-key值 代码托管于gite…
阅读更多...
终端安全管理措施有哪些？好用终端安全管理软件推荐（建议收藏）

终端安全管理措施有哪些？好用终端安全管理软件推荐（建议收藏）

在当今数字化时代&#xff0c;信息安全已成为企业运营不可或缺的一部分。其中&#xff0c;终端安全为您详细介绍&#xff0c;并推荐几款好用的终端安全管理软件&#xff0c;帮助您更好地保护企业信息安全。管理是确保企业信息安全的重要环节。那么&#xff0c;终端安全管理措施…
阅读更多...
厂房环保水空调有多节能环保呢？

厂房环保水空调有多节能环保呢？

环保水空调确实具有显著的节能环保特点。其节能环保的优点主要体现在以下几个方面&#xff1a; 高效节能&#xff1a;环保水空调利用水的热传导和相变特性&#xff0c;通过水泵将冷热水循环运行&#xff0c;实现室内温度的控制。由于水具有较大的热容量&#xff0c;能够高效地…
阅读更多...
【经验01】spark执行离线任务的一些坑

【经验01】spark执行离线任务的一些坑

项目背景： 目前使用spark跑大体量的数据，效率还是挺高的，机器多，120多台的hadoop集群，还是相当的给力的。数据大概有10T的量。 最近在出月报数据的时候发现有一个任务节点一直跑不过去，已经超过失败次数的阈值，报警了。 预警很让人头疼，不能上班摸鱼了。 经过分析发现…
阅读更多...
Java OOM问题排查

Java OOM问题排查

1.问题现象 tomcat web页面无法访问&#xff0c;日志报出如下错误&#xff0c; 问题出现频率 1晚上1次。 有时候会打印出oom的代码位置&#xff0c;有时候不会打印&#xff0c;不会打印则按照如下流程排查 2.问题排查过程 排查OOM主要是要获取内存的快照文件&#xff0c;但…
阅读更多...
【CTF Web】攻防世界 GFSJ0478 cookie Writeup（HTTP协议+信息收集+Cookie）

【CTF Web】攻防世界 GFSJ0478 cookie Writeup（HTTP协议+信息收集+Cookie）

cookie X老师告诉小宁他在cookie里放了些东西&#xff0c;小宁疑惑地想&#xff1a;‘这是夹心饼干的意思吗&#xff1f;’ 解法 按 F12&#xff0c;点击网络。 刷新页面。查看请求头中的 Cookie。 look-herecookie.php访问&#xff1a; http://61.147.171.105:53668/cookie.…
阅读更多...
SpringBoot过滤器简单构建详细教程以及与拦截器区别解释

SpringBoot过滤器简单构建详细教程以及与拦截器区别解释

作用范围&#xff1a;过滤器基于Servlet规范&#xff0c;作用于更广泛的层面&#xff0c;不仅限于Spring MVC&#xff0c;它可以拦截进入Web应用的所有请求&#xff0c;包括静态资源请求。过滤器可以对请求和响应的内容进行预处理和后处理。实现方式&#xff1a;过滤器需要实现…
阅读更多...
森林消防—高扬程水泵，高效、稳定、可靠！/恒峰智慧科技

森林消防—高扬程水泵，高效、稳定、可靠！/恒峰智慧科技

森林&#xff0c;作为地球的“绿色肺叶”&#xff0c;不仅为我们提供了丰富的自然资源&#xff0c;更是维持生态平衡的重要一环。然而&#xff0c;随着全球气候的变化和人为活动的增加&#xff0c;森林火灾频发&#xff0c;给生态环境和人民生命财产安全带来了巨大威胁。在森林…
阅读更多...
【C++历练之路】红黑树——map与set的封装实现

【C++历练之路】红黑树——map与set的封装实现

W...Y的个人主页&#x1f495; gitee代码仓库分享&#x1f60a; 前言&#xff1a;上篇博客中&#xff0c;我们为了使二叉搜索树不会出现”一边倒“的情况&#xff0c;使用了AVL树对搜索树进行了处理&#xff0c;从而解决了数据在有序或者接近有序时出现的情况。但是AVL树还会…
阅读更多...
Apple 添加了 13 英寸 iPad Air

Apple 添加了 13 英寸 iPad Air

劈啪&#xff01;苹果推出的新款 iPad Air&#xff0c;将所有梦想变为现实&#xff01;它配备了强大的后置 12MP 摄像头和前置 12MP 摄像头&#xff0c;令您的拍摄体验更加出色。苹果还加入了 Apple Pencil 悬停功能&#xff0c;让您的创作更加灵活。 这款 iPad Air 不仅速度加…
阅读更多...
武汉凯迪正大—电能质量测试仪功能特点

武汉凯迪正大—电能质量测试仪功能特点

武汉凯迪正大电能质量测试仪功能特点 1. 仪器是专门用于检测电网中发生波形畸变、谐波含量、三相不平衡等电能质量问题的高精度测试仪器&#xff1b;同时还具备电参量测试、矢量分析的功能。 2. 可精确测量电压、电流、有功功率、无功功率、相角、功率因数、频率等多种电参量…
阅读更多...
PowerBI实用技巧——案例十一 (根据所选日期动态滚动显示日期)

PowerBI实用技巧——案例十一 (根据所选日期动态滚动显示日期)

分享一波常用的日期动态滚动显示的小技巧,类似的方法还有很多&#xff0c;这里举3个小案例参考。 一、根据所选日期滚动显示近12月的数据&#xff08;日期为年月格式&#xff09; 效果图&#xff1a; 实现逻辑&#xff1a; rolloing_month //所选日期为年月格式,根据所选日…
阅读更多...
为什么跑腿越来越受到年轻人的青睐

为什么跑腿越来越受到年轻人的青睐

跑腿服务越来越受到年轻人的青睐&#xff0c;主要源于以下几个方面的原因&#xff1a; 1. 便捷快速&#xff1a;在快节奏的现代生活中&#xff0c;年轻人追求的是效率和速度。跑腿服务提供了一种即时、便捷的解决方案&#xff0c;使他们能够在繁忙的生活和工作中节省时间和精力…
阅读更多...
AI中转计费平台系统源码

AI中转计费平台系统源码

AI中转计费平台系统源码 源码免费下载地址抄笔记 (chaobiji.cn)
阅读更多...
如何正确理解RestTemplate远程调用的实现原理？

如何正确理解RestTemplate远程调用的实现原理？

本文从源码出发理解RestTemplate实现远程调用的底层原理。 初始化RestTemplate实例 我们可以通过RestTemplate所提供的几个构造函数来对其进行初始化。在分析这些构造函数之前&#xff0c;有必要先看一下RestTemplate类的定义&#xff0c;如下所示&#xff1a; public class …
阅读更多...
OC5864 0.6A输出 60V输入 500KHZ DCDC降压转换IC

OC5864 0.6A输出 60V输入 500KHZ DCDC降压转换IC

一级代理 技术支持 提供样品测试 Tel&#xff1a;18028786817 简介 OC5864是一款内置功率MOSFET的单片降压型开关模式转换器。OC5864在5.5~60V宽输入电源范围内实现0.6A峰值输出电流&#xff0c;并且具有出色的线电压和负载调整率。 OC5864采用PWM电流模工作模式&#xff0c;…
阅读更多...
技术分享 | i.MX8M Mini适配MIPI转eDP芯片

技术分享 | i.MX8M Mini适配MIPI转eDP芯片

1.方案概述 此方案使用HD-8MMN-CORE的核心板搭配TI公司的芯片SN65DSI86转换芯片实现。 SN65DSI86作为一款MIPI DSI转eDP的芯片&#xff0c;支持双通道DSI输入&#xff0c;最大四通道显示输出&#xff0c;最大支持4K60fps输出&#xff0c;WUXGA 1080P。本方案中将采用单通道DS…
阅读更多...
Vue从入门到实战Day01

Vue从入门到实战Day01

一、Vue快速上手 1. vue概念 概念&#xff1a;Vue是一个用于 构建用户界面的 渐进式 框架 构建用户界面&#xff1a;基于数据动态渲染页面渐进式&#xff1a;循序渐进的学习框架&#xff1a;一套完整的项目解决方案&#xff0c;提升开发效率 优点&#xff1a;大大提升开发效…
阅读更多...
[SWPUCTF 2021 新生赛]PseudoProtocols、[SWPUCTF 2022 新生赛]ez_ez_php

[SWPUCTF 2021 新生赛]PseudoProtocols、[SWPUCTF 2022 新生赛]ez_ez_php

[SWPUCTF 2021 新生赛]PseudoProtocols 打开环境&#xff0c;提示hint.php就在这里&#xff0c;且含有参数wllm 尝试利用PHP伪协议读取该文件 ?wllmphp://filter/convert.base64-encode/resourcehint.php//文件路径php://filter 读取源代码并进行base64编码输出。 有一些敏…
阅读更多...
哪款充电宝质量和口碑比较好？适合入手充电宝有哪些？

哪款充电宝质量和口碑比较好？适合入手充电宝有哪些？

充电宝这么好用的移动电源就不用我说了吧&#xff0c;平时不出门还好&#xff0c;家里有插座可以充电&#xff0c;但是但凡出门了&#xff0c;手机电量一般是不能够支撑到&#xff0c;像我这种手机重度使用者&#xff0c;出门在外手机快没电了我就非常焦虑了&#xff0c;有一款…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023