Echarts在线免费图表

 
            const Data = ["武都区", "宕昌县", "文县", "康县", "西和县", "礼县", "成县", "徽县", "两当县"]
   const xzData = [200, 250, 370, 150, 350, 110, 110, 260, 100]
   const tclData = [150, 140, 300, 110, 260, 100, 150, 350, 110]
   const tbData = [80, 70, 80, 70, 80, 70, 80, 70, 90, 70]
option = {
   //你的代码
   backgroundColor:'#000',
   tooltip: {
      
      trigger: 'axis',
      backgroundColor: 'rgba(13,5,30,.6)',
      borderWidth: 1,
      borderColor: '#32A1FF',
      padding: 5,
      textStyle: {
         color: '#fff'
      }
   },
   legend: {
      itemWidth: 10,
      itemHeight: 10,
      top: 5,
      right: 30,
      icon: 'rect',
      textStyle: {
         color: '#c7d3e5'
      }
   },
   grid: {
      top: '14%',
      left: '5%',
      right: '5%',
      bottom: '5%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         data: Data,
         axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 14,
               interval: 0,
         },
         axisLine: {
               show: true,
               lineStyle: {
                  color: '#2D4377'
               }
         },
         axisTick: {
               show: false,
         },
         splitLine: {
               show: false,
               lineStyle: {
                  color: '#2D4377',
                  type: "dotted",
               }
         },
      }
   ],
   yAxis: [
      {
         type: 'value',
         name: "(人)",
         min: 0,
         position: 'left',
         nameTextStyle: {
               color: "#fff",
               fontSize: 14,
         },
         axisLine: {
               show: true,
               lineStyle: {
                  color: '#2D4377'
               }
         },
         axisTick: {
               show: false,
         },
         splitLine: {
               show: true,
               lineStyle: {
                  color: '#2D4377',
                  type: "dotted",
               }
         },
         axisLabel: {
               formatter: '{value}',
               textStyle: {
                  color: "#FFFFFF",
               }
         },
      }
   ],
   series: [
      {
         name: '新增人数',
         type: 'bar',
         barWidth: 10,
         data: xzData,
         barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
         barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
         itemStyle: {
               barBorderRadius: 4,
               barCategoryGap: '40%',
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "rgba(54, 220, 255, 0.8)",
                  },
                  {
                     offset: 1,
                     color: "rgba(41, 104, 233, 0.1)",
                  },
               ]),
         }
      },
      {
         name: '退出人数',
         type: 'bar',
         barWidth: 10,
         barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
         barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
         itemStyle: {
               barBorderRadius: 4,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "rgba(54, 255, 182, 0.8)",
                  },
                  {
                     offset: 1,
                     color: "rgba(6, 187, 61, 0.1)",
                  },
               ]),
         },
         data: tclData
      },
      {
         name: '停保人数',
         type: 'bar',
         barWidth: 10,
         barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
         barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
         itemStyle: {
               barBorderRadius: 4,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "rgba(234, 161, 84, 0.8)",
                  },
                  {
                     offset: 1,
                     color: "rgba(219, 162, 62, 0.1)",
                  },
               ]),
         },
         data: tbData
      },
   ]
};