Echarts在线免费图表

 
            let lineColor = "rgba(40,158,255,0.2)";
let leftVal = [0.28, 75.75, 5.4, 26.14, 42.81];
let rightVal = [0.31, 77.92, 7.3, 10.81, 20.97];
let leftName = [
   "单位资产售电量",
   "全员劳动生产率",
   "流动资产周转率",
   "管理类费用占比",
   "“三清理两提高”完成率",
];
let rightName = ["千瓦时/元", "万元/人·年", "%", "%", "%"];
let Xdata = [
   "发展部\n财务部",
   "人资部",
   "财务部",
   "财务部",
   "财务部",
];
option = {
   backgroundColor: "black",
   color: ["#00deff", "#00deff"], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色
   tooltip: {
      trigger: "",
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      extraCssText:
         "box-shadow: inset 0px 0px 12px 10px rgba(62,123,250,0.1)",
      backgroundColor: "#001A4E",
      borderColor: "#2F63EF",
      borderWidth: 1,
   },
   legend: {
      selectedMode: false,
      show: true,
      top: 12,
      itemWidth: 8,
      itemHeight: 8,
      right: 20,
      // icon: 'rect',
      textStyle: {
         color: "red",
         fontSize: 14,
      },
   },
   // title: {
   //     text: this.chartsData.unit,
   //     padding: [18, 0],
   //     textStyle: {
   //         color: 'red',
   //         fontSize: 16,
   //     },
   // },

   grid: [
      {
         show: false,
         left: "3%",
         top: "15%",
         bottom: "8%",
         containLabel: true,
         width: "40%",
      },
      {
         show: false,
         left: "50%",
         top: "15%",
         bottom: "15%",
         width: "0%",
      },
      {
         show: false,
         left: "55%",
         top: "15%",
         bottom: "8%",
         containLabel: true,
         width: "40%",
      },
      {
         gridindex: 3,
         show: false,
      },
   ],

   xAxis: [
      {
         type: "value",
         triggerEvent: true,
         inverse: true,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         position: "bottom",
         axisLabel: {
            show: true,
            textStyle: {
               color: "red",
               fontSize: 12,
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: lineColor,
            },
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: lineColor,
            },
         },
      },
      {
         gridIndex: 1,
         show: false,
      },
      {
         gridIndex: 2,
         type: "value",
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         position: "bottom",
         axisLabel: {
            show: true,
            textStyle: {
               color: "red",
               fontSize: 12,
            },
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: lineColor,
            },
         },
      },
      {
         gridIndex: 3,
         type: "value",
         show: false,
      },
   ],

   yAxis: [
      {
         type: "category",
         position: "left",
         data: leftName,
         axisTick: {
            show: false,
         },
         inverse: true,
         axisLine: {
            show: false,
         },
         axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
               color: "#03A5B3",
               fontSize: 200,
               fontWeight: "bold",
            },
         },
         axisLabel: {
            //让x轴左边的数显示为正数
            rich: {
               name: {
                  "font-family":
                     "SourceHanSansCN-Regular",
                  fontSize: 14,
                  color: "#C0E8FF",
                  opacity: 0.5,
               },
               val: {
                  "font-family": "PangMenZhengDao",
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#00deff",
               },
            },
            formatter: (name, i) => {
               return `{name|${name}}`;
            },
         },
      },
      {
         gridIndex: 1,
         type: "category",
         inverse: true,
         position: "left",
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#C0E8FF",
               fontSize: 14,
            },
         },
         data: Xdata.map(function (value) {
            return {
               value: value,
               textStyle: {
                  align: "center",
               },
            };
         }),
      },
      {
         type: "category",
         gridIndex: 2,
         position: "right",
         data: rightName,
         inverse: true,
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         axisLabel: {
            //让x轴左边的数显示为正数
            rich: {
               name: {
                  "font-family":
                     "SourceHanSansCN-Regular",
                  fontSize: 14,
                  color: "#C0E8FF",
                  opacity: 0.5,
               },
               val: {
                  "font-family": "PangMenZhengDao",
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#00deff",
               },
            },
            formatter: (name, i) => {
               return `{name|${name}} `;
            },
         },
      },
      {
         gridIndex: 3,
         type: "category",
         inverse: false,
         position: "left",
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "blue",
               fontSize: 12,
            },
         },
         data: Xdata,
      },
   ],

   series: [
      {
         name: "上年累计数",
         type: "bar",
         stack: "one",
         realtimeSort: false,
         barGap: 12,
         barWidth: 12,
         yAxisIndex: 0,
         label: {
            normal: {
               show: false,
               position: "inside",
               textStyle: {
                  color: "#03A5B3",
                  fontSize: 11,
               },
            },
            emphasis: {
               show: true,
               position: "inside",
               offset: [0, 0],
               textStyle: {
                  color: "red",
                  fontSize: 12,
               },
            },
         },
         itemStyle: {
            normal: {
               color: this.color1,
            },
         },
         data: leftVal,
      },

      {
         name: "本年累计数",
         stack: "right",
         type: "bar",
         realtimeSort: false,
         barGap: 12,
         barWidth: 12,
         xAxisIndex: 2,
         yAxisIndex: 2,
         label: {
            normal: {
               show: false,
               position: "inside",
               textStyle: {
                  color: "red",
                  fontSize: 12,
               },
            },
            emphasis: {
               show: true,
               position: "inside",
               offset: [0, 0],
               textStyle: {
                  color: "red",
                  fontSize: 12,
               },
            },
         },
         itemStyle: {
            normal: {
               color: 'rgba(3, 165, 179)',
            },
         },
         data: rightVal,
      },
   ],
};