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: [

{

type: "bar",

barWidth: 20,

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

data: pei,

z: 1,

{

type: "bar",

barWidth: 20,

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

data: kao,

z: 1,

{

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,

};