Echarts在线免费图表

 
            var resData = {
   xAxisData:['单位1','单位2','单位3'],
   seriesData:[5,3,6],
   total:[10,7,9],
}
var colorT = "#34C783"
option = {
  tooltip: {
      show:true,
      trigger:'axis',
   },
   grid: {
      left: "20px",
      right: "20px",
      top: "60px",
      bottom: "30px",
      containLabel: true,
   },
   legend: {
      top: "24px",
      textStyle: {
      color: '#15161B'
      }
   },
   xAxis: {
      type: 'category',
      data: resData.xAxisData,
      axisTick: {
         show: false,
      },
      axisLabel: {
         show: true,
         color: "#15161B",
         rotate: 30,
         textStyle: {
            color: '#15161B',     
            fontSize: 10,
            fontWeight:500
         }
      },
      axisLine: {
      lineStyle: {
         color: "#DCDFE6",
      },
      }
   },
   yAxis: [{
      name: "个",
      type: 'value',
      min:0,
      nameTextStyle: {
         color: "#15161B",
         fontSize: 14,
      },
      lineStyle: {
         show: "none",
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "#DCDFE6",
         },
      },
      axisLabel: {
         show: true,
         color: "#15161B",
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "#DCDFE6",
         },
      }
   },{
      type: 'value',
      axisLine: {
      show: true,
      lineStyle: {
         color: "#DCDFE6",
      },
      }
   }],
   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: 20,
      barMinHeight: 3,
      z: 12,
      barGap: '10%',
      itemStyle: {
         color: colorT,
      },
      // 禁止移到柱状图上时柱状图颜色变浅
      emphasis: {
         disabled: true,
      },
      data: resData.seriesData,
   },{
      name: '问题总数',
      type: 'bar',
      barWidth: 20,
      barMinHeight: 3,
      barGap: '-100%', // Make series be overlap
      barCateGoryGap: '10%',
      itemStyle: {
         color:'#E3E3E4'
      },
      emphasis: {
         disabled: true,
      },
      data: resData.total,
   }]
};