03-echarts如何画立体柱状图

news2025/11/1 1:29:07

echarts如何画立体柱状图

  • 一、创建盒子
    • 1、创建盒子
    • 2、初始化盒子（先绘制一个基本的二维柱状图的样式）
      • 1、创建一个初始化图表的方法
      • 2、在mounted中调用这个方法
      • 3、在方法中写options和绘制图形
  • 二、画图前知识
    • 1、坐标
    • 2、柱状图图解分析
  • 三、构建方法
    • 1、创建一个用来绘制形状的方法，drawShape
    • 2、完善drawShape方法
      • 1、完善 leftShape 形状逻辑：
      • 2、完善 rightShape 形状逻辑
      • 3、完善 topShape 形状逻辑
    • 3、修改initChart方法
      • 1、修改series
  • 四、效果图

一、创建盒子

1、创建盒子

这是图形盒子和样式。

<template>
  <div class="MonitoringSensor">
    <div id="main"></div>
  </div>
</template>


<style scoped>
.MonitoringSensor {
  width: 500px;
  height: 500px;

  margin: 0 auto;
  background: rgb(24, 80, 169)
}

#main {

  height: 100%;
  width: 100%;
}
</style>

这一步做完页面中间会有一个蓝色的盒子，如下
在这里插入图片描述

2、初始化盒子（先绘制一个基本的二维柱状图的样式）

1、创建一个初始化图表的方法

  methods：{
     initChart () {}
   }

2、在mounted中调用这个方法

  mounted () {
    this.initChart()
  },

3、在方法中写options和绘制图形

注意：记得导入echarts，否则无法构建图表。

import * as echarts from 'echarts'

data () {
    return {
      chart: null
    }
  },

initChart () {
      this.chart = echarts.init(document.getElementById('main'));
      let options = null;
      options = {
        xAxis: {
          type: "category",
          data: ["苹果", "梨子", "香蕉"],
          axisLabel: {
            color: "#fff",
          },
        },

        yAxis: {
          type: "value",
          max: 200,
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "#222",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            type: "bar",
            data: [100, 50, 20],
            barWidth: 30,
          },
        ],
      };
      options && this.chart.setOption(options);
    },

到这个时候，能看到页面有一个基本的柱状图的样子了，如下图：
在这里插入图片描述

二、画图前知识

1、坐标

echarts中的坐标是跟着图例盒子大小来的，比如我这个main盒子是设置了500*500大小
在这里插入图片描述
那么坐标是怎么看的，那么左上角的话就是（0，0），右上角就是（500，0），左下角就是（0，500），右下角就是（500，500），相当于右边是X轴正轴，往下看是Y轴正轴
在这里插入图片描述

2、柱状图图解分析

图1：
在这里插入图片描述

图2：
在这里插入图片描述

根据图1和坐标知识可知：
在这里插入图片描述

左侧面的坐标信息为：
P1:【基础X轴坐标点-侧面宽度，顶部Y轴坐标点-斜角高度】
P2：【基础X轴坐标点-侧面宽度，底部Y轴坐标点】
P3：【基础X轴坐标点，底部Y轴坐标点】
P4：【基础X轴坐标点，顶部Y轴坐标点】

根据图2和坐标知识可得：
在这里插入图片描述
右侧面的坐标信息为
P1:【基础X轴坐标点，顶部Y轴坐标点】
P2：【基础X轴坐标点，底部Y轴坐标点】
P3：【基础X轴坐标点 +侧面宽度 ，底部Y轴坐标点】
P4：【基础X轴坐标点 +侧面宽度，顶部Y轴坐标点 - 斜角高度】

根据图2和坐标知识可得：
在这里插入图片描述

顶面的坐标信息为
P1:【基础X轴坐标点，顶部Y轴坐标点】
P2：【基础X轴坐标点+侧面宽度，顶部Y轴坐标点- 斜角高度】
P3：【基础X轴坐标点 ，顶部Y轴坐标点- 斜角高度*2】
P4：【基础X轴坐标点 -侧面宽度，顶部Y轴坐标点 - 斜角高度】

三、构建方法

1、创建一个用来绘制形状的方法，drawShape

