Echarts在线免费图表

 
            var resData = {
   xAxisData: ['单位1单位1单位1', '单位2', '单位3'],
   seriesData: [5, 3, 6],
}
let maxArr = []
let maxArr2 = []
if (!resData || !resData.xAxisData || resData.xAxisData.length == 0) {
   resData = {
      xAxisData: [''],
      seriesData: [0]
   }
   maxArr = [100000]
} else {
   const max = Math.max(...resData.seriesData)
   for (let i = 0; i < resData.seriesData.length; i++) {
      maxArr.push(100000)
      maxArr2.push(max + 5)
   }
}
option = {
   backgroundColor: '#000',
   tooltip: {
      trigger: 'axis',
   },
   grid: {
      left: "20px",
      right: "20px",
      top: "30px",
      bottom: "30px",
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: resData.xAxisData,
      axisTick: {
         show: false,
      },
      axisLabel: {
         show: true,
         color: "#ffffff",
         interval: 0,
         formatter: function (value) {
            if (value && value.length > 5) {
               value = value.replace(/\s/g, '').replace(/(.{5})/g, "$1\n");
               value = value.slice(0, value.length - 2)
            }
            return value
         },
         textStyle: {
            color: '#ffffff',
            fontSize: 10,
            fontWeight: 500,
         }
      },
      axisLine: {
         symbol: ['rect', 'circle'],
         symbolSize: [8, 8],
         lineStyle: {
            color: "#00E0FF",
         },
      }
   },
   yAxis: [{
      name: '个',
      nameTextStyle: { color: '#fff' },
      type: 'value',
      lineStyle: {
         show: "none",
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: true,
         symbol: ['rect', 'circle'],
         symbolSize: [8, 8],
         lineStyle: {
            color: "#00E0FF",
         },
      },
      axisLabel: {
         show: true,
         color: "#ffffff",
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "rgba(0, 224, 255, .5)",
         },
      }
   }, {
      type: 'value',
      lineStyle: {
         show: "none",
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
      splitLine: {
         show: false,
      }
   }],
   dataZoom: [{
      show: true,
      type: 'slider',
      height: 12,
      bottom: 10,
      handleSize: "80%",
      handleStyle: {
         color: "#d3dee5",
      },
      textStyle: {
         color: "#061423",
         fontSize: 10,
      },
      startValue: 0,
      endValue: 5,
      brushSelect: false,
   }, {
      type: 'inside',
      startValue: 0,
      endValue: 5,
   }],
   series: [
      {
         name: '方案类型分布',
         type: 'bar',
         barWidth: 24,
         barMinHeight: 3,
         z: 12,
         barGap: '10%',
         itemStyle: {
            color: "#FF9C00",
         },
         emphasis: {
            disabled: true,
         },
         label: {
            show: true,
            position: 'top',
            fontSize: 12
         },
         data: resData.seriesData,
      }, {
         name: '背景1',
         yAxisIndex: 0,
         tooltip: {
            show: false
         },
         type: 'bar',
         barWidth: 24,
         barMinHeight: 3,
         barGap: '-100%',
         barCateGoryGap: '10%',
         itemStyle: {
            color: 'rgba(0, 224, 255, 0)'
         },
         emphasis: {
            disabled: true,
         },
         data: maxArr2
      }, {
         name: '背景2',
         yAxisIndex: 1,
         tooltip: {
            show: false
         },
         type: 'bar',
         barWidth: 24,
         barMinHeight: 3,
         barGap: '-100%',
         barCateGoryGap: '10%',
         itemStyle: {
            color: 'rgba(0, 224, 255, .2)'
         },
         emphasis: {
            disabled: true,
         },
         data: maxArr
      }]
};