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

立体柱状图分为：

  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.mfbz.cn/a/587572.html

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

相关文章

Window（Qt/Vs）软件添加版本信息

Window（Qt/Vs）软件添加版本信息

Window&#xff08;Qt/Vs&#xff09;软件添加版本信息 文章目录 Window&#xff08;Qt/Vs&#xff09;软件添加版本信息VS添加版本信息添加资源文件添加版本定义头自动更新版本添加批处理脚本设置生成事件 Qt添加版本信息添加资源文件文件信息修改自动更新版本 CMake添加版本信…
阅读更多...
rust疑难杂症

rust疑难杂症

rust疑难杂症解决 边碰到边记录&#xff0c;后续可能会逐步增加&#xff0c;备查 cargo build时碰到 Blocking waiting for file lock on package cache 原因是Cargo 无法获取对包缓存的文件锁&#xff0c; 有时vscode中项目比较多&#xff0c;如果其中某些库应用有问题&…
阅读更多...
环形链表的经典问题

环形链表的经典问题

环形链表 环形链表的介绍链表中是否带环返回链表开始入环的第一个节点 本文主要介绍如何判断一个链表是否是环形链表&#xff0c;以及如何得到环形链表中的第一个节点。 环形链表的介绍 环形链表是一种链表数据结构&#xff0c;环形链表是某个节点的next指针指向前面的节点或指…
阅读更多...
【linux学习指南】linux 环境搭建

【linux学习指南】linux 环境搭建

文章目录 &#x1f4dd;前言&#x1f320; 云服务器的选择&#x1f320;阿里云&#x1f320;腾讯云&#x1f320;华为云 &#x1f320;使用 XShell 远程登陆到 Linux&#x1f309;下载 XShell &#x1f320;查看 Linux 主机 ip&#x1f309; XShell 下的复制粘贴&#x1f309; …
阅读更多...
大数据信用花了，一般多久能正常？

大数据信用花了，一般多久能正常？

在当今数字化时代&#xff0c;大数据技术被广泛应用于各个领域&#xff0c;包括金融、电商、社交等。然而&#xff0c;随着大数据技术的普及&#xff0c;个人信用问题也日益凸显&#xff0c;其中“大数据信用花”现象尤为引人关注。那么&#xff0c;大数据信用花究竟是什么?一…
阅读更多...
【linuxC语言】exec函数族

【linuxC语言】exec函数族

文章目录 前言一、exec函数族二、示例代码2.1 代码12.2 代码22.3 代码3 总结 前言 在Linux环境下&#xff0c;C语言提供了一组强大的函数族&#xff0c;即exec函数族&#xff0c;用于执行其他程序。这些函数允许程序在运行时加载并执行不同的程序&#xff0c;从而实现了程序之…
阅读更多...
Android（Java）项目支持Kotlin语言开发

Android（Java）项目支持Kotlin语言开发

Android&#xff08;Java&#xff09;项目通过相关Kotlin设置后&#xff0c;允许同时使用Java语言和Kotlin语言进行开发代码的。 示例环境&#xff1a; Android Studio Giraffe | 2022.3.1 Patch 3 Java 8 Kotlin 1.9.20 设置Kotlin选项&#xff1a; 第一步&#xff1a;在项…
阅读更多...
AI大模型探索之路-训练篇9：大语言模型Transformer库-Pipeline组件实践

AI大模型探索之路-训练篇9：大语言模型Transformer库-Pipeline组件实践

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…
阅读更多...
Sentinel 控制台学习

Sentinel 控制台学习

引言 上篇文章已经讲过 SpringCloud Sentinel集成到微服务项目中&#xff0c;接下来我们继续学习怎么使用sentinel控制台对微服务进行限流&#xff0c;熔断&#xff0c;降级等一系列操作。 控制台 接下来我们单独讲解每一个菜单按钮 实时监控 实时监控&#xff1a; 可以看到…
阅读更多...
必应广告投放怎么做？怎么开户推广？

必应广告投放怎么做？怎么开户推广？

今天搜索引擎广告依旧是企业提升品牌知名度、吸引潜在客户的关键渠道之一&#xff0c;必应Bing&#xff0c;作为全球第二大搜索引擎&#xff0c;不仅拥有庞大的用户基础&#xff0c;更以其精准的定向能力和高效的转化效率&#xff0c;成为众多企业拓展市场的优选平台。 一、必…
阅读更多...
【Java探索之旅】包管理精粹 Java中包的概念与实践

