Echarts在线免费图表

 
            const data =[
    {
        "userName": "常添昊",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "柏熙涵",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "盖晓",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "柏瑞辰",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "任紫轩",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "曹欣源",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "苏彬",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    },
    {
        "userName": "罗润丽",
        "process": 17,
        "verdict": 27,
        "mediate": 43
    }
]
const processList = data.map(item => item.process);
const verdictList = data.map(item => item.verdict);
const mediateList = data.map(item => item.mediate);
const xAxis = data.map(item => item.userName);
option = {
    backgroundColor: '#0E1327',
    grid: {
      containLabel: true,
      bottom: 50,
      top: '50px',
      left: 30,
      right: 30 ,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      orient: 'horizontal',
      top: '8px',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 16,
      textStyle: {
        fontSize: 12,
        color: '#fff',
        rich: {
                a: {
                   verticalAlign: 'middle',
                   lineHeight: 20
                },
            },
      },
      data:[{
        name:'在办案件',
        icon: "circle",
        itemStyle: {
            shadowColor: '#159AFF', // 发光颜色
            shadowBlur: 9, // 发光扩散大小
            shadowOffsetX: 0, // 水平偏移
            shadowOffsetY: 0 // 垂直偏移
        }
      },{
        name:'调撤案件',
        icon: "circle",
        itemStyle: {
            shadowColor: '#15F6EE', // 发光颜色
            shadowBlur: 9, // 发光扩散大小
            shadowOffsetX: 0, // 水平偏移
            shadowOffsetY: 0 // 垂直偏移
        }
      },{
        name:'裁决案件',
        icon: "circle",
        itemStyle: {
            shadowColor: '#F5E74F', // 发光颜色
            shadowBlur: 9, // 发光扩散大小
            shadowOffsetX: 0, // 水平偏移
            shadowOffsetY: 0 // 垂直偏移
        }
      }]
    },
    xAxis: {
      triggerEvent: true,
      data: xAxis,
      axisLabel: {
        show: true,
        fontSize: 12,
        lineHeight: 18,
        color: '#fff',
        align: 'center',
        verticalAlign: 'top',
        formatter: function(value, index) {
        const totalList = verdictList.map((item,idx) => { return (Number(item) + Number(processList[idx]) + Number(mediateList[idx])) })
        return `${value}\n${totalList[index]}`
    }
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          show: true,
          color: '#0B3561',
          width: 2,
        },
      },
    },
    yAxis: [
      {
        axisLabel: {
          interval: 0,
          show: true,
          fontSize: 14,
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,0.15)',
          },
        },
      },
    ],
    series: [
        {
            name: '裁决案件',
            type: 'pictorialBar',
            animationDuration: 0,
            legendHoverLink: false,
            symbolRepeat: 'true',
            symbolMargin: '20%',
            symbolClip: true,
            symbol: 'rect',
            symbolSize: [16, 4],
            itemStyle: {
                color: '#F5E74F'
            },
            data: verdictList.map((item,idx) => { return (Number(item) + Number(processList[idx]) + Number(mediateList[idx])) }),
            z: 1,
            animationEasing: 'elasticOut'
        },
        {
            name: '调撤案件',
            type: 'pictorialBar',
            animationDuration: 0,
            legendHoverLink: false,
            symbolRepeat: 'true',
            symbolMargin: '20%',
            symbolClip: true,
            symbol: 'rect',
            symbolSize: [16, 4],
            itemStyle: {
                color: '#15F6EE'
            },
            data: mediateList.map((item,idx) => { return (Number(item) + Number(processList[idx])) }),
            z: 2,
            animationEasing: 'elasticOut'
        },
        {
            name: '在办案件',
            type: 'pictorialBar',
            animationDuration: 0,
            legendHoverLink: false,
            symbolRepeat: 'true',
            symbolMargin: '20%',
            symbolClip: true,
            symbol: 'rect',
            symbolSize: [16, 4],
            itemStyle: {
                color: '#159AFF'
            },
            data: processList,
            z: 3,
            animationEasing: 'elasticOut'
        },
        {
            name: "背景",
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'rect',
            symbolSize: [20, 5],
            itemStyle: {
                color: 'rgba(21,154,255,0.2)'
            },
            label: {
                show: false
            },
            data: new Array(processList.length).fill(0),
            z: 0,
            animationEasing: 'elasticOut'
        }
    ],
};