Echarts在线免费图表

 
            // let Ydata1 = [10, 10, 10]
// let Ydata2 = [55, 58, 67]
// let Ydata3 = [0, 60, 65]
let Ydata1 = [10, 55, 0]
let Ydata2 = [10, 58, 60]
let Ydata3 = [10, 67, 65]
option = {
   backgroundColor: 'rgba(39,46,74)',
   tooltip: {
      trigger: 'item',
   },
   grid: {
      left: '5%',
      top: '10%',
      right: '5%',
      bottom: '10%',
   },
   legend: {
      show: true,
      top: '5%',
      itemWidth: 30, // 图例标记的图形宽度。
      itemGap: 20, // 图例每项之间的间隔。
      itemHeight: 15, //  图例标记的图形高度。
      icon: "rect",
      textStyle: {
         color: '#fff',
         fontSize: 14,
         padding: [0, 8, 0, 8],
      }
   },
   xAxis: [{
      data: ["可控负荷占比（高压）", "可控用户覆盖率(高压)", "有序充电桩覆盖率"],
      axisLabel: {
         textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
         },
         margin: 30, //刻度标签与轴线之间的距离。
      },

      axisLine: {
         show: true, //不显示x轴
         lineStyle: {
            color: 'rgba(53,65,95,1)',
         }
      },
      axisTick: {
         show: false //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
         show: false
      }
   }],
   yAxis: [{
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(53,65,95,1)',
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
         },
      }
   }],
   series: [

      //柱体
      {
         name: "当前占比",
         type: "pictorialBar",
         barWidth: 30,
         symbolOffset: [-40, 0],
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         itemStyle: {
            normal: {
               //渐变色
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#85beef"
               },
               {
                  offset: 1,
                  color: "#85beef30"
               }
               ])
            }
         },
         // label: {
         //    normal: {
         //       show: true,
         //       position: [-35, -10, 0, 0],
         //       textStyle: {
         //          color: "rgba(0,171,255,1)",
         //          fontSize: 14
         //       }
         //    }
         // },
         data: Ydata1
      },
      {
         name: "2022年目标",
         type: "pictorialBar",
         barWidth: 30,
         symbolOffset: [0, 0],
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         itemStyle: {
            normal: {
               //渐变色
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#f1a1f8"
               },
               {
                  offset: 1,
                  color: "#f1a1f830"
               }
               ])
            }
         },
         // label: {
         //    normal: {
         //       show: true,
         //       position: [4, -10, 0, 0],
         //       textStyle: {
         //          color: "#fff",
         //          fontSize: 14
         //       }
         //    }
         // },
         data: Ydata2
      },
      {
         name: "2023年目标",
         type: "pictorialBar",
         barWidth: 30,
         symbolOffset: [40, 0],
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         itemStyle: {
            normal: {
               //渐变色
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#f8c789"
               },
               {
                  offset: 1,
                  color: "#f8c78930"
               }
               ])
            }
         },
         // label: {
         //    normal: {
         //       show: true,
         //       position: [45, -10, 0, 0],
         //       textStyle: {
         //          color: "#fff",
         //          fontSize: 14
         //       }
         //    }
         // },
         data: Ydata3
      }
   ]
};