Echarts在线免费图表

 
            const resData = {
   xAxisData: ['星期一', '星期二'],
   seriesData: [15, 20]
}


if (!resData || !resData.xAxisData || resData.xAxisData.length == 0) {
   resData = {
      xAxisData: [''],
      seriesData: [0]
   }
}
option = {
    backgroundColor:'#fff',
   tooltip: {
      show: true,
      trigger: 'axis',
   },
   grid: {
      left: "20px",
      right: "20px",
      top: "40px",
      bottom: "15px",
      containLabel: true,
   },
   legend: {
      show: true,
      right: 0
   },
   xAxis: {
      type: 'category',
      data: resData.xAxisData,
      axisTick: {
         show: false,
      },
      axisLabel: {
         show: true,
         color: "#15161B",
         rotate: 15,
         interval: 0,
         textStyle: {
            color: '#15161B',
            fontSize: 10,
            fontWeight: 500
         }
      },
      axisLine: {
         lineStyle: {
            color: "#DCDFE6",
         },
      }
   },
   yAxis: [{
      name: "%",
      type: 'value',
      min: 0,
      max: 100,
      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: 50,
      barMinHeight: 3,
      barGap: '10%',
      itemStyle: {
         color: "#5C92FF"
      },
      emphasis: {
         disabled: true,
      },
      data: resData.seriesData,
   }]
}