Echarts在线免费图表

 
            var bgImg =
    "data:image/png;base64,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"

option = {
    backgroundColor: '#05132d',
    grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '5%',
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: 'value',
          max: 20,
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: '12',
                color: '#fff',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ['当前班次生产进度：'],
          },
        ],
        series: [
          {
            name: 'bg',
            type: 'pictorialBar',
            barWidth: '20',
            silent: true,
            barCategoryGap: 20,
            symbol: 'image://' + bgImg,
            symbolClip: false,
            symbolBoundingData: 20,
            symbolSize: ['100%', '100%'],
            label: {
              show: true,
              position: 'insideRight',
              distance: 15,
              textStyle: { color: '#fff' },
            },
            data: [20],
          },
          {
            type: 'bar',
            showBackground: false,
            label: {
              show: true,
              position: 'insideRight',
              distance: 15,
              textStyle: { color: '#fff' },
            },
            barGap: '-10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(10, 64, 138, 0.8)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(10, 64, 138, 0.4)',
                  },
                ]),
              },
            },
            barWidth: 20,
            data: [10],
          },
        ],
};