这个方法里面先创建三个形状的空壳子，并注册，如下图，并且注册完成以后在这个方法里面调用构建图表的方法initChart，在初始化页面的时候就不用调用initChart方法了

 mounted () {
    this.drawShape()
  },

 drawShape () {
      const leftShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) { },
      });

      const rightShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) { },
      });

      const topShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) { },
      });

      echarts.graphic.registerShape("leftShape", leftShape);
      echarts.graphic.registerShape("rightShape", rightShape);
      echarts.graphic.registerShape("topShape", topShape);
      this.initChart()
    },

到这一步会报错，因为方法中的ctx和shape没引用，是正常现象，到后面这两个参数使用了以后就不报错了。报错如下图所示，暂时可以不用管
在这里插入图片描述

2、完善drawShape方法

1、完善 leftShape 形状逻辑：

 const leftShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 15;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 3.6;

          const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
          const p2 = [basicsXAxis - WIDTH, bottomYAxis];
          const p3 = [basicsXAxis, bottomYAxis];
          const p4 = [basicsXAxis, topBasicsYAxis];

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

      });

2、完善 rightShape 形状逻辑

const rightShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 15;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 3.6;

          const p1 = [basicsXAxis, topBasicsYAxis];
          const p2 = [basicsXAxis, bottomYAxis];
          const p3 = [basicsXAxis + WIDTH, bottomYAxis];
          const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

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

3、完善 topShape 形状逻辑

  const topShape = echarts.graphic.extendShape({
        buildPath (ctx, shape) {
          const { topBasicsYAxis, basicsXAxis } = shape;
          // 侧面宽度
          const WIDTH = 15;
          // 斜角高度
          const OBLIQUE_ANGLE_HEIGHT = 3.6;

          const p1 = [basicsXAxis, topBasicsYAxis];
          const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
          const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
          const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

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

3、修改initChart方法

1、修改series

1、这个时候的series的type就不能是‘bar’了，因为是自定义形状，所以需要将type设置为custom，并且需要设置一个renderItem函数，用来设置数据

 series: [
          {
            type: "custom",
            data: [100, 50, 20],
            barWidth: 30,
            renderItem () { }
          },
        ],

2、设置renderItem函数
根据官网提示，需要返回一个type为group的对象，并且将三个面都加到children里面，如下图，
type：是drawShape方法中定义的每个面的名字，
shape里面就是drawShape方法中定义的每个面的名字，每个面都需要加进去，
style中是柱子的颜色，我是用了渐变色，可以更换为自己喜欢的颜色

 series: [
          {
            type: "custom",
            data: [100, 50, 20],
            barWidth: 30,
            renderItem (params, api) {
              // 基础坐标
              const basicsCoord = api.coord([api.value(0), api.value(1)]);
              // 顶部基础 y 轴
              const topBasicsYAxis = basicsCoord[1];
              // 基础 x 轴
              const basicsXAxis = basicsCoord[0];
              // 底部 y 轴
              const bottomYAxis = api.coord([api.value(0), 0])[1];
              return {
                type: "group",
                children: [
                  {
                    type: "leftShape",
                    shape: {
                      topBasicsYAxis,
                      basicsXAxis,
                      bottomYAxis,
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgb(0, 192, 238,0.8)',
                        },

                        {
                          offset: 0.8,
                          color: 'rgb(0, 194, 239,0.2)',
                        },
                        {
                          offset: 1,
                          color: 'rgb(0, 194, 239,0)',
                        },
                      ]),
                      emphasis: {
                        fill: 'yellow', // 鼠标高亮时的填充颜色
                      },
                    },
                  },
                  {
                    type: "rightShape",
                    shape: {
                      topBasicsYAxis,
                      basicsXAxis,
                      bottomYAxis,
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#00CCF5 ',
                        },

                        {
                          offset: 0.8,
                          color: 'rgb(4, 88, 115,0.8)',
                        },
                        {
                          offset: 1,
                          color: 'rgb(4, 88, 115,0.6)',
                        },
                      ]),
                    },
                  },
                  {
                    type: "topShape",
                    shape: {
                      topBasicsYAxis,
                      basicsXAxis,
                      bottomYAxis,
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0.3,
                          color: '#6DF0FF',
                        },
                        {
                          offset: 1,
                          color: '#6DF0FF',
                        },
                      ]),
                    },
                  },
                ],
              };
            }
          },
        ],

到这一步，就应该能看到立体柱状图了，如标题四效果图所示

四、效果图

效果如下所示
在这里插入图片描述

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

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

相关文章

第七周学习笔记DAY.1-封装

第七周学习笔记DAY.1-封装

