Echarts在线免费图表

 
            const dataOne = [{
		name: "道德宣讲",
		value: "30"
	},
	{
		name: "宣传教育",
		value: "27"
	},
	{
		name: "警示教育",
		value: "29"
	},
	{
		name: "文化活动",
		value: "28"
	},
]
const xData = dataOne.map((item) => item.name);
const myColor = ["#01FFFF", "#4C5FF5", "#FFE660", "#79F1FF"].reverse();
var attaData = [30, 14, 20, 38];
      var attackSourcesColor1 = myColor;
    var option = {
        backgroundColor:"#051C43",
        tooltip: {
          trigger: "axis",
          formatter: "宣传教育<br> {b}：     {c}户",
          backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
			textStyle: {
				color: '#fff'
			},
			borderColor: "rgba(18, 57, 60, .8)",
			axisPointer: {
				type: 'shadow',
				shadowStyle: {
					color: 'rgba(0, 11, 34, .2)',
				}
			},
        },
        grid: {
          x: 65,
          y: 40,
          x2: 20,
          y2: 20,
		  top: '2%',
		  bottom: '12%'
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#284685",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#DEEBFF",
			  fontSize: 12
            },
          },
          show: true,
          type: "value",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
			lineStyle: {
				color: 'rgba(40, 70, 133, .3)',
				type: 'solid'
			}
          },
        },
        yAxis: [{
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#284685",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#DEEBFF",
			  fontSize: 12
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
         show: true,
         data: attaData,
         offset: -35,
         position: "right",
         axisLabel: {
            lineHeight: 24,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#fff",
            formatter: "{value}",
         },
         axisLine: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 12,
            data: attaData,
			itemStyle: {
				normal: {
					barBorderRadius: [0, 20, 20, 0],
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: 'rgba(1, 255, 255, 1)' // 0% 处的颜色
					},
					{
						offset: 1,
						color: 'rgba(2, 127, 255, 1)' // 100% 处的颜色
					}
					]),
						// shadowColor: 'rgba(0,160,221,1)',
						// shadowBlur: 1,
					}
			  },
          },
          {
            name: "",
            type: "bar",
            barWidth: 12,
            barGap: "-100%",
            z: 0,
            itemStyle: {
              barBorderRadius: [0, 20, 20, 0],
              color: "#1045A8",
            },
            data: [100, 100, 100, 100],
          },
        ],
      };