Echarts在线免费图表

 
            // 二维数据求和
const arrSum = yData => {
   const list = yData.map(v => v.data)
   const xLen = list[0].length
   let result = list.reduce((total, value, index, arr) => {
      let sumList = []
      for (let i = 0; i < xLen; i++) {
         sumList.push(total[i] + value[i])
      }
      return sumList
   })
   return result
}

const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

const yData = [
   {
      name: '香蕉',
      data: [256, 125, 140, 56, 450, 478, 100]
   },
   {
      name: '苹果',
      data: [135, 255, 100, 12, 456, 578, 562]
   },
   {
      name: '梨子',
      data: [100, 255, 100, 12, 456, 578, 562]
   }
]

let series1 = yData.map(item => {
   return {
      name: item.name,
      data: item.data,
      type: 'bar',
      stack: 'fruit',
      emphasis: { focus: 'series' },
      animationDuration: 2500,
      animationEasing: 'cubicInOut',
      barWidth: 20,
      // barMinHeight: 50,
      barGap: 1,
      itemStyle: {
         borderRadius: 2,
         borderWidth: 2,
         borderColor: 'transparent',
         borderJoin: 'round',
         borderType: 'solid',
      },
      label: {
         show: true,
         color: '#fafafa',
         fontSize: 12,
      },
   }
})

const series2 = {
   name: 'Total',
   color: '#a1a6b1',
   data: arrSum(yData),
   type: 'line',
   lineStyle: {
      // type: 'dashed',
      // 实线宽度,虚线宽度
      type: [8, 6],
      dashOffset: 0,
   },
   label: {
      show: true,
      color: 'inherit',
      fontSize: 12,
   },
}

option = {
   series: [...series1, series2],
   yAxis: [
      {
         type: 'value',
      },
   ],
   grid: {
      top: '20%',
      left: '2%',
      right: '3%',
      bottom: '0%',
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xData,
      axisLine: { show: false },
      axisTick: { show: false },
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'line',
      },
      textStyle: {
         color: '#fafafa',
      },
      borderColor: 'transparent',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      extraCssText: 'backdrop-filter: blur(6px);',
      order: 'seriesDesc',
   },
   legend: {
      show: true,
      right: 20,
      top: 15,
      icon: 'roundRect',
      itemHeight: 5,
      itemWidth: 10,
      itemGap: 40,
      textStyle: {
         fontSize: 12,
      },
      itemStyle: {
         borderColor: 'transparent',
         borderWidth: 6,
      },
   },
};