CommonCharts组件显示多条y轴报错

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
silverlight
Posts: 114

Code: Select all

import React, { useState } from 'react';
import { View, Button } from '@ray-js/ray';
import styles from './index.module.less';
import CommonCharts from '@ray-js/common-charts';

export default function EchartsDemo() {
  return (
    <View className={styles.container}>
      <CommonCharts
        unit={["℃", "%"]} // 数据单位
        option={{
          backgroundColor: '#fff',
          title: {
            text: "温湿度",
            textStyle: {
              color: "#333333",
              fontSize: 20,
            },
            left: "center",
            top: "0%",
          },
          legend: {
            show: true,
            data: ['温度', '湿度'],
          },
          tooltip: {
          },
          dataZoom: [
            {
              xAxisIndex: 0,
              show: false,
              type: "slider",
              startValue: 0,
              endValue: 7,
            },
          ],
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
        
yAxis: [{ type: 'value', name: '湿度 (%)', axisLine: { onZero:false, }, position: 'right', }, { type: 'value', name: '温度 (℃)', axisLine: { onZero:false, }, position: 'left', } ], series: [ { name: '温度', data: [150, 230, 224, 218, 135, 147, 260], type: 'line', yAxisIndex:1, }, { name: '湿度', data: [20, 30, 40, 50, 60, 70, 80], type: 'line', yAxisIndex:0, }, ], }} /> </View> ); }

我想要在图表中显示多个y轴,显示两条单位不同的数据,分别放在左右两侧。目前只显示一条y轴是没有问题。
1:是当yAxis设定为数组后,对于y轴的设置则不生效。
2:当设置yAxis为数组后,我修改unit={["℃", "%"]}也为数组,则y轴直接消失。
3:而且在series设置yAxisIndex:1属性,则直接报错.报错如下。

Code: Select all

View] [Render Script] Apply "render" method captured an error in "_npm/@tuya-miniapp/common-charts/lib/core/index.rjs".
(anonymous) @ index.rjs:19
(anonymous) @ view.js?hash=225b7c0035:2
requestAnimationFrame (async)
s @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
value @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
value @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
(anonymous) @ C:\Program Files\Tuya MiniApp Tools\resources\app\node_modules\@inner\project\dist\electron-browser\index.js:22
__handle @ C:\Program Files\Tuya MiniApp Tools\resources\app\node_modules\@inner\project\dist\electron-browser\index.js:21
(anonymous) @ VM224:1
(anonymous) @ node:electron/js2c/renderer_init:2
(anonymous) @ node:electron/js2c/renderer_init:2
emit @ node:events:513
onMessage @ node:electron/js2c/renderer_init:2
index.rjs:20 [View] TypeError: Cannot read properties of undefined (reading 'get')
    at go (unstable-echarts.js?hash=225b7c0035:1:342367)
    at cartesian2d (unstable-echarts.js?hash=225b7c0035:1:341367)
    at ZS (unstable-echarts.js?hash=225b7c0035:1:341091)
    at IL (unstable-echarts.js?hash=225b7c0035:1:344308)
    at t.getInitialData (unstable-echarts.js?hash=225b7c0035:1:526817)
    at t.init (unstable-echarts.js?hash=225b7c0035:1:259421)
    at t.<anonymous> (unstable-echarts.js?hash=225b7c0035:1:212782)
    at Array.forEach (<anonymous>)
    at M (unstable-echarts.js?hash=225b7c0035:1:9331)
    at t.a (unstable-echarts.js?hash=225b7c0035:1:212350)
(anonymous) @ index.rjs:20
(anonymous) @ view.js?hash=225b7c0035:2
requestAnimationFrame (async)
s @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
value @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
value @ app-before.js?side=service:2
(anonymous) @ app-before.js?side=service:2
(anonymous) @ C:\Program Files\Tuya MiniApp Tools\resources\app\node_modules\@inner\project\dist\electron-browser\index.js:22
__handle @ C:\Program Files\Tuya MiniApp Tools\resources\app\node_modules\@inner\project\dist\electron-browser\index.js:21
(anonymous) @ VM224:1
(anonymous) @ node:electron/js2c/renderer_init:2
(anonymous) @ node:electron/js2c/renderer_init:2
emit @ node:events:513
onMessage @ node:electron/js2c/renderer_init:2

图片如下,y轴丢失
Image
y轴设置失效
Image

Last edited by silverlight on 2024年 Jul 1日 16:30, edited 1 time in total.

Tags:
yunyin
Posts: 6

Re: CommonCharts组件显示多条y轴报错

当前版本暂不支持 数组类型的x轴和y轴。
稍后将会发布 0.0.9版本提供 支持数组类型的数据结构,
同时将开放 notMerge参数,可以阻止组件内置的一些默认样式和交互设置,更高自由度的设置option

如需完全定制化的echart能力,请参考
viewtopic.php?p=12648&hilit=commonCharts#p12648

silverlight
Posts: 114

Re: CommonCharts组件显示多条y轴报错

yunyin 2024年 Jul 1日 10:57

当前版本暂不支持 数组类型的x轴和y轴。
稍后将会发布 0.0.9版本提供 支持数组类型的数据结构,
同时将开放 notMerge参数,可以阻止组件内置的一些默认样式和交互设置,更高自由度的设置option

如需完全定制化的echart能力,请参考
viewtopic.php?p=12648&hilit=commonCharts#p12648

好的 :D

yunyin
Posts: 6

Re: CommonCharts组件显示多条y轴报错

目前已发布,可以拉取 @ray-js/common-charts 最新版 0.0.4支持多坐标轴问题(ps:版本号之前写错了,正确版0.0.4)

Post Reply