[echarts] 两侧堆叠柱状图

2023-09-19 09:50:41

在这里插入图片描述
http://echarts.zhangmuchen.top/#/detail?cid=xOQSXIOQiK

const myData = ['福田区', '罗湖区', '南山区', '盐田区', '宝安区', '龙岗区', '坪山区', '龙华区', '光明区', '大鹏区'];
// 全彩屏，双基色屏，简易屏，条形屏
const offLine = [
    [20, 40, 60, 60, 10, 20, 40, 20, 20, 10],
    [10, 30, 50, 20, 50, 30, 30, 40, 10, 20],
    [50, 20, 40, 10, 20, 40, 20, 30, 30, 30],
    [20, 10, 30, 40, 10, 10, 10, 40, 40, 40],
];

const onLine = [
    [10, 20, 20, 40, 20, 10, 60, 60, 40, 20],
    [20, 10, 40, 30, 30, 50, 20, 50, 30, 10],
    [30, 30, 30, 20, 40, 20, 10, 40, 20, 50],
    [40, 40, 40, 10, 10, 10, 40, 30, 10, 20],
];

const offLineSum = [100, 100, 180, 130, 90, 100, 100, 130, 100, 100];
const onLineSum = [100, 100, 130, 100, 100, 90, 130, 180, 100, 100];

