Echarts在线免费图表

 
            
var lineData = {
   xdata: ["采集", "营销", "设备", "邮件"],
   valueList: [100, 3300, 485, 256]
}
var maxData = Math.max.apply(null, lineData.valueList);
var maxDataList = [];
for (var i = 0; i <lineData.valueList.length; i++) {
   maxDataList.push(maxData);
}
const img =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAEUSURBVEiJxZRNTsNADIU/ewbS2VZCYsNBOE4XvSOcgMMgTf6kJoV4zCJNl6zI4I31JEvf07Nn5Px2ngFKKa9ULFX9AIg4I4CIWE0DGzc6PigKQlUD7is3isjgeP0EYHCc6MUHFFgoNekuKzcKMlD+4QZgoEAEegQUNYCZmQOH+9Re2tx6ZH0FPQ7XeLVEQhAUZWJiT22L9TioB289eCuz2Cyz1eobN0qRDm4r0FtOFbosKzcWLx1A0GBMt6EK3dRWA4q2AEFC3Y8IbwGiBMkAsUQDyGSOHO+De2lTywDq6q2rt13orAmNaVBrQmN7640rp/fTSyJxebx8/nXMv5V8yVMiEReWPD6PpO9U9QamhymPjPwANMQdpWsqmcEAAAAASUVORK5CYII=";






option = {
   backgroundColor:"#282C34",
   // color: ["white"],
   legend: {
      top: "5%",
      right: "5%",
      // width:"50%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
         fontSize: 16,
         color: "#fff",
         fontWeight: "normal",
      },
      itemStyle: {
         color: "#65B765",
      },
      data: [
         {
            name: "",
            icon: "rect",
         },
      ],
   },
   title: [
      {
         subtext: "单位：万个",
         left: 10, // 距离左边位置
         top: "2%", // 距离上面位置
         subtextStyle: {
            // 设置二级标题的样式
            color: "#fff",
            fontSize: 16,
         },
      },
   ],
   grid: {
      left: "0%",
      right: "0%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
   },
   xAxis: {
      type: "value",
      max: maxData * 1.1,
      show: true,
      // 不显示轴线
      axisLine: {
         show: false,
      },
      // 不显示刻度线
      axisTick: {
         show: false,
      },
      splitLine: {
         // 网格线为虚线
         lineStyle: {
            type: "dashed",
            color: "rgba(255, 255, 255, 0.2)",
         },
         show: false,
      },
      axisLabel: {
         //x轴文字的配置
         show: false,
         textStyle: {
            color: "#fff",
         },
      },
   },
   yAxis: {
      type: "category",
      inverse: true,
      splitLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         color: "white",
         fontSize: 12,
         // margin: 40,
         margin: -50,
         width: 80,
         padding: [0, 0, 50, -20],
         align: "center",
         formatter: function (val, index) {
            let newIndex = index + 1;
            return "{one|" + newIndex + "} {a|" + "  " + val + "}";
         },
         rich: {
            a: {
               color: "#fff",
               fontSize: "12px",
               padding: [3.5, 2.5, 1, 2.5],
            },
            one: {
               backgroundColor: {
                  image: img,
               },
               color: "white",
               width: 20.5,
               height: 12.5,
               padding: [3.5, 13.5, 0, 14.5],
               borderRadius: 10,
               fontSize: "14",
            },
         },
      },

      data: lineData.xdata,
   },
   series: [
      {
         name: "光伏台区数",
         type: "bar",
         barWidth: 12,
         zlevel: 2,
         barGap: "-100%",
         label: {
            show: true,
            align: "left",
            // position: "right",
            position: [390, -25],//控制数值的位置
            color: "#FFFFFF",
            fontSize: 12,
            formatter: function (params) {
               return echarts.format.addCommas(params.value);
            },
         },

         itemStyle: {
            normal: {
               // borderRadius: [0, 6, 6, 0],
               color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "#65B765",
                     },
                     {
                        offset: 1,
                        color: "#65B765",
                     },
                  ],
               },
            },
         },
         data: lineData.valueList,
      },

      {
         type: "bar",
         barWidth: 12,
         itemStyle: {
            normal: {
               color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "rgba(2,155,255,0.1)",
                     },
                     {
                        offset: 1,
                        color: "rgba(2,155,255,0.1)",
                     },
                  ],
               },
            },
         },
         data: maxDataList,
      },
   ],
};