echarts 柱状图包含右侧进度

javascript 复制代码
 const categories = ["ZSZQ-1标", "ZSZQ-2标", "ZSZQ-3标", "ZSZQ-4标"] ;

    const xuan = [60, 54, 96, 35];
    const pei = [74, 63, 54, 43];
    const kao = [64, 53, 74, 23];
option = {
    backgroundColor: '#0C1E49',
   tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        legend: {
            data: ["选(右轴)", "培", "考"],
            top: 6,
            right: 10,
            textStyle: { color: "#CFE2FF" },
        },
        grid: {
            left: "3%",
            right: "5%",
            bottom: "10%",
            top: "18%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                data: categories,
                axisTick: { show: false },
                axisLine: { lineStyle: { color: "#7FA7D8" } },
                axisLabel: { color: "#CFE2FF" },
            },
        ],
        yAxis: [
            {
                type: "value",
                min: 0,
                axisTick: {
                    show: true //隐藏X轴刻度
                },
                // 左轴根据数据自适应刻度,不设固定满刻度
                splitLine: { show: false },
                axisLine: {
                    lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
                },
                axisLabel: { color: "#CFE2FF" },
            },
            {
                type: "value",
                min: 0,
                max: 100,
                axisTick: {
                    show: true //隐藏X轴刻度
                },
                splitLine: { show: false },
                axisLine: {
                    lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
                },
                axisLabel: {
                    color: "#CFE2FF",
                    formatter: (val) => `${val}%`,
                },
            },
        ],
        series: [

            {
                name: "培",
                type: "bar",
                barWidth: 20,
                itemStyle: { color: "#29F19C", barBorderRadius:  [5,5, 0, 0], },
                data: pei,
                z: 1,
            },
            {
                name: "考",
                type: "bar",
                barWidth: 20,
                itemStyle: { color: "#F3BA61", barBorderRadius:  [5,5, 0, 0], },
                data: kao,
                z: 1,
            },
            {
                name: "选(右轴)",
                type: "bar",
                yAxisIndex: 1,
                barWidth: 20,
                itemStyle: { color: "#6DA5FF" ,
               //   barBorderRadius:  [10,10, 0, 0],
                 },
                showBackground: true,
                
                backgroundStyle: {
                   
                    color: "rgba(255,255,255,0.15)",
                },
                data: xuan,
                z: 1,
            },
        ],
};

const categories = "ZSZQ-1标", "ZSZQ-2标", "ZSZQ-3标", "ZSZQ-4标" ;

const xuan = 60, 54, 96, 35;

const pei = 74, 63, 54, 43;

const kao = 64, 53, 74, 23;

option = {

backgroundColor: '#0C1E49',

tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },

legend: {

data: "选(右轴)", "培", "考",

top: 6,

right: 10,

textStyle: { color: "#CFE2FF" },

},

grid: {

left: "3%",

right: "5%",

bottom: "10%",

top: "18%",

containLabel: true,

},

xAxis: [

{

type: "category",

data: categories,

axisTick: { show: false },

axisLine: { lineStyle: { color: "#7FA7D8" } },

axisLabel: { color: "#CFE2FF" },

},

],

yAxis: [

{

type: "value",

min: 0,

axisTick: {

show: true //隐藏X轴刻度

},

// 左轴根据数据自适应刻度,不设固定满刻度

splitLine: { show: false },

axisLine: {

lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线

},

axisLabel: { color: "#CFE2FF" },

},

{

type: "value",

min: 0,

max: 100,

axisTick: {

show: true //隐藏X轴刻度

},

splitLine: { show: false },

axisLine: {

lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线

},

axisLabel: {

color: "#CFE2FF",

formatter: (val) => `${val}%`,

},

},

],

series: [

{

name: "培",

type: "bar",

barWidth: 20,

itemStyle: { color: "#29F19C", barBorderRadius: 5,5, 0, 0, },

data: pei,

z: 1,

},

{

name: "考",

type: "bar",

barWidth: 20,

itemStyle: { color: "#F3BA61", barBorderRadius: 5,5, 0, 0, },

data: kao,

z: 1,

},

{

name: "选(右轴)",

type: "bar",

yAxisIndex: 1,

barWidth: 20,

itemStyle: { color: "#6DA5FF" ,

// barBorderRadius: 10,10, 0, 0,

},

showBackground: true,

backgroundStyle: {

color: "rgba(255,255,255,0.15)",

},

data: xuan,

z: 1,

},

],

};

相关推荐
Cx330❀2 分钟前
【MySQL基础】详解MySQL数据类型:底层原理、越界测试与最佳实践
linux·开发语言·数据库·c++·mysql
星恒随风6 分钟前
C++ string 入门(一)
开发语言·c++·笔记·学习
skywalk816312 分钟前
继续推进心语项目6.15 @CodeArts
开发语言·算法·编程
嵌入式-老费16 分钟前
esp32开发与应用(看门狗测试)
java·开发语言·数据库
不吃鱼的羊20 分钟前
DaVinci配置NVM模块
前端·javascript·网络
闫有尽意无琼20 分钟前
qt控件未指定父对象或delete致堆内存泄露
开发语言·qt
Cx330❀22 分钟前
【Linux网络】从零定制应用层协议:黏包问题、全双工缓冲区与 Jsoncpp 序列化深度解析
linux·运维·服务器·开发语言·网络·c++·人工智能
一坨阿亮23 分钟前
使用e-tree开发树形穿梭框
javascript·vue.js·elementui
山东布谷网络科技25 分钟前
海外直播语聊APP功能与UI升级的关键关注点
开发语言·ui·app store·谷歌上架·海外直播app开发·海外语聊平台搭建·多语言直播平台定制
江屿风27 分钟前
C++图论基础Bellman-Ford与spfa算法如何判断负环
开发语言·c++·笔记·算法·图论