// backgroundColor: '#11356D',
option = {
    backgroundColor: '#11356D',
    /*    title: [
        {
            text: '脱机状态',
            top: '2%',
            left: '30%',
            textStyle: {
                color: '#DC3239',
                fontSize: 14,
            },
        },
        {
            text: '联机状态',
            top: '2%',
            right: '30%',
            textStyle: {
                color: '#2087FE',
                fontSize: 14,
            },
        },
    ],*/
    legend: [
        {
            // 图例
            top: '2%',
            left: 'center', // 图例距离左侧距离(此处水平居中)
            textStyle: {
                // 图例文本样式
                color: '#fff',
            },
            itemGap: 100,

            selectedMode: false, //图例点击失效
            data: ['脱机状态', '联机状态'],
        },
        {
            // 图例
            bottom: '45',
            left: 'center', // 图例距离左侧距离(此处水平居中)
            textStyle: {
                // 图例文本样式
                color: '#fff',
            },
            selectedMode: false, //图例点击失效
            data: ['全彩屏', '双基色屏', '简易屏', '条形屏'],
        },
    ],
    tooltip: {
        // 提示框
        show: true,
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器配置项。
            type: 'shadow', // 'line' 直线指示器;'shadow' 阴影指示器.
        },
        // formatter: '{b}<br/>脱机: {c}' // 提示框所提示的文本内容
        formatter: function (params) {
            const fullScreenColor = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#F59A3F;"></span>`; // 全彩屏颜色
            const doubleScreenColor = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#F2C751;"></span>`; // 双基色屏颜色
            const simpleScreenColor = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#296FFB;"></span>`; // 简易屏颜色
            const lineScreenColor = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#4AA5EA;"></span>`; // 条形屏颜色
            const fullScreen = params[0]; // 全彩屏序列
            const doubleScreen = params[1]; // 双基色屏序列
            const simpleScreen = params[2]; // 简易屏屏序列
            const lineScreen = params[3]; // 条形屏屏序列
            const bg = params[4]; // 背景区分联机与脱机
            const status =
                bg.seriesName === '联机状态'
                    ? `<span style="display:inline-block;color:#2087FE;">联机</span>`
                    : `<span style="display:inline-block;color:#DC3239;">脱机</span>`;
            return (
                `${fullScreen.name}(${status})</br>` +
                `${fullScreenColor}${fullScreen.seriesName}：${fullScreen.value}</br>` +
                `${doubleScreenColor}${doubleScreen.seriesName}：${doubleScreen.value}</br>` +
                `${simpleScreenColor}${simpleScreen.seriesName}：${simpleScreen.value}</br>` +
                `${lineScreenColor}${lineScreen.seriesName}：${lineScreen.value}</br>`
            );
        },
    },
    grid: [
        {
            // 左边
            show: false,
            left: '2%',
            top: 20,
            bottom: 60,
            containLabel: true,
            width: '43%',
        },
        {
            // 中间
            show: false,
            left: '55%',
            top: 40,
            bottom: 60,
            width: '14%',
        },
        {
            // 右边
            show: false,
            right: '2%',
            top: 20,
            bottom: 60,
            containLabel: true,
            width: '43%',
        },
    ],
    // X轴线配置
    xAxis: [
        {
            // 左侧区域
            gridIndex: 0, // x 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
            type: 'value', // 轴线类型: 数值轴
            position: 'top', // 轴线位置(此处位于顶部)
            inverse: true, // 是否是反向坐标轴.[ default: false ]
            axisLine: {
                show: false, // 轴线不显示
            },
            axisTick: {
                show: false, // 轴线刻度不显示
            },
            axisLabel: {
                // 轴线刻度标签
                show: true, // 显示刻度标签
                textStyle: {
                    // 标签样式
                    color: '#153D7D64',
                    fontSize: 12,
                },
            },
            splitLine: {
                // 垂直于X轴的分隔线
                show: true, // 显示分隔线
                lineStyle: {
                    // 分隔线样式
                    color: '#153D7D64',
                    width: 1,
                    type: 'solid',
                },
            },
            // 强制设置坐标轴分割间隔
            // interval: 50,
            // min: 0, // 最小值
            // max: 200 // 最大值
        },
        {
            // 中间区域
            gridIndex: 1,
            show: false, // 中间部分不显示X轴
        },
        {
            // 右侧区域
            gridIndex: 2,
            type: 'value',
            position: 'top',
            inverse: false, // 是否是反向坐标轴.[ default: false ]
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#153D7D64',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#153D7D64',
                    width: 1,
                    type: 'solid',
                },
            },
            // 强制设置坐标轴分割间隔
            // interval: 50,
            // min: 0, // 最小值
            // max: 200 // 最大值
        },
    ],
    // Y轴线配置
    yAxis: [
        {
            // 左侧区域
            gridIndex: 0, // y 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
            type: 'category', // 轴线类型: 类目轴
            // 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
            inverse: true, // 是否是反向坐标轴.[ default: false ]
            position: 'right', // y轴的位置。'left' or 'right'
            axisLine: {
                show: false, // y轴线不显示
            },
            axisTick: {
                show: false, // y轴线刻度不显示
                lineStyle: {
                    // 刻度线样式
                    color: '#11356D',
                },
            },
            axisLabel: {
                show: false, // 刻度标签不显示
            },
            data: myData, // Y轴(这里是类目轴)的类目数据
        },
        {
            gridIndex: 1, // 中间区域
            type: 'category',
            boundaryGap: true,
            inverse: true,
            position: 'left', // y轴的位置。'left' or 'right'
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true, // 显示中间部分的Y轴刻度标签(中间的文字)
                textStyle: {
                    // 标签样式
                    color: '#cccccc',
                    fontSize: 12,
                },
            },
            data: myData,
        },
        {
            // 右侧区域
            gridIndex: 2,
            type: 'category',
            boundaryGap: true,
            inverse: true,
            position: 'left',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
                lineStyle: {
                    // 刻度线样式
                    color: '#153D7D',
                },
            },
            axisLabel: {
                show: false,
            },
            data: myData,
        },
    ],
    series: [
        {
            name: '全彩屏', // 系列名称
            type: 'bar',
            // barGap: 5, // 柱间距离
            barWidth: 15, // 柱子宽度
            xAxisIndex: 0, // 对应在X轴的grid索引
            yAxisIndex: 0, // 对应在Y轴的grid索引
            stack: '1', // 相同就是堆叠
            // barGap:'-100%', //重叠
            label: {
                show: true,
                position: 'top',
                color: '#F59A3F',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#F59A3F',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 鼠标指向高亮
                show: true,
                label: {
                    color: '#F59A3F96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#F59A3F96', // 高亮状态下柱条颜色
                },
            },
            data: offLine[0], // 系列中的数据内容数组
        },
        {
            name: '双基色屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 0, // 对应在X轴的grid索引
            yAxisIndex: 0, // 对应在Y轴的grid索引
            stack: '1', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#F2C751',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#F2C751',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#F2C75196', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#F2C75196', // 高亮状态下柱条颜色
                },
            },
            data: offLine[1], // 系列中的数据内容数组
        },
        {
            name: '简易屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 0, // 对应在X轴的grid索引
            yAxisIndex: 0, // 对应在Y轴的grid索引
            stack: '1', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#296FFB',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#296FFB',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#296FFB96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#296FFB96', // 高亮状态下柱条颜色
                },
            },
            data: offLine[2], // 系列中的数据内容数组
        },
        {
            name: '条形屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 0, // 对应在X轴的grid索引
            yAxisIndex: 0, // 对应在Y轴的grid索引
            stack: '1', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#4AA5EA',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#4AA5EA',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#4AA5EA96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#4AA5EA96', // 高亮状态下柱条颜色
                },
            },
            data: offLine[3], // 系列中的数据内容数组
        },
        // 脱机背景
        {
            name: '脱机状态', // 系列名称
            type: 'bar',
            // barGap: 5, // 柱间距离
            barWidth: 21, // 柱子宽度
            xAxisIndex: 0, // 对应在X轴的grid索引
            yAxisIndex: 0, // 对应在Y轴的grid索引
            // stack: '1', // 相同就是堆叠
            barGap: '-120%', //重叠
            itemStyle: {
                // 柱条样式。
                // color: '#DC3239',
                color: 'transparent',
                borderWidth: 1,
                borderColor: '#DC3239',
                shadowColor: '#DC3239',
                shadowBlur: 20,
            },
            emphasis: {
                scale: false,
            },
            data: offLineSum, // 系列中的数据内容数组
        },

        {
            name: '全彩屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 2, // 对应在X轴的grid索引
            yAxisIndex: 2, // 对应在Y轴的grid索引
            stack: '2', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#F59A3F',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#F59A3F',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 鼠标指向高亮
                show: true,
                label: {
                    color: '#F59A3F96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#F59A3F96', // 高亮状态下柱条颜色
                },
            },
            data: onLine[0], // 系列中的数据内容数组
        },
        {
            name: '双基色屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 2, // 对应在X轴的grid索引
            yAxisIndex: 2, // 对应在Y轴的grid索引
            stack: '2', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#F2C751',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#F2C751',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#F2C75196', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#F2C75196', // 高亮状态下柱条颜色
                },
            },
            data: onLine[1], // 系列中的数据内容数组
        },
        {
            name: '简易屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 2, // 对应在X轴的grid索引
            yAxisIndex: 2, // 对应在Y轴的grid索引
            stack: '2', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#296FFB',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#296FFB',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#296FFB96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#296FFB96', // 高亮状态下柱条颜色
                },
            },
            data: onLine[2], // 系列中的数据内容数组
        },
        {
            name: '条形屏', // 系列名称
            type: 'bar',
            barWidth: 15, // 柱子宽度
            xAxisIndex: 2, // 对应在X轴的grid索引
            yAxisIndex: 2, // 对应在Y轴的grid索引
            stack: '2', // 相同就是堆叠
            label: {
                show: true,
                position: 'top',
                color: '#4AA5EA',
                fontSize: 10,
            },
            itemStyle: {
                // 柱条样式。
                color: '#4AA5EA',
                // borderWidth:1,
                // borderColor:'transparent'
            },
            emphasis: {
                // 高亮
                show: true,
                label: {
                    color: '#4AA5EA96', // 高亮状态下柱条颜色
                },
                itemStyle: {
                    color: '#4AA5EA96', // 高亮状态下柱条颜色
                },
            },
            data: onLine[3], // 系列中的数据内容数组
        },
        // 联机背景
        {
            name: '联机状态', // 系列名称
            type: 'bar',
            // barGap: 5, // 柱间距离
            barWidth: 21, // 柱子宽度
            xAxisIndex: 2, // 对应在X轴的grid索引
            yAxisIndex: 2, // 对应在Y轴的grid索引
            // stack: '2', // 相同就是堆叠
            barGap: '-120%', //重叠
            itemStyle: {
                // 柱条样式。
                // color: '#2087FE',
                color: 'transparent',
                borderWidth: 1,
                borderColor: '#2087FE',
            },
            data: onLineSum, // 系列中的数据内容数组
        },
    ],
};
更多推荐

