03-echarts如何画立体柱状图

已于 2024-05-08 15:22:04 修改
阅读量796 收藏 18
点赞数 24
分类专栏： Echarts画图 文章标签： echarts 前端 vue
于 2024-04-15 15:37:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuliangliang/article/details/137142666
版权

echarts如何画立体柱状图

一、创建盒子

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',
                        },
                      ]),
                    },
                  },
                ],
              };
            }
          },
        ],

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

四、效果图

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

李析鸢
关注
  • 24
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts立体柱状图
Summer_JK的博客
11-07 1万+
echarts绘制漂亮的立体柱状图（超详细） 为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码： HTML： <div class="content bgBox"> <div class="firstTitle"> <p class="titleName">购买力最强</p> </div> <div id="buyTop" style="width: 100%;h
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
echarts 柱状图【立体】
weixin_43957384的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6083
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
ECharts: 绘制立体柱状图【圆柱体】
m0_58293192的博客
01-10 8784
ECharts: 绘制立体柱状图【圆柱体】
echarts-柱状图-地图Demo.zip
11-07
Demo描述：柱状图表10s动态更新，地图图标10s动态更新业务相关的省份高亮（根据数据值所属Rang动态分配不同的高亮显示） Demo代码带注释，资源包括js/css/image/html Demo展示地址：...
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
在Echarts 地图上画柱状图
06-26
根据省份位置，在Echarts 地图上画柱状图， 可点击放大单个柱状图
echarts实现多3D立体柱状图
Dalin0929的博客
11-26 1万+
效果图： 实现代码： // 立体多柱状图 function getSolidOption(data1, data2, data3) { // 月份坐标轴 var nowMonth = new Date().getMonth() + 1; var lineXAxisData = []; for (var i = 5; i >= 0; i--) { var month = nowMonth - i; if (month < 1) { lineXAxisD
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 8001
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts实现立体柱状图
qq_43651168的博客
08-04 1150
echarts实现立体柱状图。
记录下echarts立体柱形图实现的几种方式
qq_35438952的博客
03-24 2410
ecarts立体柱形图实现方法
echarts实现3d柱状图的两种方式
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts柱状图实现立体效果的简单方式，以及柱状体之间的间距控制
qq_43637824的博客
12-08 916
公司ui设计图要求柱状图立体，同指标柱状图之间要有间距。之前的js是抄的同事的，但没有间距，网上找了一些，都挺复杂。就看了一下源码，立体效果是通过多个柱状图series堆叠成的。所以就在两个指标中间加了一个和背景颜色一样的series，就可以分开了。x轴数组，两个指标数组和指标名称。
echarts 实现立体柱状图
热门推荐
liumengyue的博客
07-27 2万+
<div class="dayFluxDetail" id="mainCahrts" style=" width: 100%; height: 8.5rem;"></div> // 配置项 // mainCahrts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('mainCahrts')); const data = [220
vue2 使用echarts 实现立体柱状图，不使用echarts的立体柱状图属性
最新发布
02-05
要在Vue2中使用Echarts实现立体柱状图，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Echarts和Vue2的相关依赖。可以通过npm或者yarn进行安装。 2. 在Vue组件中引入Echarts，并创建一个div元素作为图表的容器。 3. 在Vue组件的mounted钩子函数中，初始化Echarts实例，并将其绑定到之前创建的div容器上。 4. 使用Echarts的API配置立体柱状图的相关属性，例如x轴、y轴、数据等。 5. 最后，通过调用Echarts实例的setOption方法，将配置好的属性应用到图表中。 下面是一个示例代码，演示了如何在Vue2中使用Echarts实现立体柱状图： ```vue <template> <div id="chartContainer" style="width: 600px; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { mounted() { // 初始化Echarts实例 const chart = echarts.init(document.getElementById('chartContainer')); // 配置立体柱状图的属性 const option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: { type: 'value', }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { emphasis: { color: 'rgba(0,0,0,0.5)', // 设置立体效果的颜色 }, }, }], }; // 将配置应用到图表中 chart.setOption(option); }, }; </script> ``` 这样，你就可以在Vue2中使用Echarts实现立体柱状图了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值