echarts倾斜横向堆叠柱状图

已于 2024-08-30 17:38:22 修改
阅读量279 收藏 1
点赞数 3
分类专栏： echarts图表 vue 文章标签： echarts 前端 javascript
于 2024-08-27 20:51:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45832746/article/details/141612092
版权

在这里插入图片描述

代码如下

option: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(126,199,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(126,199,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(126,199,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          extraCssText: "width:100px;",
          textStyle: {
            //---提示框内容样式
            // color:"green",
            fontSize: 24,
          },
          // formatter: '工单数量: {c0}',
        },
        legend: {
          itemHeight: 14,
          itemWidth: 14,
          icon: "rect",
          top: "0",
          right: "5%",
          type: "plain",
          textStyle: {
            color: "#7ec7ff",
            fontSize: 24,
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 18,
        },
        grid: {
          top: "10%",
          left: "15%",
          right: "5%",
          bottom: "15%",
        },
        xAxis: {
          max: 50,
          axisLine: {
            lineStyle: {
              color: "#44A0B7",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 24,
            },
          },
          show: true,
          type: "value",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          data: ["提示", "一般", "重要", "紧急"],
          // data: ["紧急", "重要", "一般", "提示"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            fontStyle: "oblique",
            margin: 30,
            textStyle: {
              color: function (value, index) {
                if (index == 3) {
                  return "#e00000";
                }
                if (index == 2) {
                  return "#ea6c00";
                }
                if (index == 1) {
                  return "#e8bc01";
                }
                if (index == 0) {
                  return "#2695f5";
                }
              },
              fontSize: 24,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "已完成",
            type: "custom",
            stack: "all",
            renderItem: (params, api) => {
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x;
              const y =
                bandWidth * (params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,
                },
                style: api.style(),
              };
            },
            barWidth: 26,
            data: [5, 3, 8, 9],
            // 设置柱状图渐变
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(25,252,157,1)",
                },
                {
                  offset: 1,
                  color: "rgba(25,252,157,0.5)",
                },
              ]),
              // borderColor: "#000",
              // borderWidth: 2,
            },
          },
          {
            name: "处理中",
            type: "bar",
            type: "custom",
            stack: "all",
            renderItem: (params, api) => {
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x;
              const y =
                bandWidth * (params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x + 200,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,
                },
                style: api.style(),
              };
            },
            barWidth: 26,
            data: [10, 4, 5, 20],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(38, 149, 245, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(38, 149, 245, 0.5)",
                },
              ]),
              // borderColor: "#000",
              // borderWidth: 2,
            },
          },
          {
            name: "待处理",
            type: "custom",
            stack: "all",
            renderItem: (params, api) => {
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x;
              const y =
                bandWidth * (params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x + 600,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,
                },
                style: api.style(),
              };
            },
            stack: "all",
            barWidth: 26,
            data: [1, 3, 2, 14],
            // data: [0,0,0,0],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(204, 204, 204, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(204, 204, 204, 0.5)",
                },
              ]),
              // borderColor: "#000",
              // borderWidth: 2,
            },
          },
        ],
      },

  initChart() {
      this.$api.MMS.Overall.GetEventData().then((res) => {
        if (res.ok) {
          this.option.series[0].data = res.data.done.reverse(); //已完成
          this.option.series[1].data = res.data.processing.reverse(); //处理中
          this.option.series[2].data = res.data.pending.reverse(); //待处理
          // this.option.series[0].data = this.option.series[0].data.reverse(); //已完成
          // this.option.series[1].data = this.option.series[1].data.reverse(); //处理中
          // this.option.series[2].data = this.option.series[2].data.reverse(); //待处理
          if (document.getElementById("echarts2")) {
            let myChart = this.$echarts.init(
              document.getElementById("echarts2")
            );
            let max1 = Math.max(...this.option.series[0].data);
            let max2 = Math.max(...this.option.series[1].data);
            let max3 = Math.max(...this.option.series[2].data);
            let sum = max1 + max2 + max3;//取出所有的最大值
            this.option.xAxis.max = sum *1.5;//设置横向栏的上限，优化显示效果
            const list = [];//储存第一列数据的长度，第二列渲染要用
            const list2 = [];//储存第二列数据的长度，第三列渲染要用
            this.option.series[0].renderItem = (params, api) => {//渲染第一列
              list.push(api.size([api.value()])[0]);
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x;//这里是用来控制渲染的x轴起始点
              const y =//这里是用来控制渲染的y轴起始点
                bandWidth *
                  (this.option.series.length - params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,//倾斜度
                },
                style: api.style(),
              };
            };
            this.option.series[1].renderItem = (params, api) => {
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x + list[params.dataIndex] + 11;这里+11是为了实现和前一列数据有间隔
              const y =
                bandWidth *
                  (this.option.series.length - params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              list2.push(
                list[params.dataIndex] + api.size([api.value()])[0] + 11
              );//储存第二列长度
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,
                },
                style: api.style(),
              };
            };
            this.option.series[2].renderItem = (params, api) => {
              const barLayout = api.barLayout({
                count: 1,
                barWidth: 18,
              });
              const { bandWidth, offsetCenter, width } = barLayout[0];
              const x = params.coordSys.x + list2[params.dataIndex] + 11;//这里可以不加了，因为是最后一列了，如果还有的话类推即可
              const y =
                bandWidth *
                  (this.option.series.length - params.dataIndex + 1 / 2) +
                offsetCenter +
                params.coordSys.y -
                width / 2;
              return {
                type: "obliqueRectangle",
                shape: {
                  x: x,
                  y: y + 2,
                  width: api.size([api.value()])[0],
                  height: width,
                  offset: width * 0.5,
                },
                style: api.style(),
              };
            };
            myChart.clear();
            myChart.setOption(this.option);
            window.onresize = function () {
              myChart.resize();
            };
          }
        }
      });
    },