DS相关题目

DS相关题目题目一：消失的数字拿到这道题目之后，首先可以想到的一个解题方法就是，我们可以先排序，排完序之后，这个数组其实就是一个有序的数组了，那只用比较数组中的每一个元素和他对应的下标是不是相等的，如果是相等的，那么就说明对应的数字其实是存在的，如果是不相等的，那么就说明对应的数字其实就是不存在的了，但是如果要排序的话

GIS前端-地图操作与交互

GIS地图操作与交互地图操作与交互基本原理Leaflet提供的事件缩放控件常用的基础功能通常是一个应用系统所必需的，如地图的缩放、导航、定位、弹出框等，它让一张静态的地图动起来，让地图承载更多的空间信息，并以友好的交互方式呈现给用户。例如，一个大众应用的旅游GIS系统，如果仅仅在Web端显示一张地图，那么这时只能看到一

用户案例｜Shopee 在多媒体理解业务的向量检索系统实践

Shopee是一家全球性的电商平台，业务范围辐射东南亚、拉美等多个地区。多媒体理解（MultimediaUnderstanding，下文简称MMU）团队是Shopee内专注于提供多媒体内容理解服务的团队，为电商、直播、短视频等业务提供支持。MMU团队需要支持公司不同业务场景对多媒体理解的需求。以向量检索为例，可能会有如

