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,

},

],

};

相关推荐
实心儿儿6 小时前
Qt — Qt 多线程
开发语言·qt
静默回滚6 小时前
iPhone照片电脑上打不开:HEIC解码从原理到WASM
前端
dsyyyyy11016 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
航飞光电市场经理7 小时前
人员定位系统“全栈自研”技术解析:从射频前端到定位引擎的架构拆解
前端·架构
Apifox7 小时前
Apifox 9 月更新|CLI 能力升级、GitLab 私有化部署接入与产品体验优化
前端·后端·测试
deli0077 小时前
随机乱跳为什么能画出完美三角形:混沌游戏分形实验室
前端
小小龙学IT7 小时前
Go 泛型(Generics)深度解析:从类型参数到生产实践
开发语言·数据库·golang
Gizzap_Tech7 小时前
国内官网增加英文版:URL、语言切换与 hreflang 怎么配置?
前端
hold?fish:palm7 小时前
45 二叉树的右视图
开发语言·c++·算法
MI_farmer7 小时前
Anaconda 安装在 D 盘但虚拟环境跑到 C 盘,以及 Conda PermissionError: WinError 5 的解决方法
c语言·开发语言·conda