Echarts在线免费图表

 
            let axisData= ["保险公司", "再保险公司", "自保公司", "互助保险组织", "再保险共同体", "劳合社", "辛迪加"]
let seriesDataName= ["类目1", "类目2", "类目3", "类目4", "类目5"]
let seriesData= [
         [49, 23, 6, 8, 17, 26, 76],
         [125, 45, 16, 14, 19, 16, 106],
         [234, 58, 26, 24, 22, 36, 200],
         [234, 58, 24, 34, 42, 96, 170],
         [234, 50, 24, 58, 87, 22, 324]
      ]
let totalData =  [876, 234, 76, 138, 187, 196, 876]
let colorArr =  ["#0388EA", "#03B3EA", "#47C9EF", "#88D8EF", "#BEEAFF"]


option = {
    backgroundColor: '#0c2d55',
   tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
   },
   grid: {
      top: '3%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         axisLine: {
            show: true,
            lineStyle: {
               color: '#1B6DB5',
               width: 2
            },
         },
         offset: 10,
         axisTick: {
            show: false,
            length: 9,
            // alignWithLabel: true,
            lineStyle: {
               color: '#748EAB',
            },
         },
         axisLabel: {
            interval: 0,
            fontFamily: 'siyuan',
            fontSize: 20,
            color: '#fff',
            fontWeight: 'bold'
            // rotate: -30
         },
         data: axisData
      }
   ],
   yAxis: [
      {
         type: 'value',
         axisLine: {
            show: false,
            lineStyle: {
               color: '#1B6DB5',
               width: 2
               // color: 'rgba(52, 51, 51, 1)',
            },
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: 'rgba(52, 51, 51, 1)',
            },
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: false,
            fontFamily: 'siyuan',
            fontSize: 20,
            color: '#fff',
            fontWeight: 'bold'
         },
         min: 0,
      }
   ],
   series: [
      {
         name: '总计',
         type: 'bar',
         barWidth: '50',
         barGap: '-100%',
         data: totalData,
         label: {
            normal: {
               show: true,
               position: 'top',
               fontFamily: 'siyuan',
               fontSize: 20,
               color: '#fff',
               fontWeight: 'bold'
            }
         }
      }, {
         name: seriesDataName[0],
         type: 'bar',
         barWidth: '50',
         stack: 'group1',
         itemStyle: {
            color: colorArr[0],
            borderColor: 'rgba(11,45,103,0.2)',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 5,
            shadowOffsetY: 5
         },
         data: seriesData[0],
      }, {
         name: seriesDataName[1],
         type: 'bar',
         barWidth: '50',
         stack: 'group1',
         itemStyle: {
            color: colorArr[1],
            borderColor: 'rgba(11,45,103,0.2)',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 5,
            shadowOffsetY: 5

         },
         data: seriesData[1],
      }, {
         name: seriesDataName[2],
         type: 'bar',
         barWidth: '50',
         stack: 'group1',
         itemStyle: {
            color: colorArr[2],
            borderColor: 'rgba(11,45,103,0.2)',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 5,
            shadowOffsetY: 5
         },
         data: seriesData[2],
      }, {
         name: seriesDataName[3],
         type: 'bar',
         barWidth: '50',
         stack: 'group1',
         itemStyle: {
            color: colorArr[3],
            borderColor: 'rgba(11,45,103,0.2)',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 5,
            shadowOffsetY: 5
         },
         data: seriesData[3],
      }, {
         name: seriesDataName[4],
         type: 'bar',
         barWidth: '350',
         stack: 'group1',
         itemStyle: {
            color: colorArr[4],
            borderColor: 'rgba(11,45,103,0.2)',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 5,
            shadowOffsetY: 5
         },
         data: seriesData[4],
      }
   ]
};