学完本次课程后&#xff0c;你能够&#xff1a; 理解封装的作用 会使用封装 会使用Java中的包组织类 掌握访问修饰符&#xff0c;理解访问权限 没有封装的话属性访问随意&#xff0c;赋值也可能不合理&#xff0c;为了解决这些代码设计缺陷&#xff0c;可以使用封装。 面向…
阅读更多...
RabbitMQ入门实战

RabbitMQ入门实战

文章目录 RabbitMQ入门实战基本概念安装快速入门单向发送多消费者 RabbitMQ入门实战 官方&#xff1a;https://www.rabbitmq.com 基本概念 AMQP协议&#xff1a;https://www.rabbitmq.com/tutorials/amqp-concepts.html 定义&#xff1a;高级信息队列协议&#xff08;Advanc…
阅读更多...
LangChain入门：19.探索结构化工具对话

LangChain入门：19.探索结构化工具对话

引言 在人工智能的浪潮中&#xff0c;对话代理技术正逐渐成为企业和开发者关注的焦点。LangChain&#xff0c;作为对话代理领域的一颗新星&#xff0c;自2021年9月诞生以来&#xff0c;以其强大的功能和灵活的应用场景迅速赢得了市场的认可。本文将带你深入了解LangChain中的S…
阅读更多...
【从浅学到熟知Linux】进程控制上篇=＞进程创建、进程终止与进程等待（含_exit与exit的区别、fork函数详解、wait与waitpid详解）

【从浅学到熟知Linux】进程控制上篇=＞进程创建、进程终止与进程等待（含_exit与exit的区别、fork函数详解、wait与waitpid详解）

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 进程创建fork函数写时拷贝 进程退出进程退出操作系统做了什么&#xff1f;进程退出场景进程退出的常见方法…
阅读更多...
openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理

openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理

文章目录 一、问题描述二、调研过程1、变更实例名称2、查看grafana中的监控数据3、libvirt服务中的xml文件4、现有的监控数据流转架构 总结 一、问题描述 openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理。 通过修改实例名称的功能修改了实例名称&…
阅读更多...
大模型赋能：爬虫技术的全新革命

大模型赋能：爬虫技术的全新革命

大模型加持下的爬虫技术革新&#xff1a;从BS4到提示工程的飞跃 在爬虫技术的演进历程中&#xff0c;内容解析一直是一个核心环节。传统的爬虫技术&#xff0c;如使用BeautifulSoup&#xff08;BS4&#xff09;等工具&#xff0c;需要逐个解析网页内容&#xff0c;通过XPath或C…
阅读更多...
XILINX 7系列时钟资源

XILINX 7系列时钟资源

文章目录 前言一、时钟概要1.1、CC1.2、BUFR、BUFIO、BUFMR1.3、CMT1.4、BUFH1.5、BUFG 二、时钟路由资源三、CMT 前言 本文主要参考xilinx手册ug472 一、时钟概要 7系列FPGA时钟资源主要有CC、BUFR、BUFIO、BUFMR、CMT、BUFG、BUFH和GTE_COMMON 1.1、CC “CC”&#xff0…
阅读更多...
OpenHarmony开发案例：【自定义通知】

OpenHarmony开发案例：【自定义通知】

介绍 本示例使用[ohos.notificationManager] 等接口&#xff0c;展示了如何初始化不同类型通知的通知内容以及通知的发布、取消及桌面角标的设置&#xff0c;通知类型包括基本类型、长文本类型、多行文本类型、图片类型、带按钮的通知、点击可跳转到应用的通知。 效果预览&am…
阅读更多...
TensorFlow实战Google深度学习框架 PDF书籍分享

TensorFlow实战Google深度学习框架 PDF书籍分享

今天又来给大家推荐一本TensorFlow方面的书籍<TensorFlow实战Google深度学习框架>。本书适用于想要使用深度学习或TensorFlow的数据科学家、工程师&#xff0c;希望了解大数据平台工程师&#xff0c;对人工智能、深度学习感兴趣的计算机相关从业人员及在校学生等。 下载当…
阅读更多...
【数据结构与算法】用两个栈实现一个队列

【数据结构与算法】用两个栈实现一个队列

