Echarts在线免费图表

 
            
let
   axisData = [
      "企业财产保险",
      "机动车辆保险",
      "工程保险",
      "责任保险",
      "企业财产保险",
   ]
let seriesData = [
   [12, 15, 3, 14, 11],
   [5, 12, 1, 7, 14],
]
option = {
   backgroundColor: '#0c2d55',
   tooltip: {
      show: false,
      formatter: "{b} <br> {c}%",
   },
   legend: {
      top: "2%",
      left: "21%",
      itemWidth: 34,
      itemHeight: 15,
      itemGap: 90,
      textStyle: {
         color: "#fff",
         fontSize: 16,
         fontWeight: "bold",
         padding: [0, 0, 0, 15],
      },
      data: [
         {
            name: "简单赔付率",
         },
         {
            name: "简单费用率",
         },
      ],
   },
   xAxis: [
      {
         type: "value",
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
   ],
   grid: {
      left: "7%",
      right: "0%",
      bottom: "8%",
      top: "14%",
      //是否包含坐标轴
      containLabel: true,
      //鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
   },
   yAxis: [
      {
         inverse: true,
         splitNumber: 5, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
         interval: 5, // 强制设置坐标轴分割间隔。
         //type: 'category',
         data: axisData,
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            lineStyle: {
               width: 2,
               color: "#23AEEB",
            },
         },
         axisLabel: {
            textStyle: {
               fontSize: 22,
               fontWeight: "bold",
               color: "#fff",
            },
         },
      },
   ],
   series: [
      {
         name: "简单赔付率",
         type: "bar",
         barWidth: 22,
         stack: "危货种类占比",
         label: {
            normal: {
               width: 62,
               height: 25,
               distance: 20,
               align: "center",
               verticalAlign: "middle",
               borderRadius: 5,
               backgroundColor: "#D66C83",
               show: true,
               fontSize: 14,
               position: "top",
               formatter: "{c}%",
               color: "#000",
               fontWeight: "bold",
            },
         },
         itemStyle: {
            normal: {
               color: {
                  type: "bar",
                  colorStops: [
                     {
                        offset: 0,
                        color: "#FB9E9A", // 0% 处的颜色
                     },
                     {
                        offset: 1,
                        color: "#AC336A", // 100% 处的颜色
                     },
                  ],
                  shadowBlur: 6,
                  shadowOffsetX: 3,
                  shadowColor: "rgba(255,255,255,0.54)",
                  globalCoord: false, // 缺省为 false
               },
            },
         },
         data: seriesData[0],
      },
      {
         name: "简单费用率",
         type: "bar",
         barWidth: 22,
         stack: "危货种类占比",
         itemStyle: {
            color: {
               type: "bar",
               colorStops: [
                  {
                     offset: 0,
                     color: "#EEC894", // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: "#FDD298", // 100% 处的颜色
                  },
               ],
               globalCoord: false, // 缺省为 false
               shadowBlur: 6,
               shadowOffsetX: 3,
               shadowColor: "rgba(255,255,255,0.54)",
            },
         },
         label: {
            normal: {
               width: 62,
               height: 25,
               distance: 20,
               fontSize: 14,
               fontWeight: "bold",
               align: "center",
               verticalAlign: "middle",
               borderRadius: 5,
               backgroundColor: "#F5CD96",
               show: true,
               position: "top",
               formatter: "{c}%",
               color: "#000",
            },
         },
         data: seriesData[1],
      },
      {
         type: "bar",
         stack: "危货种类占比",
         label: {
            fontSize: 16,
            fontWeight: "bold",
            show: true,
            position: "right",
            formatter: "{c}%",
            color: "#fff",
            padding: [0, 0, 0, 10],
         },
         data: [0],
      },
   ],
};