【Java探索之旅】包管理精粹 Java中包的概念与实践

文章目录 &#x1f4d1;前言一、封装1.1 封装的概念1.2 访问限定修饰符 二、封装扩展&#xff08;包&#xff09;2.1 包的概念2.2 带入包中的类2.3 自定义包2.4 常见的包 &#x1f324;️全篇总结 &#x1f4d1;前言 在Java编程中&#xff0c;封装是面向对象编程的核心概念之一…
阅读更多...
PotatoPie 4.0 实验教程(32) —— FPGA实现摄像头图像浮雕效果

PotatoPie 4.0 实验教程(32) —— FPGA实现摄像头图像浮雕效果

什么是浮雕效果&#xff1f; 浮雕效果是一种图像处理技术&#xff0c;用于将图像转换为看起来像浮雕一样的效果&#xff0c;给人一种凸起或凹陷的立体感觉&#xff0c;下面第二张图就是图像处理实现浮雕效果。 不过这个图是用Adobe公司的PS人工P图实现的&#xff0c;效果比较…
阅读更多...
【R语言数据分析】数据类型与数据结构

【R语言数据分析】数据类型与数据结构

R的数据类型有数值型num&#xff0c;字符型chr&#xff0c;逻辑型logi等等。 R最常处理的数据结构是&#xff1a;向量&#xff0c;数据框&#xff0c;矩阵&#xff0c;列表。 向量有数值型向量&#xff0c;字符型向量&#xff0c;逻辑型向量等&#xff0c;字符型向量就是反应…
阅读更多...
二维码门楼牌管理应用平台建设：实现用户权限的高效管理

二维码门楼牌管理应用平台建设：实现用户权限的高效管理

文章目录 前言一、用户权限管理的重要性二、用户管理中心的构建三、用户权限管理的实施策略四、用户权限管理的挑战与应对五、结语 前言 随着信息技术的飞速发展&#xff0c;二维码门楼牌管理应用平台已成为城市管理的重要组成部分。本文将深入探讨如何通过用户权限管理&#…
阅读更多...
基于SpringBoot+Vue外卖系统设计和实现(源码+LW+部署讲解)

基于SpringBoot+Vue外卖系统设计和实现(源码+LW+部署讲解)

&#x1f339;作者简介&#xff1a;✌全网粉丝10W&#xff0c;csdn特邀作者、博客专家、Java领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战&#xff0c;高校老师/讲师/同行前辈交流✌ &#x1f339; 主要…
阅读更多...
STM32（c语言基础）

STM32（c语言基础）

1.硬件部分&#xff1a;按键&#xff0c;传感器 传感器模块&#xff1a;光敏电阻&#xff0c;热敏电阻&#xff0c;红外接收管 光敏电阻&#xff1a;光线越强&#xff0c;光敏电阻的阻值就越小&#xff1b; 热敏电阻&#xff1a;温度越高&#xff0c;热敏电阻的阻值越小&…
阅读更多...
Vitis HLS 学习笔记--AXI4 主接口

Vitis HLS 学习笔记--AXI4 主接口

目录 1. 简介 2. 认识MAXI 3. MAXI突发操作 3.1 全局/本地存储器 3.2 MAXI优势与特点 3.3 查看MAXI报告 3.3.1 HW Interfaces 3.3.2 M_AXI Burst Information 3.4 MAXI 资源消耗 4. 理解 Volatile 4.1 标准C/C中的 volatile 4.2 HLS 中的 volatile 5. 总结 1. 简介…
阅读更多...
Blog图床

Blog图床

img avatar Audrey.webp icon.png personal.webp
阅读更多...
labview强制转换的一个坑

labview强制转换的一个坑

32位整形强制转换成枚举的结果如何&#xff1f; 你以为的结果是 实际上的结果是 仔细看&#xff0c;枚举的数据类型是U16&#xff0c;"1"的数据类型是U32&#xff0c;所以转换产生了不可预期的结果。所以使用强制转换时一定要保证两个数据类型一致&#xff0c;否则…
阅读更多...
深入理解多层感知机MLP

深入理解多层感知机MLP

1. 基础理论 神经网络基础&#xff1a; 目标&#xff1a;了解神经网络的结构&#xff0c;包括神经元、权重、偏置和激活函数。 神经网络是由多个层次的神经元组成的网络&#xff0c;它模拟了人脑处理信息的方式。每个神经元可以接收输入、处理输入并生成输出。这一过程涉及到…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站