app端可以使用echarts的自定义（custom）系列图表吗

如图

组件代码如下

<template>  
  <view class="content">  
    <!-- #ifdef APP-PLUS || H5 -->  
    <view :prop="option" :change:prop="echarts.updateEcharts" :id="id" class="echarts"></view>  
    <!-- #endif -->  
    <!-- #ifndef APP-PLUS || H5 -->  
    <view>非 APP、H5 环境不支持</view>  
    <!-- #endif -->  
  </view>  
</template>  

<script>  
export default {  
  props: {  
    id: {  
      type: String,  
      required: true  
    },  
    newData: {  
      type: Object,  
      required: true  
    }  
  },  
  data() {  
    return {  
      minTime: null,  
      maxTime: null,  
      label:"三色灯",  
      option: {  
        backgroundColor: "transparent",  
        tooltip: {  
          formatter: function (params) {  
            return params.marker + params.data.state + ': ' + params.value[2] + ' s';  
          }  
        },  
        grid: {  
          top: 10,  
          right:30,  
          height: 50 // 调整 y 轴高度  
        },  
        xAxis: {  
          type: 'time',  
          interval: 7200000,  
          min: 1715616000000,  
          max: 1715702400000,  
          scale: false,  
          axisLabel: {  
            formatter: function (val) {  
              var date = new Date(val);  
              var hours = date.getHours();  
              var minutes = date.getMinutes();  
              return (  
                  hours.toString().padStart(2, '0') +  
                  ':' +  
                  minutes.toString().padStart(2, '0')  
              );  
            }  
          }  
        },  
        yAxis: {  
          axisTick: {show: false},  
          axisLabel: {show: false},  
          splitLine: {show: false}  
        },  
        series: [  
          {  
            type: 'custom',  
            renderItem: this.renderItem,  
            itemStyle: {  
              opacity: 1  
            },  
            encode: {  
              x: [1, 2],  
              y: 0  
            },  
            data: [  
              {  
                eno: "211-002",  
                ename: "电动葫芦桥式起重机",  
                state: "故障",  
                value: [  
                  new Date("2024-05-13T16:00:00.000Z"),  
                  new Date("2024-05-13T21:52:36.000Z"),  
                  21156  
                ],  
                itemStyle: {  
                  normal: {  
                    color: "#E74639"  
                  }  
                }  
              },  
              {  
                eno: "211-002",  
                ename: "电动葫芦桥式起重机",  
                state: "故障",  
                value: [  
                  new Date("2024-05-13T21:52:36.000Z"),  
                  new Date("2024-05-14T00:33:42.000Z"),  
                  9666  
                ],  
                itemStyle: {  
                  normal: {  
                    color: "#E74639"  
                  }  
                }  
              }  
            ]  
          }  
        ]  
      }  
    }  
  },  
  created() {  
    this.initOption(this.newData);  
  },  
  methods: {  
    getStartOfDayTimestamp(timestamp) {  
      const date = new Date(timestamp);  
      date.setHours(0);  
      date.setMinutes(0);  
      date.setSeconds(0);  
      date.setMilliseconds(0);  
      return date.getTime();  
    },  
    initOption(newData) {  
      if (!newData || !newData.data) return;  

      let timeMin = newData.data[0].value[0];  
      this.minTime = this.getStartOfDayTimestamp(timeMin);  
      this.maxTime = this.minTime + 86400000;  

      const data = newData.data.map(item => {  
        item.value[0] = new Date(item.value[0]);  
        item.value[1] = new Date(item.value[1]);  
        return item;  
      });  

      // this.option.series[0].data = data;  
      // this.option.series[0].renderItem = this.renderItem;  
      // this.option.xAxis.min = this.minTime;  
      // this.option.xAxis.max = this.maxTime;  
      // console.log(this.option.series[0].data)  

    },  
    renderItem(params, api) {  
      console.log(params,"====================")  
      var start = api.coord([api.value(0), 0]);  
      var end = api.coord([api.value(1), 0]);  
      var height = api.size([0, 1])[1] * 0.8;  
      var rectShape = echarts.graphic.clipRectByRect(  
          {  
            x: start[0],  
            y: start[1] - height / 2,  
            width: end[0] - start[0],  
            height: height  
          },  
          {  
            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()  
          }  
      );  
    }  
  }  
}  
</script>  

<script module="echarts" lang="renderjs">  
let myChart;  

export default {  
  mounted() {  
    if (typeof window.echarts === 'function') {  
      this.initEcharts();  
    } else {  
      const script = document.createElement('script');  
      script.src = 'static/js/echarts.min.js';  
      script.onload = this.initEcharts.bind(this);  
      document.head.appendChild(script);  
    }  
  },  
  methods: {  
    initEcharts() {  
      myChart = echarts.init(document.getElementById(this.id));  
      myChart.setOption(this.option);  
    },  
    updateEcharts(newValue) {  
      myChart && myChart.setOption(newValue);  
    }  
  }  
}  
</script>  

<style>  
.content {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  

.echarts {  
  width: 100vw;  
  height: 80px;  
}  
</style>