brave,
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue echart 立体柱状图 带阴影
Thekingyu的博客
11-14 1165
【代码】vue echart 立体柱状图 带阴影。
关于Echarts堆叠柱状图从后台查数据并展示
qq_43038965的博客
07-31 2472
1.首先去Echarts官网下载插件，引入到jsp中 (https://echarts.baidu.com/) <script type="text/javascript" src="www/echarts.min.js"></script>
【css】3d柱状图-vue组件版
最新发布
一位前行者的博客
08-02 399
在现代网页设计中，圆柱形进度条是一种非常流行的视觉元素，用于展示数据的进度或状态。本文将介绍如何使用Vue.js和LESS创建一个响应式的圆柱形进度条组件。
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
echarts 横向柱状堆叠图
走码观花
10-13 1727
var optionBar = { title: { /*text: '世界人口总量',*/ subtext: '单位：%' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { ...
echarts柱状图顶部设置倾斜并且展示数字
博客简介
01-15 1433
echarts柱状图顶部设置倾斜并且展示数字
【Echarts】柱状图
qq_43806488的博客
11-29 872
搜索
从柱状堆叠图带你入门Echarts
qq_40597589的博客
10-19 943
前言 实习一个多月了，在部门里负责了度量模块的页面编写，主要涉及的技术就是Echatrs。在此之前，我只稍微接触过python的数据可视化，并没有接触过Echarts。不过现在将度量模块的几个页面写下来，已经可以说是入门了，本文从图的展示需求着手，以柱状堆叠图的各种需求图为例，一步步带你们了解Echarts Echarts入门 1 安装 ①输入npm install echarts安装 ②然后在main.js中全局引入import echarts from "echarts"，Vue.prototype.
echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色
weixin_30501857的博客
11-20 2777
方法： 1 function barCharShow(curr_dim,divId,result_data){ 2 mutilDim(curr_dim);//维度信息 3 var paint = initEcharts(echarts,divId); 4 var option = buildStandardBar(); 5 o...
ECharts——柱状折线图 + 双Y轴 (1.多统计项依附不同的y轴 2.自定义提示文本)
Faith_626的博客
07-20 746
option = { title: [ { text: '', left: 'center' } ], //当trigger为’item’时只会显示该点的数据， //为’axis’时显示该列下所有坐标轴所对应的数据。 //提示框组件 .
echarts横向堆叠柱状图.zip
10-11
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，设置隐藏一段方案
可视化绘图技巧100篇基础篇（二）-柱状图
getusushu的博客
08-13 403
基础柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中【有多少？】这个问题。需要注意的是，当柱状图显示的分类很多时会导致分类名层叠等显示问题。所谓自定义柱形图，本质上仍是柱形图，只是在某些场景下，如发布会， 我们需要在图形展示上下些功夫，如下图：1、将子类别拖到行，销售额拖两次到列2、点击右侧的销售额，选择双轴。
echarts 相关
qq_40596488的博客
02-22 298
/*chart是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 axis直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 xAxis直角坐标系中的横轴，通常并默认为类目轴 yAxis直角坐标系中的纵轴，通常并默认为数值轴 grid直角坐标系中除坐标轴外的绘图网格 legend图例，表述数据和图形的关联 dataRange值域选择...
echarts 柱状图
qq_51357960的博客
10-15 400
echarts 柱状图
echarts 柱状图
yyongsheng的博客
10-29 363
var dataX=[];// x轴数据 var dataYOne=[];// y轴数据 销售额 var dataYTwo=[];// y轴数据 盈利 //以下代码初始化执行 $(document).ready(function(){ //初始化表格样式 $('#dg').datagrid({   rowStyler: function(index,row){ //表格字体
Echarts柱状图
君兮的博客
01-24 889
创建一个图表容器，初始情况必须给这个图表一个宽高，如果这里没给，在下面获取容器的时候也可以给 <div id="myChart" :style="{height: '250px'}"></div> 获取div容器 myChart(参数) { var myChart = this.$echarts.init(document.getElementById('myChart')) 如果初始没设置图表容器的大小，可以在这个进行设置 /*var myCh
echarts堆叠柱状图横向
10-18
您可以使用 echarts 中的柱状图（bar）和堆叠（stack）属性来实现横向的堆叠柱状图。具体实现步骤如下： 1. 在 option 中设置 xAxis 和 yAxis 的 type 为 value，同时设置 xAxis 的 position 为 top，yAxis 的 position 为 left，这样就可以实现横向的柱状图。 2. 在 series 中设置 type 为 bar，同时设置 stack 属性为堆叠的组名，这样就可以实现堆叠柱状图。 3. 如果需要设置柱状图的颜色，可以在 series 中设置 itemStyle.normal.color 属性。 下面是一个简单的示例代码： ``` option = { xAxis: { type: 'value', position: 'top' }, yAxis: { type: 'category', data: ['A', 'B', 'C'] }, series: [ { name: 'Series 1', type: 'bar', stack: 'Stack 1', itemStyle: { normal: { color: '#FFA07A' } }, data: [10, 20, 30] }, { name: 'Series 2', type: 'bar', stack: 'Stack 1', itemStyle: { normal: { color: '#87CEFA' } }, data: [20, 30, 40] } ] }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值