React 简介

🎬岸边的风：个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想，就是为了理想的生活!目录ComponentJSXMultiplecomponentsprops:passingdatatocomponentsSomenotes我们现在将开始入门的可能是本课程最重要的主题，即React-库。让我们从制

ArmSom-W3开发板之PCIE的开发指南(一)

1.简介RK3588从入门到精通本⽂介绍RK平台配置pcie的方法开发板：ArmSoM-W32、PCIE接口概述PCIe（PeripheralComponentInterconnectExpress）是一种用于连接计算机内部组件的高速接口标准。以下是关于PCIe接口的简要介绍：高速传输：PCIe接口提供了高速的数据传输

0018Java程序设计-springboot智慧环卫养管作业平台

文章目录摘要目录系统设计开发环境摘要本智慧环卫养管作业平台就是建立在充分利用现在完善科技技术这个理念基础之上，并使用IT技术进行对环卫养管作业的管理，从而保证环卫养管作业能够高效的进行，可以实现环卫养管作业的在线管理，这样保证了资源共享效率的最优化，通过系统的管理，使系统的使用率达到最大化。论文采用图文论述方法，通过与

vite+vue3+ts项目基础配置

1.配置项目启动自动打开浏览器在package.json文件中："scripts":{"dev":"vite",//项目初始化之后默认是这样的-->"dev":"vite--open",//改成这样，加上--open,这样是默认打开浏览器页面},2.项目中eslint校验工具的配置首先安装eslintpnpmiesli

python机器人编程——用python实现一个写字机器人

目录一、前言二、整体框架2.1系统构成2.2硬件介绍2.2.1主要组成部分2.2.2机械结构2.2.3驱动及控制主板PS电机驱动原理简介:2.2.4其余部分2.3机器人python程序框架2.3.1通信服务模块2.3.2消息处理模块2.3.3轨迹解析模块2.3.4机械臂逆解模块2.3.5写字板模块三、机械臂的建模3.1

问道管理：机器人产业迎催化 黄金价格或将突破前高

昨日，沪指盘中震动下探，一度跌近1%逼近3100点，尾盘逐步止跌；深成指、创业板指均跌超1%。截至收盘，沪指跌0.45%报3123.07点，深成指跌1.14%报10255.87点，创业板指跌1.14%报2027.73点，科创50指数跌1.39%；两市合计成交6982亿元，北向资金净卖出近66亿元。行业方面，软件、轿车、

如何利用Java实现 AI 人脸融合特效

Java实现AI人脸融合特效项目背景AI人脸融合特效的原理代码实现第一步：调用token接口人脸融合部分工具类最终效果图项目背景最近自从chat-gpt爆火以来，AI技术在人工智能领域持续迭代的创新，为人们的生活带来了许多震撼的应用。比如其中的，AI人脸融合特效，在各大抖音、B站等平台上，越来越火热，基于这，我也打算利

使用 Next.js、Langchain 和 OpenAI 构建 AI 聊天机器人

在当今时代，将AI体验集成到您的Web应用程序中变得越来越重要。LangChain与Next.js的强大功能相结合，提供了一种无缝的方式来将AI驱动的功能引入您的应用程序。在本指南中，我们将学习如何使用Next.js，LangChain，OpenAILLM和VercelAISDK构建AI聊天机器人。文章目录Langch

热文推荐
  1. 大型游戏动作竞技游戏开发和体感VR/AR游戏开发：创造引人入胜的虚拟世界

    大型游戏动作竞技游戏和体感VR/AR游戏都代表了游戏开发领域的最新趋势。它们提供了高度沉浸式的娱乐体验，结合了视觉、听觉和体感互动。在本文中，我们将探讨如何开发这两种类型的游戏，并介绍其关键特点和开发流程。大型游戏动作竞技游戏的特点高品质图形：这些游戏通常具有引人入胜的3D图形，精美的场景和角色模型。多人在线模式：大多

  2. 运维：Powershell面向对象编程简介

    运维/powershellPowershell面向对象编程简介作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263邮箱：291148484@163.com本文地址：https://blog.csdn.net/qq_28550263/article/details/13287

  3. Day46：项目-购物车案例

    购物车案例准备工作首页默认加载，其余页面懒加载调用defineStore方法构建store入口main做对应配置，找指南，快速开始，把elementplus引入进来import{createApp}from"vue";import{createPinia}from"pinia";import"./style.css";

  4. 微信小程序——生命周期详解（代码解读）

    ✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。🍎个人主页：JavaFans的博客🍊个人信条：不迁怒，不贰过。小知识，大智慧。💞当前专栏：微信小程序学习分享✨特色专栏：国学周更-心性养成之路🥭本文内容：微信小程序——使用Vant组件实现Popup弹出层（各位置弹出详细代码分

  5. 卷积神经网络（一）

    文章目录前言卷积层多通道池化层代码前言从外行者角度看卷积神经网络会说无非就是卷积层后面跟着一个池化层，但是深入代码实际编写卷积神经网络总是有些困难的。其中包括各种细节比如数据格式、尺寸变化、运算规定等。参考：{{Citejournal|last1=Zhang|first1=Aston|last2=Lipton|firs

  6. tcp_v4_connect函数的解析

    源码：inttcp_v4_connect(structsock*sk,structsockaddr*uaddr,intaddr_len){//解析输入的地址结构structsockaddr_in*usin=(structsockaddr_in*)uaddr;//获取TCP协议栈的全局death_row对象structi

  7. STM32H5开发(5)----串口打印配置

    STM32H5开发----4.开发板介绍概述样品申请硬件准备生成例程配置调试口代码生成配置项目配置调试配置串口重定向打印测试结果概述在使用STM32CUBEIDE开发STM32H5项目时，串口打印被证明是一项极其有益的调试工具，能够在开发过程中实时输出信息和调试数据，起到了至关重要的作用。通过充分利用串口打印功能，开发

  8. Netty面试题(一)

    文章目录前言一、BIO、NIO和AIO的区别？二、NIO的组成？三、Netty的特点？总结前言BIO、NIO和AIO的区别？NIO的组成？Netty的特点？一、BIO、NIO和AIO的区别？BIO：一个连接一个线程，客户端有连接请求时服务器端就需要启动一个线程进行处理。线程开销大。伪异步IO：将请求连接放入线程池，一对

  9. 从零学算法（剑指 Offer 33）

    输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回true，否则返回false。假设输入的数组的任意两个数字都互不相同。参考以下这颗二叉搜索树：5/\26/\13示例1：输入:[1,6,3,2,5]输出:false示例2：输入:[1,3,2,6,5]输出:true我的思路：二叉搜索树就是左节点都