双向双柱图echarts 配置项内容和展示

       var xData = [
     "A高速公路建设项目",
     "B高速公路建设项目",
     "C高速公路建设项目",
 ];

 var lineData = [100, 100, 100];

 var lastYearData = [57, 18, 32];
 var thisYearData = [40, 25, 32];
 var timeLineData = [1];
 var Y = thisYearData.map((item) => {
     return 100 - item;
 });

 var a = [45, 36, 25];
 var b = [72, 31, 32];
 var t = lastYearData.map((item) => {
     return 100 - item;
 });
 var z = a.map((item) => {
     return 100 - item;
 });
 var h = b.map((item) => {
     return 100 - item;
 });

 let colors = [{
         borderColor: "#1BCC98",
         start: "#1BCC98",
         end: "#1BCC98",
     },
     {
         borderColor: "#3185FF",
         start: "#3185FF",
         end: "#3185FF",
     },
 ];
 let borderData = [];
 let scale = 2;
 borderData = xData.map((item) => {
     return scale;
 });
 option = {

     baseOption: {
         backgroundColor: '#000E1A',
         timeline: {
             show: false,
             top: 0,
             data: [],
         },
         //  tooltip: {
         //      show: true,
         //      trigger: "axis",
         //      axisPointer: {
         //          type: "shadow",
         //      },
         //  },
         tooltip: {
             formatter: function(parms) {
                 var str;
                 if (parms.color != "#171D71") {
                     console.log(parms.marker);
                     str =

                         parms.name +
                         "</br>" +
                         "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                         parms.color.colorStops[0].color +
                         ";'></span>" +
                         "" +
                         parms.seriesName +
                         " : " +
                         parms.value +
                         "%";

                 }
                 return str;
             },
         },
         legend: [{
                 top: "5%",
                 //   bottom: "5%",
                 left: "18%",
                 itemWidth: 20,
                 itemHeight: 10,

                 // icon: "horizontal",
                 textStyle: {
                     color: "#c9c9c9",
                     fontSize: 12,
                 },
                 data: ["安全风险完工率", "污染源工点完工率"],
             },
             {
                 top: "5%",
                 //   bottom: "5%",
                 right: "16%",
                 itemWidth: 20,
                 itemHeight: 10,

                 // icon: "horizontal",
                 textStyle: {
                     color: "#c9c9c9",
                     fontSize: 12,
                 },
                 data: ["安全风险源开工率", "污染源工点开工率"],
             },
         ],
         grid: [{
                 show: false,
                 left: "5%",
                 right: "10%",
                 top: "15%",
                 bottom: "5%",
                 containLabel: true,
                 width: "37%",
             },
             {
                 show: false,
                 left: "52%",
                 top: "15%",
                 bottom: "5%",
                 width: "0%",
             },
             {
                 show: false,
                 right: "4%",
                 top: "15%",
                 bottom: "5%",
                 containLabel: true,
                 width: "37%",
             },
         ],
         xAxis: [{
                 type: "value",
                 inverse: true,
                 min: 0,
                 max: 100,
                 axisLine: {
                     show: false,
                 },
                 axisTick: {
                     show: false,
                 },
                 position: "top",
                 axisLabel: {
                     show: true,
                     color: "#c9c9c9",
                 },
                 splitLine: {
                     show: true,
                     lineStyle: {
                         color: "#324785",
                     },
                 },
                 axisLabel: {
                     formatter: "{value}%",
                     textStyle: {
                         color: "#c9c9c9",
                         fontSize: 12,
                     },
                 },
             },
             {
                 gridIndex: 1,
                 show: false,
             },
             {
                 min: 0,
                 max: 100,
                 gridIndex: 2,
                 axisLine: {
                     show: false,
                 },
                 axisTick: {
                     show: false,
                 },
                 position: "top",
                 axisLabel: {
                     show: true,
                     color: "#c9c9c9",
                 },
                 splitLine: {
                     show: true,
                     lineStyle: {
                         color: "#324785",
                     },
                 },
                 axisLabel: {
                     formatter: "{value}%",
                     textStyle: {
                         color: "#c9c9c9",
                         fontSize: 12,
                     },
                 },
             },
         ],
         yAxis: [{
                 type: "category",
                 inverse: true,
                 position: "right",
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "#324785",
                         fontSize: 12,
                     },
                 },

                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     show: false,
                 },
                 data: xData,
             },
             {
                 gridIndex: 1,
                 type: "category",
                 inverse: true,
                 position: "left",
                 axisLine: {
                     show: false,
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     show: true,
                     padding: [30, 0, 0, 0],
                     textStyle: {
                         color: "#ffffff",
                         fontSize: 12,
                     },
                     align: "center",
                 },
                 data: xData.map(function(value) {
                     return {
                         value: value,
                         textStyle: {
                             align: "center",
                         },
                     };
                 }),
             },
             {
                 gridIndex: 2,
                 type: "category",
                 inverse: true,
                 position: "left",
                 axisLine: {
                     show: true,
                     lineStyle: {
                         color: "#324785",
                     },
                 },
                 axisTick: {
                     show: false,
                 },
                 axisLabel: {
                     show: false,
                 },
                 data: xData,
             },
         ],
         series: [],
     },
     options: [],
 };

 option.baseOption.timeline.data.push(timeLineData[0]);
 option.options.push({
     series: [{
             name: "安全风险完工率",
             type: "bar",
             barWidth: 40,
             stack: "1",
             itemStyle: {
                 normal: {
                     fontSize: 12,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                             offset: 0,
                             color: colors[0].start,
                         },
                         {
                             offset: 1,
                             color: colors[0].end,
                         },
                     ]),
                 },
             },
             label: {
                 normal: {
                     show: false,
                 },
             },
             data: lastYearData,
             animationEasing: "elasticOut",
         },

         {
             name: "安全风险完工率",
             type: "bar",
             barWidth: 40,
             stack: "1",
             itemStyle: {
                 normal: {
                     color: "#171D71",
                     fontSize: 12,
                 },
             },
             data: t,
         },
         {
             name: "污染源工点完工率",
             type: "bar",
             barWidth: 40,
             stack: "3",
             itemStyle: {
                 normal: {
                     fontSize: 12,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                             offset: 0,
                             color: "#76CF5B",
                         },
                         {
                             offset: 1,
                             color: "#76CF5B",
                         },
                     ]),
                 },
             },
             label: {
                 normal: {
                     show: false,
                 },
             },
             data: a,
             animationEasing: "elasticOut",
         },
         {
             name: "污染源工点完工率",
             type: "bar",
             barWidth: 40,
             stack: "3",
             itemStyle: {
                 normal: {
                     color: "#171D71",
                     fontSize: 12,
                 },
             },
             data: z,
         },
         {
             name: "安全风险源开工率",
             type: "bar",
             stack: "2",
             barWidth: 40,
             xAxisIndex: 2,
             yAxisIndex: 2,
             itemStyle: {
                 normal: {
                     fontSize: 12,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                             offset: 0,
                             color: colors[1].start,
                         },
                         {
                             offset: 1,
                             color: colors[1].end,
                         },
                     ]),
                 },
             },
             label: {
                 normal: {
                     show: false,
                 },
             },
             data: thisYearData,
             animationEasing: "elasticOut",
         },
         {
             name: "安全风险源开工率",
             type: "bar",
             xAxisIndex: 2,
             yAxisIndex: 2,
             barWidth: 40,
             stack: "2",
             itemStyle: {
                 normal: {
                     color: "#171D71",
                     fontSize: 12,
                 },
             },
             data: Y,
         },
         {
             name: "污染源工点开工率",
             type: "bar",
             barWidth: 40,
             xAxisIndex: 2,
             yAxisIndex: 2,
             stack: "4",
             itemStyle: {
                 normal: {
                     fontSize: 12,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                             offset: 0,
                             color: "#60DDF9",
                         },
                         {
                             offset: 1,
                             color: "#60DDF9",
                         },
                     ]),
                 },
             },
             label: {
                 normal: {
                     show: false,
                 },
             },
             data: b,
             animationEasing: "elasticOut",
         },
         {
             name: "污染源工点开工率",
             type: "bar",
             barWidth: 40,
             xAxisIndex: 2,
             yAxisIndex: 2,
             stack: "4",
             itemStyle: {
                 normal: {
                     color: "#171D71",
                     fontSize: 12,
                 },
             },
             data: h,
         },
     ],
 });