supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 32 forks source link

使用setNewOption配合表格联动导致渲染图表有问题 #116

Closed a-perfect-day closed 10 months ago

a-perfect-day commented 10 months ago

问题描述: 功能为表格与echarts图表联动 默认表格全部选中,echarts展示全部折线,使用setNewOption渲染从后台获取的数据时正常显示。

  1. 挨个取消选中表格中所有行,option中的series已经为空数组,图中依然存在一组折线;
  2. 挨个选中表格中的行,option中的series数据已更新,图表未更新,取消选中表格行会再次留下一组折线,复现问题一;
  3. 全部取消选中会留下一组折线,在选中全部 在取消选中,随机选中任何行 option中的series已更新,图表未更新。

请帮忙看一下是哪里的问题

版本: "react-native": "0.72.4", "react-native-echarts-pro": "^1.9.1", "react-native-webview": "^13.6.2" "react": "18.2.0", Platform【android】 真机系统版本:安卓13

import React, {useState,useEffect,useRef} from 'react';
import RNEChartsPro from "react-native-echarts-pro";
import BeautifulTable from 'react-native-beautiful-table';
import {CheckBox } from '@rneui/themed';
function ChartsTable(){
    const echartsPcr =useRef(null);
    const [option,setOptionPCR] = useState(OptionPcr([]));
    const [pcrLine,setPcrLine]= useState([]);
    const [pcrXaxis,setPcrXaxis] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48]);
    //表格数据
    const [data,setData]=useState( [{"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "1", "index": 0, "name": "P1", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#aaaa00", "name": "Water R2", "quantity": "20uL", "type": "Other"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "2", "index": 1, "name": "P2", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#ff0004", "name": "Sample1", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "3", "index": 2, "name": "P3", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#ffaa00", "name": "Sample2", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "4", "index": 3, "name": "P4", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#ffff00", "name": "Sample3", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "5", "index": 4, "name": "P5", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#aaff7f", "name": "Sample4", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "6", "index": 5, "name": "P6", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#00ff7f", "name": "Sample5", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "7", "index": 6, "name": "P7", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#00aa00", "name": "Sample6", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "8", "index": 7, "name": "P8", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#00aa7f", "name": "Sample7", "quantity": "20uL", "type": "Sample"}}, {"checked": false, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "9", "index": 8, "name": "P9", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#aaffff", "name": "Sample8", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "10", "index": 9, "name": "P10", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#55ffff", "name": "Sample9", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "11", "index": 10, "name": "P11", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#00aaff", "name": "Sample10", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "12", "index": 11, "name": "P12", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#0055ff", "name": "Sample11", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "13", "index": 12, "name": "P13", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#aaaaff", "name": "Sample12", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "14", "index": 13, "name": "P14", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#aa55ff", "name": "Sample13", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "15", "index": 14, "name": "P15", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#ffaaff", "name": "Sample14", "quantity": "20uL", "type": "Sample"}}, {"checked": true, "famTarget": {"color": "#0055ff", "name": "Target 1", "reporter": "FAM"}, "hexTarget": {"color": "#55ff00", "comment": "same wavelength as SUN", "name": "Target 2", "reporter": "HEX"}, "id": "16", "index": 15, "name": "P16", "reagent": {"color": "#005500", "name": "Reagent2"}, "roxTarget": {"color": "#ffff7f", "name": "Target 3", "reporter": "ROX"}, "sample": {"color": "#ff00ff", "name": "Sample15", "quantity": "20uL", "type": "Sample"}}]);
    //图表数据
    const [pcrData,setPcrData] = useState( [{"data": "18.2133,18.2133,18.1367,19.33,16.9033,18.83,19.99,19.5767,18.7233,21.59,19.8,20.4233,19.79,18.4333,15.6933,17.3667,18.8467,18.9567,17.55,21.7433,18.6067", "desc": "This is Blue Channel", "index": 0, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Water R2", "target": "Target 1"}, {"data": "25.36,25.36,26.1433,27.0167,27.7467,26,24.5467,30.0833,24.3767,30.3867,27.5067,27.1233,26.3733,27.2533,25.8767,26.3967,26.9333,23.7467,30.54,29.43,25.3767", "desc": "This is Blue Channel", "index": 1, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample1", "target": "Target 1"}, {"data": "16.22,16.22,16.21,14.4267,14.5867,15.7933,10.6967,16.0333,12.41,16.74,16.9133,15.5,18.8833,15.1367,13.8567,14.21,15.4767,17.62,15.2633,19.19,16.14", "desc": "This is Blue Channel", "index": 2, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample2", "target": "Target 1"}, {"data": "9.86,9.86,9.61333,11.7833,9.84667,8.57333,11.4233,8.90667,12.1767,9.52,6.10667,9.53667,8.77667,8.14667,10.7433,10.9467,10.5133,11.0633,11.0367,10.51,12.4367", "desc": "This is Blue Channel", "index": 3, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample3", "target": "Target 1"}, {"data": "3.93667,3.93667,8.04333,8,6.4,9.32,10.2933,6.65667,6.94,6.22667,6.42333,7.72,8.03667,8.42333,5.54333,7.20667,6.69,7.46,7.11667,9.38333,7.51667", "desc": "This is Blue Channel", "index": 4, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample4", "target": "Target 1"}, {"data": "12.9667,12.9667,15.39,12.0533,12.8933,11.29,8.11333,9.62,13.8333,14.01,14.01,11.1933,10.7933,11.44,13.11,16.86,14.52,12.6433,12.83,11.22,15.8233", "desc": "This is Blue Channel", "index": 5, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample5", "target": "Target 1"}, {"data": "12.2333,12.2333,13.5167,12.1567,12.2867,10.81,8.89,13.7367,10.87,12.6533,13.0567,11.2233,12.8867,11.5367,10.8067,12.6367,15.0033,12.5533,8.21333,11.1133,14.3367", "desc": "This is Blue Channel", "index": 6, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample6", "target": "Target 1"}, {"data": "9.06,9.06,7.58333,9.16667,7.33,10.9933,7.24333,7.63333,7.05,10.1533,6.43667,8.53333,6.48,8.73667,8.96333,7.85,8.21667,7.52667,8.72,7.52,6.84", "desc": "This is Blue Channel", "index": 7, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample7", "target": "Target 1"}, {"data": "6.18333,6.18333,7.55333,7.27667,5.26,5.53,6.56333,8.3,9.05333,8.06667,4.8,6.91,6.43,9.08333,6.48667,4.98333,7.22,6.69667,6.93,6.18333,5.53667", "desc": "This is Blue Channel", "index": 8, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample8", "target": "Target 1"}, {"data": "8.18333,8.18333,11.5,10.9433,11.48,8.37667,10.78,8.91333,9.50333,8.96333,9.18667,9.87333,6.70667,12.6933,9.72667,11.3733,6.88667,8.02,9.94667,8.93333,7.04333", "desc": "This is Blue Channel", "index": 9, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample9", "target": "Target 1"}, {"data": "13.6367,13.6367,13.9733,10.8667,11.1867,14.1633,14.4133,11.7467,12.4767,10.8767,10.7633,14.83,13.13,16.1733,14.9467,14.9767,9.59667,10.26,12.3833,14.3467,13.4733", "desc": "This is Blue Channel", "index": 10, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample10", "target": "Target 1"}, {"data": "7.68,7.68,7.37333,10.1567,7.12333,7.68667,8.57667,7.43667,11.9133,6.26667,9.00667,7.68333,9.22333,7.11333,8.41,6.35667,8.62,9.38667,8.14333,7.96,8.15", "desc": "This is Blue Channel", "index": 11, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample11", "target": "Target 1"}, {"data": "11.0533,11.0533,9.25333,7.12333,9.72,8.11667,8.35667,9.55,9.42333,9.77667,9.28667,8.79333,9.24333,6.85667,7.85,9.24,7.42333,7.31333,9.60333,10.6267,8.15", "desc": "This is Blue Channel", "index": 12, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample12", "target": "Target 1"}, {"data": "15.9667,15.9667,16.9267,14.8167,15.5867,15.4767,16.2833,17.69,14.12,16.7133,16.0233,17.9533,15.33,13.17,16.3667,16.4733,18.4733,17.2667,16.1567,17.56,14.44", "desc": "This is Blue Channel", "index": 13, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample13", "target": "Target 1"}, {"data": "11.2667,11.2667,7.06667,11.2433,14.35,13.96,13.0333,8.4,11.38,8.73333,12.3533,10.8133,12.6867,15.5333,11.2467,14.8167,9.98333,14.52,9.01333,14.8333,7.64333", "desc": "This is Blue Channel", "index": 14, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample14", "target": "Target 1"}, {"data": "9.96333,9.96333,14.1,10.0133,11.9067,10.5367,9.53333,13.82,13.7867,11.8167,11.3667,12.4767,12.3867,10.42,11.34,12.2833,9.35667,9.54667,6.85333,10.2667,11.4967", "desc": "This is Blue Channel", "index": 15, "quantity": "20uL", "reagent": "Reagent2", "reporter": "FAM", "sample": "Sample15", "target": "Target 1"}, {"data": "21.45,21.45,17.36,22.74,17.32,15.6933,19.9433,15.9967,18.4633,18.6467,17.12,17.2333,19.7633,15.5167,20.37,14.78,16.13,18.2067,16.8967,17.5067,17.25", "desc": "This is Green Channel", "index": 0, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Water R2", "target": "Target 2"}, {"data": "23.22,23.22,22.4867,26.52,23.1033,20.9167,20.1167,21.2233,26.4367,23.7867,26.1067,24,22.2133,23.4667,26.19,25.2433,25.2367,24.8667,25.8933,22.9833,23.8267", "desc": "This is Green Channel", "index": 1, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample1", "target": "Target 2"}, {"data": "18.2033,18.2033,17.6133,17.77,16.4967,20.8833,19.31,17.81,18.1067,18.58,21.5467,19.56,22.76,17.9433,20.5467,21.9733,20.8633,19.9067,18.8267,21.5233,17.5467", "desc": "This is Green Channel", "index": 2, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample2", "target": "Target 2"}, {"data": "26.3033,26.3033,21.6533,22.5633,24.3133,21.72,22.9733,22.8533,20.59,24.0667,21.5233,21.1133,25.6433,20.2833,19.47,19.89,21.85,20.7667,22.23,22.2,20.6633", "desc": "This is Green Channel", "index": 3, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample3", "target": "Target 2"}, {"data": "17.3667,17.3667,14.3167,15.24,14.71,14.8333,15.49,16.3133,15.7667,16.9233,15.9933,12.6867,18.8267,18.4333,15.5433,17.37,17.6,17.1567,17.9433,17.9167,18.5", "desc": "This is Green Channel", "index": 4, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample4", "target": "Target 2"}, {"data": "18.5767,18.5767,15.15,13.6533,19.33,18.1033,16.2167,16.1367,19.7433,17.57,18.4967,17.89,16.29,18.2967,15.4733,17.5367,18.97,17.46,22.6067,17.6,19.4667", "desc": "This is Green Channel", "index": 5, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample5", "target": "Target 2"}, {"data": "17.9367,17.9367,20.16,17.0067,17.74,16.31,18.87,17.34,18.8967,16.7433,19.09,18.9233,16.7133,19.6967,17.7533,17.99,19.01,18.93,17.6533,16.9133,19.8167", "desc": "This is Green Channel", "index": 6, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample6", "target": "Target 2"}, {"data": "16.5867,16.5867,17.09,15.9967,16.4433,16.9933,20.1167,18.1667,17.8633,14.65,16.9267,17.8567,18.1067,18.9333,16.9967,18.1933,17.1867,19.1833,15.3667,16.2333,14.64", "desc": "This is Green Channel", "index": 7, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample7", "target": "Target 2"}, {"data": "15.5733,15.5733,20.0133,11.2,15.9367,12.9667,16.3767,12.94,14.6233,15.6333,11.8267,17.8,14.9733,14.24,13.76,15.4933,14.7067,14.4033,16.3667,17.0533,16.39", "desc": "This is Green Channel", "index": 8, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample8", "target": "Target 2"}, {"data": "24.5967,24.5967,18.3433,18.4233,18.9367,20.4767,18.3067,22.03,21.0667,21.4067,17.4567,19.31,18.4067,18.1133,24.3767,22.1433,21.6867,20.2,21.48,20.5067,22.6867", "desc": "This is Green Channel", "index": 9, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample9", "target": "Target 2"}, {"data": "16.5433,16.5433,17.3267,16.0967,15.9533,14.1667,19.75,17.8067,16.24,17.5433,20.0033,15.4067,16.9667,15.7167,17.1733,16.31,15.7133,15.3267,16.22,16.0967,10.7367", "desc": "This is Green Channel", "index": 10, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample10", "target": "Target 2"}, {"data": "20.4067,20.4067,16.3567,17.84,16.8433,13.63,20.7967,15.54,14.3267,19.7767,18.3333,16.4933,14.6367,18.3533,17.43,16.8967,15.0233,17.2867,16.8367,19.1533,13.7067", "desc": "This is Green Channel", "index": 11, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample11", "target": "Target 2"}, {"data": "19.4467,19.4467,20.2133,25.0967,22.8267,22.9233,24.28,23.0667,20.81,20.2567,22.8133,22.1233,22.5633,22.75,22.4,24.7033,22.9867,22.7733,20.91,21.8833,22.5533", "desc": "This is Green Channel", "index": 12, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample12", "target": "Target 2"}, {"data": "27.9567,27.9567,27.8633,24.1733,23.7367,28.2767,28.5633,25.79,22.4767,25.37,26.0167,22.94,24.57,27.9333,26.5567,24.2067,25.8867,22.9133,26.21,25.1133,24.42", "desc": "This is Green Channel", "index": 13, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample13", "target": "Target 2"}, {"data": "22.2333,22.2333,14.7067,17.4367,15.0833,16.47,15.5,16.0633,15.5,16.9967,18.2533,14.6433,15.9167,16.2133,16.95,23.1233,20.5367,18.7367,17.25,19.3467,17.8667", "desc": "This is Green Channel", "index": 14, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample14", "target": "Target 2"}, {"data": "25.2133,25.2133,27.5933,22.46,27.33,29.28,25.98,25.04,28.8933,27.83,29.7033,26.9533,30.3233,27.25,33.1367,30.3667,28.59,27.67,29.0967,26.3133,26.1967", "desc": "This is Green Channel", "index": 15, "quantity": "20uL", "reagent": "Reagent2", "reporter": "HEX", "sample": "Sample15", "target": "Target 2"}, {"data": "18.4067,18.4067,23.4167,16.8067,21.4233,18.4733,19.6067,21.2833,20.7367,18.2133,19.1633,21.1167,18.8967,20.0167,21.8367,21.1433,19.31,18.8633,18.7133,22.9933,16.82", "desc": "This is Yellow Channel", "index": 0, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Water R2", "target": "Target 3"}, {"data": "26.3933,26.3933,29.2733,23.79,26.8,27.43,26.3833,27.0967,25.61,27.35,26.09,24.5167,27.0233,29.7533,29.6533,26.5333,29.6133,26.6033,27.99,28.3133,25.5867", "desc": "This is Yellow Channel", "index": 1, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample1", "target": "Target 3"}, {"data": "23.2333,23.2333,22.1733,21.36,23.09,22.1233,19.09,18.14,20.8367,21.7967,22.8633,19.56,21.1633,21.0567,22.9667,20.01,20.84,18.6567,22.34,21.8167,21.0133", "desc": "This is Yellow Channel", "index": 2, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample2", "target": "Target 3"}, {"data": "23.2467,23.2467,23.06,19.5367,24.1167,20.2433,21.34,22.12,19.2567,27.0733,19.8233,23.82,23.6233,25.0133,23.35,23.1767,24.33,23.2733,20.7767,24.4467,24.97", "desc": "This is Yellow Channel", "index": 3, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample3", "target": "Target 3"}, {"data": "18.8933,18.8933,20.1567,18.1033,23.01,18.6033,18.59,16.6533,18.6967,20.5067,22.25,20.5733,22.6667,16.7167,18.6,18.4267,23.3067,19.5467,19.9933,18.87,19.31", "desc": "This is Yellow Channel", "index": 4, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample4", "target": "Target 3"}, {"data": "19.57,19.57,18.8567,19.61,15.93,20.7667,17.8833,19.64,19.87,17.9733,17.99,20.9133,21.04,20.1967,21.3533,19.6467,20.8633,19.3167,15.93,19.9,22.4433", "desc": "This is Yellow Channel", "index": 5, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample5", "target": "Target 3"}, {"data": "23.2567,23.2567,21.4867,22.9667,23.2633,20.3667,19.8333,19.1233,23.65,23.3167,22.79,24.1933,18.7833,22.7733,23.8333,21.1733,23.4767,21.4767,20.4533,22.4033,20.7833", "desc": "This is Yellow Channel", "index": 6, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample6", "target": "Target 3"}, {"data": "21.79,21.79,18.7133,21.7633,25.25,20.9633,23.2033,18.2267,20.2133,22.0433,22.86,19.27,20.8433,21.8233,22.95,22.9633,19.1267,19.9633,22.2233,18.89,21.1967", "desc": "This is Yellow Channel", "index": 7, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample7", "target": "Target 3"}, {"data": "19.3233,19.3233,15.8767,18.7933,15.58,20.07,18.8667,19.5167,18.09,16.7933,17.2867,19.3767,17.8533,18.26,17.05,18.7233,18.1533,17.62,15.2833,16.2933,21.3933", "desc": "This is Yellow Channel", "index": 8, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample8", "target": "Target 3"}, {"data": "21.2333,21.2333,22.92,21.8267,25.0167,22.9467,25.67,22.4167,20.8267,25.67,25.1367,25.2233,22.5267,25.8533,20.5733,29.5433,24.04,21.8567,25.1567,20.1433,22.7633", "desc": "This is Yellow Channel", "index": 9, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample9", "target": "Target 3"}, {"data": "21,21,21.01,21.1967,20.4333,19.9867,18.46,21.91,17.44,18.4633,21.7067,19.3633,18.13,18.24,23.3933,18.92,20.0433,24.0733,19.74,17.6733,23.22", "desc": "This is Yellow Channel", "index": 10, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample10", "target": "Target 3"}, {"data": "22.8433,22.8433,21.82,18.38,15.8467,19.1133,20.4633,18.99,16.9833,20.4333,19.6767,20.3867,17.86,18.6,19.79,22.57,23.3933,17.6333,23.4033,18.3133,21.9533", "desc": "This is Yellow Channel", "index": 11, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample11", "target": "Target 3"}, {"data": "23.2733,23.2733,23.1833,25.4,24.8433,23.9267,21.48,23.39,23.5567,23.67,21.47,22.4467,26.6833,23.2867,21.75,23.41,24.98,20.7933,21.3933,25.1867,22.5367", "desc": "This is Yellow Channel", "index": 12, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample12", "target": "Target 3"}, {"data": "24.77,24.77,21.8167,27.04,22.36,24.07,25.4367,21.5967,21.5967,25.2733,21.1433,23.1667,22.5967,23.9367,25.27,25.3,26.93,24.91,25.41,24.72,22.7033", "desc": "This is Yellow Channel", "index": 13, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample13", "target": "Target 3"}, {"data": "19.6833,19.6833,19.3967,16.2433,19.9267,17.59,16.9167,17.15,16.21,20.2733,19.9233,16.8167,17.9733,17.03,19.24,20.15,20.6533,15.3833,20.1933,15.8267,17.7767", "desc": "This is Yellow Channel", "index": 14, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample14", "target": "Target 3"}, {"data": "19.3767,19.3767,21.11,19.8967,19.1533,18.03,19.0467,20.3933,19.13,19.3133,18.5967,20.4633,18.6167,21.8767,21.72,20.4567,20.9533,22.9367,22.2867,20.8533,23.1667", "desc": "This is Yellow Channel", "index": 15, "quantity": "20uL", "reagent": "Reagent2", "reporter": "ROX", "sample": "Sample15", "target": "Target 3"}]);
    useEffect(()=>{
        getResultPCR();
    },[]);
    useEffect(()=>{
        setOptionPCR(OptionPcr(pcrLine));
    },[pcrData]);
    useEffect(()=>{
        if (!echartsPcr.current) return;
        echartsPcr.current.setNewOption(option);
    },[option]);
    //获取PCR图表数据
    const getResultPCR=()=>{
        const header={
            "Accept": 'application/json',
            "Content-Type": "application/json",
            "token":state.user_token
        };
        const res = get(`pcr-experiment/result/pcr/id/10`,header);
        res.then(result=>{
            if (result.ok===true){
                const PcrArray = result.data.dataArray;
                const cycleX = [];
                for (let i =0;i<=result.data.size;i++){
                    cycleX.push(i);
                }
                setPcrXaxis(cycleX);
                setPcrData(PcrArray);
                setResPcr(PcrArray);
                PcrInit(PcrArray);
            }
        })
    };
    const PcrInit = async (array)=>{
        const it = await array.map(item=>{
            return {
                name: item.reporter,
                type: 'line',
                stackStrategy: 'all',
                symbol: 'none',
                showSymbol: false,
                smooth: true,
                data: item.data.split(',')
            }
        });
        setPcrLine(it);
    };
    function OptionPcr(array) {
        const option = {
            tooltip: {
                // trigger: 'item',
                tooltip: {
                    axisPointer: {
                        type: 'cross'
                    }
                },
            },
            legend: {
                // left: '0%',//距离左边距
                // bottom: '0%',//距离下边距
                icon: 'roundRect',
                itemWidth: 25,
                itemHeight: 20,
            },
            grid: {
                left: '8%',
                right: '4%',
                bottom: '8%',
                top:'10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                name: 'cycles',
                nameLocation: 'middle',
                nameTextStyle: {
                    padding: [5, 0, 0, 0]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color:'#ccc'
                    },
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                },
                data:pcrXaxis
            },
            yAxis: {
                name: 'Relative Fluorescence',
                nameLocation: 'middle',
                nameTextStyle: {
                    padding: [0, 0, 30, 0]
                },
                type: 'value',
                minorSplitLine: {
                    show: true
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color:'#ccc'
                    }
                },
                axisLine: {
                    show: true,
                    alignWithLabel: true
                },
            },
            series: array.length===0?[]:array
        };
        return option;
    }
    return (
                      <View style={{flex:1,flexDirection:'row'}}>
                            <View style={{flex:1,height:400}}>
                                <RNEChartsPro width={E_WIDTH/2} height={400} ref={echartsPcr} option={option} />
                            </View>
                            <View style={{flex:1,height:380}}>
                                <ScrollView style={{padding:5,paddingTop:0}}>
                                    <BeautifulTable
                                        headerTextStyle={styles.SamplesCol}
                                        columns={columns}
                                        data={data}
                                        contentRowStyle={styles.borderBottom}
                                        contentCellStyle={styles.borderRight}
                                        headerStyle={styles.borderTop}
                                        headerCellStyle={styles.borderRight}
                                        filterSetRowStyle={(item, index) => {
                                            // 控制某几项的样式
                                            return index % 2 === 0 ? { backgroundColor: '#f5f5f5' } : ''
                                        }}
                                    />
                                </ScrollView>
                            </View>
                        </View>
    );
//表格表头
const columns = [
        {
            title: 'Well',
            width: 55,
            dataKey: 'checked',
            align: 'center',
            render:(text, row, index)=><CheckBox
                checked={text}
                title={`P${index+1}`}
                textStyle={{fontSize: 10}}
                size={20}
                onPress={
                    ()=>{
                        const dataList = [...data];
                        const newDataMap = dataList.map((i)=>i.id===row.id?{...i,checked:!row.checked}:i);
                        setData(newDataMap);
                        if (!row.checked){
                            console.log('1')
                            const res = [...pcrData];
                            const change = resPcr.filter(item=>{
                                return item.index === row.index
                            });
                            change.map(item=>{
                                return res.push(item);
                            });
                            setPcrData([...res]);
                            PcrInit([...res]);
                        }else{
                            console.log('2');
                            const res = pcrData.filter(item=>{
                                return item.index!==row.index;
                            });
                            setPcrData([...res]);
                            PcrInit([...res]);
                        }
                    }
                }
                containerStyle={{backgroundColor:'transparent',padding:0}}
                iconType="material-community"
                checkedIcon="checkbox-outline"
                uncheckedIcon={'checkbox-blank-outline'}
            />
        },
        {
            title: 'Sample',
            dataKey: 'sample',
            align: 'center',
            flex: 1,
            render:(text, row, index)=>{
                if (text!==undefined){
                    return <Text>{text.name}</Text>
                }else{
                    return <Text></Text>
                }
            }
        },
];
}