echarts-自定义-性能图

Ciao_Traveler

2024-04-27 帮助1人

效果图：学新通
option配置

function renderItem(params: any, api: any) {
    const categoryIndex = api.value(0);
    const start = api.coord([api.value(1), categoryIndex]);
    const end = api.coord([api.value(2), categoryIndex]);
    const height = api.size([0, 1])[1];
    const rectShape = echarts.graphic.clipRectByRect(
      {
        x: start[0],
        y: start[1] - height / 4,
        width: end[0] - start[0],
        height: height / 2
      },
      {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      }
    );
    return (
      rectShape && {
        type: 'rect',
        transition: ['shape'],
        shape: rectShape,
        style: api.style()
      }
    );
  }
  const option: Partial<EChartOption> = {
    backgroundColor: '#15192D ',
    tooltip: {
      backgroundColor: 'rgba(19,26,60,0.85)',
      borderColor: 'rgba(89,112,221,0.45)',
      formatter: function (params: any) {
        // console.log(params);
        return moment(params.value[1]).format('YYYY-MM-DD hh:mm:ss')   ' -  '   moment(params.value[2]).format('YYYY-MM-DD hh:mm:ss')   '<br/>'   params.name
      },
      textStyle: {
        color: 'rgba(255,255,255,0.85)',
      },
    },
    title: {
      text: 'Profile',
      left: 'center',
      show: false
    },
    grid: {
      height: '80%',
      top: '5%',
      bottom: '5%',
      right: '0%',
      left: '5%'
    },
    xAxis: {
      type: 'time',
      axisLabel: {
        formatter: function (val: any) {
          return moment(val).format('YYYY-MM-DD hh:mm:ss');
        },
        color: 'rgba(255,255,255,0.4)',
        fontFamily: 'MicrosoftYaHei',
      },
      splitNumber: 3,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      data: data.axisdata,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.4)',
        fontFamily: 'MicrosoftYaHei',
        fontSize: 12,
      },
    },
    series: [
      {
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
          opacity: 0.8
        },
        encode: {
          x: [1, 2],
          y: 0
        },
        data: data.serisedata
      }
    ]
  };

数据结构

for (let i = 0; i < 4; i  ) {
    chartData.push({
      deviceId: "1234567"   i,
      deviceName: "设备2"   i,
      equipStartStopDataDtoList: [
        { state: "启动", startTime: "1649837599556", endTime: "1649837961027" },
        { state: "停机", startTime: "1649837961027", endTime: "1649837992142" },
        { state: "启动", startTime: "1649837992142", endTime: "1649838744110" }
      ]
    })
  };
	const axisdata: any[] = [];
      const serisedata: any[] = [];
      chartData.map((item: { deviceName: any; equipStartStopDataDtoList: any[]; }, index: any) => {
        axisdata.push(item.deviceName);
        item.equipStartStopDataDtoList.map((vv: any) => {
          serisedata.push({
            name: vv.state,
            value: [index, parseInt(vv.startTime), parseInt(vv.endTime)],
            itemStyle: {
              normal: {
                color: vv.state === "启动" ? '#485AB1' : '#4F5363',
              }
            }
          });
        });
      });
      const msg = { axisdata, serisedata };

js demo全部代码，仅供参考

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Profile - Apache ECharts Demo</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- 样式自行调整 -->
  <div id="chart-container" style="height: 160px;width: 100%;"></div>
  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    var myChart = echarts.init(dom);
    var chartData = [];
    for (let i = 0; i < 4; i  ) {
      chartData.push({
        deviceId: '1234567'   i,
        deviceName: '设备2'   i,
        equipStartStopDataDtoList: [
          { state: '启动', startTime: '1649837599556', endTime: '1649837961027' },
          { state: '停机', startTime: '1649837961027', endTime: '1649837992142' },
          { state: '启动', startTime: '1649837992142', endTime: '1649838744110' }
        ]
      });
    }
    var axisdata = [];
    var serisedata = [];
    chartData.map((item, index) => {
      axisdata.push(item.deviceName);
      item.equipStartStopDataDtoList.map((vv) => {
        serisedata.push({
          name: vv.state,
          value: [index, parseInt(vv.startTime), parseInt(vv.endTime)],
          itemStyle: {
            normal: {
              color: vv.state === '启动' ? '#485AB1' : '#4F5363'
            }
          }
        });
      });
    });

    function renderItem(params, api) {
      const categoryIndex = api.value(0);
      const start = api.coord([api.value(1), categoryIndex]);
      const end = api.coord([api.value(2), categoryIndex]);
      const height = api.size([0, 1])[1];
      const rectShape = echarts.graphic.clipRectByRect(
        {
          x: start[0],
          y: start[1] - height / 4,
          width: end[0] - start[0],
          height: height / 2
        },
        {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        }
      );
      return (
        rectShape && {
          type: 'rect',
          transition: ['shape'],
          shape: rectShape,
          style: api.style()
        }
      );
    }
    var option = {
      backgroundColor: '#15192D ',
      tooltip: {
        backgroundColor: 'rgba(19,26,60,0.85)',
        borderColor: 'rgba(89,112,221,0.45)',
        // formatter: function (params) {
        //   return params.value[1]   ' -  '   params.value[2]   '<br/>'   params.name;
        // },
        textStyle: {
          color: 'rgba(255,255,255,0.85)'
        }
      },
      title: {
        text: 'Profile',
        left: 'center',
        show: false
      },
      grid: {
        height: '80%',
        top: '5%',
        bottom: '5%',
        right: '0%',
        left: '5%'
      },
      xAxis: {
        type: 'time',
        axisLabel: {
          // formatter: function (val) {
          //   return val;
          // },
          color: 'rgba(255,255,255,0.4)',
          fontFamily: 'MicrosoftYaHei'
        },
        splitNumber: 3,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        data: axisdata,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255,255,255,0.4)',
          fontFamily: 'MicrosoftYaHei',
          fontSize: 12
        }
      },
      series: [
        {
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: serisedata
        }
      ]
    };

    myChart.setOption(option)

  </script>
</body>

</html>

这篇好文章是转载于：学新通技术网

echarts-自定义-性能图

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