Echarts在线免费图表

 
            const resData = {
   yAxisData: ['测试1','测试2','测试3','测试4','测试5'],
   seriesData: [65,68,70,76,96]
}
if (!resData || !resData.yAxisData || resData.yAxisData.length == 0) {
   resData = {
      yAxisData: [''],
      seriesData: [0]
   }
}
option = {
   backgroundColor:'#fff',
   grid: {
      left: "20px",
      right: "25px",
      top: "16px",
      bottom: "15px",
      containLabel: true,
   },
   xAxis: [{
      min: 0,
      max: 100,
      axisLine: {
         show: true,
         lineStyle: {
            color: "#DCDFE6",
         },
      },
      axisLabel: {
         formatter: '{value} %',
         textStyle: {
            color: "#15161B",
         },
      },
      show: true,
      type: "value",
      axisTick: {
         show: false,
      },
      splitLine: {//纵向分隔线
         show: true,
         lineStyle: {
            color: '#DCDFE6',
         }
      },
   }, {
      type: 'value',
      axisLine: {
         show: true,
         lineStyle: {
            color: "#DCDFE6",
         },
      }
   }],
   yAxis: [{
      data: resData.yAxisData,
      axisLine: {
         lineStyle: {
            color: "#DCDFE6",
         },
      },
      axisLabel: {
         textStyle: {
            color: "#15161B",
         },
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
   }],
   dataZoom: [
      {
         type: 'inside', //滑动条
         show: true,      //开启
         yAxisIndex: 0,
      }
   ],
   series: [
      {
         name: "水库",
         type: "bar",
         stack: "all",
         barWidth: 12,
         data: resData.seriesData,
         itemStyle: {
            color: "#5C92FF"
         },
      },
   ],
};