Echarts在线免费图表

 
            option = {
  backgroundColor: '#0a142f',
  color: ['#00FBE7', '#FF8E22', '#333FFF', '#58CFFF'],
  tooltip: {
    confine: true,
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '10%',
    top: '10%',
  },
  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',
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.45)',
      },
    },
    axisLabel: {
      // interval:0,
      fontSize: 12,
      color: '#6A93B9',
    },
    // axisTick: {
    //   show: false,
    // },
    data: ['人物构造', '情节描述', '真实情况', '故事设定', '情感带入', '吸引读者'],
  },
  yAxis: {
    type: 'value',
    // min: 0,
    // minInterval: 1,
    nameTextStyle: {
      fontSize: 12,
      color: '#BAE7FF',
      align: 'center',
    },
    axisLine: { show: false },
    axisTick: { show: false },
    splitArea: { show: false },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)',
        // type: 'dashed', // dotted 虚线
      },
    },
    axisLabel: {
      fontSize: 12,
      color: '#6A93B9',
      fontFamily: 'Bebas',
    },
  },
  series: [
    { name: '红楼梦', type: 'bar', barWidth: 45, stack: 'total', data: [6, 8, 9, 3, 2, 5, 8] },
    { name: '水浒传', type: 'bar', barWidth: 45, stack: 'total', data: [1, 4, 5, 6, 3, 8, 7] },
    { name: '西游记', type: 'bar', barWidth: 45, stack: 'total', data: [5, 6, 7, 2, 5, 6, 3] },
    { name: '三国演义', type: 'bar', barWidth: 45, stack: 'total', data: [7, 4, 2, 9, 5, 7, 9] },
  ],
};