Echarts在线免费图表

 
                option = {
      backgroundColor: '#041F4A', 
      xAxis: {
        type: 'category',
        data: ['银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险'],
        axisLine: {
          show: true,
          onZero: true,
          symbol: "none",
          lineStyle: {
            color: "#e5e5e5"
          }
        },
        axisTick: {
          show: false
        },
      },
      yAxis: {
        show: false,
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      //图表与容器的位置关系
      grid: {
        left: '3%',   // 与容器左侧的距离
        right: '3%', // 与容器右侧的距离
        top: '11%',   // 与容器顶部的距离
        bottom: '12%', // 与容器底部的距离
      },
      series: [
        {
          data: [52, 60, 45, 38, 37, 51, 12, 20, 15, 62, 60, 45],
          type: 'bar',
          backgroundStyle: {
            color: "rgba(111, 111, 22, 1)"
          },
          //坐标轴显示器的文本标签
          label: {
            show: true,
            position: 'top',
            color: '#e5e5e5',
            zlevel: 4,
            z: 10,
          },
          barWidth:30,
          //柱条颜色
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, color: 'rgba(242,7,7,0.9)' // 0% 处的颜色
                }, {
                  offset: .8, color: 'rgba(7,242,128,0.3)' // 100% 处的颜色
                }, {
                  offset: 1, color: 'rgba(242,7,228,0.3)' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          animationEasing: "linear",
          animationEasingUpdate: "quadraticIn",  //数据更新时的缓动效果
          animationDurationUpdate: 300,  //数据更新动画的时长
          animation: true,  //开启动画
          animationDuration: 0,
          z: 1,          
        },
        {
          // 值分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#0F375F",
            },
          },
          symbolRepeat: "fixed",
          symbolMargin: 3,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [30, 3],
          symbolPosition: "start",
          symbolOffset: [0, -1],
          // symbolBoundingData: this.total,
          data: [52, 60, 45, 38, 30, 51, 12, 20, 15, 62, 60, 45],
          width: 25,
          z: 0,
          zlevel: 3,
        },
        {
          //辅助背景图形
          name: "背景条",
          type: "bar", //pictorialBar
          barWidth: "30",
          barGap: "-100%",
          itemStyle: {
            normal: {
              borderWidth: 0,
              color: "rgba(146,158,48,0.2)",
            },
            barBorderRadius: 10,
          },
          data: [62, 62, 62, 62, 62, 62, 62, 62, 62, 62, 62, 62],
          z: 0,
          zlevel: 0,
        },
        {
          // 背景分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#0F375F",
            },
          },
          symbolRepeat: "fixed",
          symbolMargin: 3,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [30, 3],
          symbolPosition: "start",
          symbolOffset: [0, -1],
          // symbolBoundingData: this.total,
          data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
          width: 25,
          z: 0,
          zlevel: 1,
        },
      ]
    };