Echarts在线免费图表

 
            option = {
   backgroundColor: '#0a142f',
   color: ['#00FBE7', '#FF8E22', '#333FFF', '#58CFFF'],
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
         type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter(params) {	// 根据条件修改
      let unit = '个'
          let relVal = params[0].name
          for (let i = 0; i < 4; i++) {
              relVal += `<div ><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div class="g-p-r-20">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
          }
          return relVal
          }
   },
   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 虚线quanmei
         },
      },
      axisLabel: {
         fontSize: 12,
         color: '#6A93B9',
         fontFamily: 'Bebas',
      },
   },
   series: [
      { name: '红楼梦', type: 'bar', barWidth: 45, stack: 'total', z: 3,data: [6, 8, 9, 3, 2, 5, 8] },
      { name: '水浒传', type: 'bar', barWidth: 45, stack: 'total', z: 3,data: [1, 4, 5, 6, 3, 8, 7] },
      { name: '西游记', type: 'bar', barWidth: 45, stack: 'total',z: 3, data: [5, 6, 7, 2, 5, 6, 3] },
      { name: '三国演义', type: 'bar', barWidth: 45, stack: 'total', z: 3,data: [7, 4, 2, 9, 5, 7, 9] },
      {
         type: 'bar',
         barWidth: 45,
         barGap: '-100%',
         itemStyle: { color: '#264543', },
         data: [25, 25, 25, 25, 25, 25],
         z: 2,
      }, {
         type: 'bar',
         barWidth: 45,
         barGap: '-100%',
         itemStyle: { color: '#143b41', },
         data: [35, 35, 35, 35, 35, 35],
         z: 1,
      }, {
         type: 'bar',
         barWidth: 45,
         barGap: '-100%',
         itemStyle: { color: '#072a3d', },
         data: [45, 45, 45, 45, 45, 45],
         z: 0,
      }
   ],
};