Echarts在线免费图表

 
            let xData = [
        "社区矫正人员",
        "吸毒人员",
        "精神病患者",
        "刑满释放人员"
      ];
      let data1 = [2, 3, 2, 4];
      let option = {
        backgroundColor: "#02193F",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          backgroundColor: "rgba(3, 31, 71, .9)", //设置背景颜色
          borderColor: "rgba(3, 31, 71, .9)",
          formatter: "健康监测<br>{b1}：{c1}人",
        },
        grid: {
          left: "2%",
          right: "4%",
          top: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: xData,
          show: true,
          axisTick: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#1C82C5",
            },
          },
          axisLabel: {
            interval: 0,
            align: "center",
            rotate: "15",
            margin: "20",
            textStyle: {
              fontSize: 12,
              color: "#50A2C1",
            },
          },
        },
        yAxis: [
          {
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#1C82C5",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
                type: "solid",
              },
            },
            axisLabel: {
              color: "#DEEBFF",
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        legend: {
          show: false,
          top: "5%",
          left: "50%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          itemGap: 12, // 设置间距
        },
        series: [
          {
            // 三个最低下的圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [18, 4],
            symbolOffset: [0, 1],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2);
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(23, 225, 254, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 183, 255, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
          },
          // 下半截柱状图
          {
            name: "种植面积",
            type: "bar",
            barWidth: "18px",
            barGap: "-100%",
            itemStyle: {
              // lenged文本
              opacity: 0.7,
              color: function (params) {
                var a = params.name.slice(0, 2);
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(23, 225, 254, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(23, 225, 254, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: data1,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [18, 4],
            symbolOffset: [0, -1],
            z: 5,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2);

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(23, 225, 254, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 183, 255, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "#fff",
              lineHeight: 10,
            },
            symbolPosition: "end",
            data: data1,
          },
        ],
      };