题目 用两个栈&#xff0c;实现一个队列功能 add delete length 队列 用数组可以实现队列&#xff0c;数组和队列的区别是&#xff1a;队列是逻辑结构是一个抽象模型&#xff0c;简单地可以用数组、链表实现&#xff0c;所以数组和链表是一个物理结构&#xff0c;队列是一个逻…
阅读更多...
Cannot access ‘androidx.activity.FullyDrawnReporterOwner‘

Cannot access ‘androidx.activity.FullyDrawnReporterOwner‘

Android Studio新建项目就报错&#xff1a; Cannot access ‘androidx.activity.FullyDrawnReporterOwner’ which is a supertype of ‘cn.dazhou.osddemo.MainActivity’. Check your module classpath for missing or conflicting dependencies 整个类都报错了。本来原来一直…
阅读更多...
阿里面试：DDD中的实体、值对象有什么区别？

阿里面试：DDD中的实体、值对象有什么区别？

在领域驱动设计&#xff08;DDD&#xff09;中&#xff0c;有两个基础概念&#xff1a;实体&#xff08;Entity&#xff09;和值对象&#xff08;Value Object&#xff09;。 使用这些概念&#xff0c;我们可以把复杂的业务需求映射成简单、明确的数据模型。正确使用实体和值对…
阅读更多...
【环境】原则

【环境】原则

系列文章目录 【引论一】项目管理的意义 【引论二】项目管理的逻辑 【环境】概述 【环境】原则 一、培养项目系统性思维 1.1 系统性思维 1.2 系统性思维的价值 1.3 建模和推演&数字孪生 二、项目的复杂性和如何驾驭复杂性 2.1 复杂性的三个维度 2.2 如何驾驭复杂性 三、…
阅读更多...
【御控物联】Java JSON结构转换（4）：对象To对象——规则属性重组

【御控物联】Java JSON结构转换（4）：对象To对象——规则属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、术语解释三、案例之《JSON对象 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换&#xff0…
阅读更多...
谷歌pixel6/7pro等手机WiFi不能上网，显示网络连接受限

谷歌pixel6/7pro等手机WiFi不能上网，显示网络连接受限

近期在项目中遇到一个机型出现的问题，先对项目代码进行排查，发现别的设备都能正常运行，就开始来排查机型的问题，特意写出来方便后续查看，也方便其它开发者来自查。 设备机型：Pixel 6a 设备安卓版本：13 该方法无需root，只需要电脑设备安装adb（即Android Debug Bridge…
阅读更多...
GPT提示词分享 —— 解梦

GPT提示词分享 —— 解梦

&#x1f449; 对你描述的梦境进行解读。 我希望你能充当一个解梦者。我将给你描述我的梦&#xff0c;而你将根据梦中出现的符号和主题提供解释。不要提供关于梦者的个人意见或假设。只提供基于所给信息的事实性解释。 GPT3.5的回答 GPT3.5 &#x1f447; 感觉有点傻&#xf…
阅读更多...
申请免费https证书

申请免费https证书

https证书是什么&#xff1a; https证书是指在http超文本传输协议的前提下安装部署了SSL/TLS证书后形成的全新协议&#xff0c;https安全超文本传输协议。在https证书部署完成后&#xff0c;服务器端和浏览器端进行的信息交互的过程中会有加密层保护&#xff0c;使得原本明文传…
阅读更多...
群晖NAS安装Synology Office与Drive结合内网穿透实现本地文件公网分享与远程协作

群晖NAS安装Synology Office与Drive结合内网穿透实现本地文件公网分享与远程协作

文章目录 本教程解决的问题是&#xff1a;1. 本地环境配置2. 制作本地分享链接3. 制作公网访问链接4. 公网ip地址访问您的分享相册5. 制作固定公网访问链接 本教程解决的问题是&#xff1a; 1.Word&#xff0c;PPT&#xff0c;Excel等重要文件存在本地环境&#xff0c;如何在编…
阅读更多...
【解决】Spring Boot创建项目常见问题

【解决】Spring Boot创建项目常见问题

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 idea无maven选项 无效发行版17 类⽂件具有错误的版本 61.0, 应为 …
阅读更多...
H5获取微信openid封装方法

H5获取微信openid封装方法

H5获取微信openid封装方法 目录1、前置配置条件2、封装并新建getOpenid.js文件2.1&#xff1a;处理code方法2.2&#xff1a;第一次获取到openid后&#xff0c;再次进入无需再次获取&#xff1b;2.3&#xff1a;页面调用方法 3、往期回顾总结&#xff1a; 目录 接到需求&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023