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,

},

],

};

相关推荐
程序员黑豆2 小时前
Java包装类:基本类型与对象的桥梁
java·前端·ai编程
hsjiasb4 小时前
FreeRTOS学习(二十七)——任务栈与栈溢出检测
开发语言·stm32·学习·学习笔记·freertos
bugcome_com4 小时前
JWT 知识小课堂:从入门到精通,一文吃透 JSON Web Token
前端·json
To_OC5 小时前
写了三天 Next.js,我的 React 世界观被拆了又装回去
前端·全栈·next.js
独泪了无痕5 小时前
viewer.js 安装与配置指南:实现图片预览功能
前端·vue.js
丰锋ff5 小时前
3.1 Qt事件之事件处理器
开发语言·qt
多弗朗皮卡丘5 小时前
C语言梦开始的地方7:函数
c语言·开发语言
月华路6 小时前
G1 垃圾回收:脏卡队列、记忆集与并发精化线程机制
java·开发语言
gugucoding6 小时前
47. 【Java】Java内存模型(JMM)与可见性
java·开发语言
m0_380743876 小时前
从零调用 Claude 教程
开发语言·python·node.js