Echarts在线免费图表

 
            option = {
  backgroundColor: '#0a142f',
  color: ['#7262FD', '#FC5A5A'],
  tooltip: {
    confine: true,
  },
  grid: {
    left: '2%',
    right: '4%',
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  legend: {
    icon: 'rect',
    orient: 'horizontal',
    left: 'right',
    itemWidth: 12,
    itemHeight: 12,
    formatter: ['{a|{name}}'].join('\n'),
    textStyle: {
      fontSize: 12,
      color: '#6A93B9',
      height: 8,
      rich: {
        a: {
          verticalAlign: 'bottom',
        },
      },
    },
    data: ['已完成', '未完成'],
  },
  xAxis: {
    type: 'category',
    data: ['04-12', '04-14', '04-15', '04-16', '04-17', '04-18'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.45)',
      },
    },
    axisLabel: {
      fontSize: 12,
      color: '#6A93B9',
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [{
    type: 'value',
    min: 0,
    minInterval: 1,
    splitArea: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)',
        // type: 'dashed', // dotted 虚线
      },
    },
    axisLabel: {
      fontSize: 12,
      color: '#6A93B9',
      fontFamily: 'Bebas',
    },
  }, {
    type: 'value',
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
      formatter: '{value}%', // 右侧Y轴文字显示
      fontFamily: 'Bebas',
      color: '#6A93B9',
    },
    splitArea: {
      show: false,
    },
  }],
  series: [{
    type: 'bar',
    barWidth: 40,
    itemStyle: { barBorderRadius: [15, 15, 0, 0], },
    name: '已完成',
    data: [28, 51, 43, 43, 48, 15]
  }, {
    type: 'bar',
    barWidth: 40,
    itemStyle: { barBorderRadius: [15, 15, 0, 0], },
    name: '未完成',
    data: [28, 39, 36, 36, 31, 21]
  },
  ],
};