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,

},

],

};

相关推荐
Funlang15 分钟前
给机器写的 JavaScript 造个笼子
开发语言·javascript·ecmascript
普通人619 分钟前
PHP文件读写完全指南
开发语言·php·1024程序员节
古茗前端团队30 分钟前
由 key 引发的思考
前端·javascript·react.js
kyriewen1 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多1 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区1 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
坤坤子吖1 小时前
Linux网络编程:TCP服务器的多进程与多线程实现
linux·服务器·开发语言·网络·c++·笔记·学习
一晌小贪欢2 小时前
Python基础:第 09 篇 · while 循环:重复直到不满足
开发语言·c++·python·数据可视化·面向对象·python办公
xiaoye-duck2 小时前
《C++ 项目:手写大模型接入 SDK》LLMManager架构设计与实现
开发语言·网络·c++·语言模型
一条大祥脚3 小时前
CuTe 与 CuTe DSL:从 C++ 模板元编程到 Python DSL 的 GPU 编程演进
开发语言·c++·python·cutlass·cute·cute dsl