Echarts在线免费图表

 
            
var data = [
   [15, 11, 13, 16, 16, 18],
   [17, 21, 19, 24, 22, 22],
   [16, 16, 16, 20, 19, 20],
]
var color2 = ['rgba(255, 69, 0, 1)', 'rgba(255, 0, 0,1)', 'rgba(50, 205, 50,1)', 'rgba(0, 139, 139,1)', 'rgba(255, 0, 255,1)', 'rgba(255, 215, 0,1)'];
var color1 = ['rgba(255, 69, 0, .9)', 'rgba(255, 0, 0,.9)', 'rgba(50, 205, 50,.9)', 'rgba(0, 139, 139,.9)', 'rgba(255, 0, 255,.9)', 'rgba(255, 215, 0,.9)'];
option = {
   tooltip: {
      trigger: 'axis',
      confine: true,
      axisPointer: {
         type: 'shadow',
         textStyle: {
            // color: '#05294D',
         },
      },
      formatter: (data) => {
         var res = ''; `<div style="padding-bottom:5px">${data[0].axisValue}</div>`;
         data.forEach((item, index) => {
            if (index <= 3) {
               res += `<span style="display:inline-block;width:10px; height:10px; border-radius:10px; background:${item.color}; border:2px solid ${item.borderColor}"></span>
               ${data[0].axisValue + item.seriesName}：${Number(item.value).toFixed(this.toFixed)}</br>`//&nbsp;kgNH₃/NOx
            }
         })
         return res;
      },
   },
   legend: {
      'show': false,
      // top: -1,
      // right: '0',
      top: "6%",
      left: 'center',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      textStyle: {
         fontSize: 10,
         color: '#565B60',
      }
   },
   grid: {
      containLabel: true,
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '25%'
   },
   xAxis: {
      type: 'category',
      splitLine: {
         show: false
      },
      axisLine: {
         lineStyle: {
            width: 1,
            color: '#999'
         }
      },
      axisLabel: {
         show: true,
         color: '#565B60',
         fontSize: 12,
         // padding: [0,0,0,30]
      },
      axisTick: {
         show: false,
      },
      data: ['CPU', '内存', '磁盘', '网络带宽', 'ooo', 'ppp']
   },
   yAxis: [
      {
         name: '222',
         splitLine: {
            show: true,
            lineStyle: {
               color: '#dedede',
               type: 'solid'
            }
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            lineStyle: {
               width: 1,
               color: '#999'
            }
         },
         nameTextStyle: {
            fontSize: 10
         }
      }
   ],
   series: [
      {
         type: 'scatter',
         name: '资源全部时间平均使用率',
         yAxisIndex: 0,
         data: data[2],
         symbol: 'rect',
         symbolSize: [50, 3],
         itemStyle: {
            color: '#21c393',
         },
         hoverAnimation: false,
         silent: true,
         symbolOffset: ['-13%', 0]
      },
      {
         name: '使用率',
         type: 'bar',
         // stack: 'Total',
         barWidth: 25,
         itemStyle: {
            color: (params, i) => {
               console.log(params, color2[params.dataIndex])
               return color2[params.dataIndex]
            },//'rgba(0,255,0,1)'
         },
         yAxisIndex: 0,
         data: data[0],
         barGap: "-150%"
      }, {
         name: '使用率max',
         type: 'bar',
         // stack: 'Total',
         barWidth: 50,
         itemStyle: {
            color: (params, i) => {
               // console.log(params, color1)
               return color1[params.dataIndex]
            },//'rgba(0,255,0,.9)',
            opacity: 0.2
         },
         yAxisIndex: 0,
         data: data[1],
      }]
}