Echarts在线免费图表

 
            const colorList = ["#49D6F6", "#7AE89D", "#FFB169"];
  const dataList = [
    {
      name: '计划类',
      value: [
        { max: 30, value: 9, name: '杨丽' },
        { max: 30, value: 9, name: '张军' },
        { max: 30, value: 15.8, name: '马帅' },
        { max: 30, value: 20, name: '陈利' },
      ],
    },
    {
      name: '临时类',
      value: [
        { max: 30, name: '杨丽', value: 19, },
        { max: 30, name: '张军', value: 5, },
        { max: 30, name: '马帅', value: 12, },
        { max: 30, name: '陈利', value: 10, },
      ],
    },
    {
      name: '长久类',
      value: [
        { max: 30, name: '杨丽', value: 19, },
        { max: 30, name: '张军', value: 5, },
        { max: 30, name: '马帅', value: 12, },
        { max: 30, name: '陈利', value: 10, },
      ],
    },
  ];
  const fieldData = dataList[0].value;
  const landData = dataList[1].value;
  option = {
    color: colorList,
    legend:{
       show: true,
       top: 'bottom'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (prams) {
        return prams[0].name + '<br> 计划类:' + prams[0].data + '<br> 突发类:' + prams[1].data + '<br> 实时类:' + prams[2].data;
      },
    },
    grid: {
      left: '6%',
      right: '3%',
      top: '16%',
      bottom: '28%',
    },
    xAxis: [
      {
        type: 'category',
        data: landData.map((item) => {
          return item.name;
        }),
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: '#606266',
          interval: 0,
          margin: 10,
          align: 'center',
        },
      },
    ],
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#606266',
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '计划类',
        type: 'bar',
        backgroundStyle: {
          color: 'rgba(216, 229, 247, 0.55)',
          borderRadius: [8, 8, 8, 8],
        },
        itemStyle: {
          normal: {
            borderRadius: [12, 12, 12, 12],
          },
        },
        barWidth: '25',
        label: {
          show: true,
          color: colorList[0],
          position: 'outside',
        },
        data: fieldData.map((item) => {
          return item.value;
        }),
      },
      {
        name: '临时类',
        type: 'bar',
        backgroundStyle: {
          color: 'rgba(216, 229, 247, 0.55)',
          borderRadius: [8, 8, 8, 8],
        },
        itemStyle: {
          normal: {
            borderRadius: [12, 12, 12, 12],
          },
        },
        barWidth: '25',
        label: {
          show: true,
          color: colorList[1],
          position: 'outside',
        },
        data: landData.map((item) => {
          return item.value;
        }),
      },
      {
        name: '长久类',
        type: 'bar',
        backgroundStyle: {
          color: 'rgba(216, 229, 247, 0.55)',
          borderRadius: [8, 8, 8, 8],
        },
        itemStyle: {
          normal: {
            borderRadius: [12, 12, 12, 12],
          },
        },
        barWidth: '25',
        label: {
          show: true,
          color: colorList[2],
          position: 'outside',
        },
        data: landData.map((item) => {
          return item.value;
        }),
      },
    ],
  };