Echarts实战案例代码(2)：柱图堆叠方案备选案例

最新推荐文章于 2023-09-17 15:50:53 发布
最新推荐文章于 2023-09-17 15:50:53 发布
阅读量372 收藏
点赞数 1
分类专栏： echarts
LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。
本文链接：https://blog.csdn.net/weixin_41290949/article/details/106817276
版权

在这里插入图片描述


option = {
        tooltip: {
        trigger: 'axis'
    },
    title:[{
        text:"70%",
        left:"2%",
        right: '85%'
    },{
        text:"15%",
        left:"32%",
        right: '51%'
    },{
        text:"-1.46%",
        left:"17%",
        right: '68%'
    },{
        text:"6.2%",
         left:"47%",
        right: '34%'
    },{
        text:"5.3%",
         left:"62%",
        right: '17%'
    }],
        grid: [{
        left:"1%",
        right: '86%'
    }, {
        left:"17%",
        right: '68%'
    }, {
        left:"34%",
        right: '51%'
    }, {
        left:"51%",
        right: '34%'
    }, {
        left:"68%",
        right: '17%'
    }],
    xAxis: [{
        type: 'category',
        inverse: true,
        data: ['营业收入\n 30,482万元'],
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['净利润\n4,307万元'],
        gridIndex: 1,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['净资产收益率\n1.8%'],
        gridIndex: 2,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['净利率\n36%'],
        gridIndex: 3,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['人均净利率\n32%'],
        gridIndex: 4,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    }],
    yAxis: [{
        type: 'value',
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 1,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 2,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 3,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 4,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    }],
   series: [{
            name: 'A',
            type: 'bar',
              barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150]
        }, {
            name: 'A',
            type: 'bar',
            barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 1,
            yAxisIndex: 1
        },
        {
            name: 'B',
            type: 'bar',
            barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 1,
            yAxisIndex: 1
        }, {
            name: 'A',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            type: 'bar',
            data: [165],
            xAxisIndex: 2,
            yAxisIndex: 2
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#56f9b8'},
                                {offset: 1, color: '#74f853'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 2,
            yAxisIndex: 2
        }, {
            name: 'A',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 3,
            yAxisIndex: 3
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 3,
            yAxisIndex: 3
        }, {
            name: 'A',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 4,
            yAxisIndex: 4
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 4,
            yAxisIndex: 4
        }
    ]
};
漏刻有时
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
区块链性能测评实战案例
03-23
近期区块链的技术概念在传统IT圈逐渐升温，成为许多遗产系统升级重构方案的备选技术路线。笔者本人多年从事应用系统研发，目前所维护的系统性能渐露瓶颈，分片扩容难度较大且面 0x00背景 近期区块链的技术概念在传统...
考虑方案有效性的应急案例决策方法
01-14
然后, 根据距离熵方法对多时期的方案实施效果进行融合, 集结相似度和实施效果, 进而得到每个案例的综合评价值, 并根据综合评价值的大小确定最优备选方案; 最后, 通过一个高层建筑火灾算例验证了所提出方法的可行性...
ECharts堆叠柱状图随数据长度实现高度自适应的解决方法(不加滚动条) 亲测有效
weixin_42064877的博客
11-16 1833
【代码】ECharts堆叠柱状图随数据长度实现高度自适应的解决方法(不加滚动条) 亲测有效。
Echarts实现多柱状图重叠重叠效果
weixin_39891473的博客
02-18 4571
echarts柱状图重叠问题
echart文字大小自适应
m0_68937827的博客
08-18 1908
echarts图表大小的自适应和文字大小的自适应
如何使用Echarts完成柱状图重叠功能
zzMystery的博客
04-11 8978
业务需求中需要显示各个科目下的总公司预算帽和分公司预算帽的使用情况对比，所以在柱状图显示时就需要将总公司的柱子和分公司的柱子重叠在一起显示，以此来比较分公司使用了总公司多少的预算，业务很明确，但是如何做到柱子的重叠有点不明确。 山重水复 首先我去查询了kendoui的官网看看有没有柱状图重叠显示的属性，搜索一番后无果，kendoui只有柱状图叠加的使用样例，并没有柱状图重叠，这种情况下只能去寻...
11架构设计流程：设计备选方案1
08-03
1.备选方案1：采用开源的Kafka 2.备选方案2：集群 + MySQL存储 3.备选方案3：集群 + 自研存储方案 1. 几种常见的架构设计误区 2. 备选
echarts入门 常用图表（柱状堆叠图）
weixin_45818290的博客
08-29 2532
echarts堆叠图柱状图效果图。
echarts - 柱状图常见问题
weixin_47353884的博客
06-08 923
借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观代码如下（示例）： 2.读入数据 代码如下（示例）： 该处可以加入窗口自适应 二、如何制作一个纵向堆叠柱状图 1. legend 展示 2. 纵轴加单位 3. 显示tooltip 层级被压 4. tooltip中如何获取百分比 5. tooltip中如何展示全部数据 更改样式可以用模板字符串加入class需要 deep scoped重要属性 参考文章 ： https://blog
echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整
weixin_48142432的博客
07-02 5450
echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整 由于业务要求如下： （1）排序：根据柱状组成结构，从上到下保持一致，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通 （2）标签：根据柱状组成结构，从左到右，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通 然而echart堆叠柱状图的渲染机制是柱状图从下往上的，所以第一条数据是排在最底层的，即银票-电票-白名单是第一条数据，所以排在最底下了，那么把数据反过来不就行了吗，没错，你真聪明，但是
Echars 堆叠柱状图lable显示，但Tooltip保持数显示数量
一念执着
08-16 548
以下仅供参考~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script> </head&g
echarts堆叠柱状图
qq_44505797的博客
05-01 3894
先看一下效果，根据echarts官网上的堆叠柱状图属性得到下面的效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script> </head> &lt
让 echarts 柱状图 label 根据柱高度自适应显示在柱内/柱外
汤一飞
09-29 2921
文章目录背景解决方法代码示例 背景 echarts 柱状图, label 默认显示在柱内, 当数据最大值和最小值相差过大时, 短柱放不下 label , 样式不美观 解决方法 传入数据时, 不传入实际数据, 而是传入 ${当前实际数据}.${数据最大值} (数据本身不能为小数) 在 series.label.formatter 中, 拿到了之前传入的数据, .split('.') 得到实际数据和数据最大值 设置 label.padding , top 为负数(自己试), 判断当前数据与数据最大值相差过大时
解决 Echarts 多列折线图/柱状图标签遮挡问题
最新发布
GnqEditor的博客
09-17 3046
通过调整标签的显示位置、旋转角度或使用省略号等方式，可以确保标签之间不会互相遮挡，使图表更加清晰易读。在使用 Echarts 进行多列折线图或柱状图的绘制时，有时会遇到标签（文字）互相遮挡的问题，这可能导致图表不够清晰或难以阅读。要解决标签遮挡问题，我们可以通过调整标签的显示位置、旋转角度或使用省略号等方式来优化图表的可读性。属性，我们可以自定义标签的显示格式。属性为旋转角度，我们可以使标签以一定角度进行旋转，从而避免标签的互相遮挡。，我们可以将标签显示在折线图的顶部或底部，从而避免标签的互相遮挡。
echarts柱状图的label放置到柱子的顶部
weixin_44196453的博客
04-24 3792
echarts本身不支持将label固定放置在背景的上部。要想实现该功能，可以利用echarts的轴，增加一条x轴放置在上部，然后将轴的label格式化设置即可。
echarts中柱状图数据堆叠的效果
yangyanqin2545的博客
11-09 1466
echarts中柱状图数据堆叠的效果 1、最后的样式展示 2、代码拷贝 //容器盒子 <template> <div class="bar" :id="chartsId" style="width: 100%; height: 100%"></div> </template> <script> import * as echarts from 'echarts'; import mapData from './mapData'; expo
Echarts柱形图堆叠
热门推荐
Sunshine_Jian的博客
11-04 2万+
应用场景：一些柱形图在数据量比较多的时候，横向排列受到挤压，导致柱形图，变的非常细，影响整体的效果。所以应该将柱形图堆叠起来，这样就会好很多。 先上效果图： 关键字：series-stack //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。 var option = { series: [ { name: "钢铁侠", type: "bar",//柱状图 ...
在echarts中自定义提示框内容
李慕白
12-14 4900
地址1、期望效果 以柱状图为例，在鼠标滑过每个数据标签时，为了更友好地显示数据内容，需要对显示的数据内容作格式化处理，添加自定义内容。 如下图，鼠标滑过每个数据项时， 第1张是默认提示框； 第2张是处理成百分比数据后，显示当前单个数据项的提示框； 第3张是处理成百分比数据后，显示当前横坐标下多个数据项的提示框。 图1、默认提示框.jpg 图2、单项提示框.jpg
MATLAB：已知客户点和备选中心位置。如何画图
06-09
1. 使用subplot函数创建一个2x1的图形窗口，用于分别绘制客户点和备选中心的散点图。 2. 使用scatter函数绘制客户点的散点图。设置点的颜色为红色，标记为“o”。 3. 使用hold on命令保持图形窗口打开，以便在同一...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值