问题记录，动态显示echart图

做问题记录，注释的代码实现echart动态生成图例
核心代码为showchart（），用于产生图例需要的数据格式

import * as echarts from "echarts";
import React,{useEffect,useState}from "react";
import {Button, message, Row, Select} from "antd";
const { Option } = Select;

const EChartShow=(props:any)=>{
    //const{txdata,tdata,tlegend,isClear}=props
    const{res}=props
    var colors = ['#5470C6', '#91CC75', '#EE6666','#ECF729',"#F684F7",];
    const[typeSelect,setTypeSelect]=useState([]);//选择要显示的图例
    const[txdata,setTXdata]=useState([])
    const[tdata,setTdata]=useState([])
    const[tlegend,setTlegend]=useState([])
    const[listvoltage,setListvoltage]=useState([])

    setTXdata(res.listdataTime)
    setListvoltage(res.listvoltage)
//选择框发生变化
//     const handleChange=(value)=>{
//         setTdata([])
//         setTlegend([])
//         setTXdata([])
//         console.log("value:",value)
//         setTypeSelect(value);
//
//     }
    // const showChart=()=>{
    //     if(typeSelect.length===0){
    //         message.info("请选择需要显示的图形类型")
    //     }else{
    //         let label=typeSelect.map((item)=>{
    //             return item.label
    //         });
    //         let value=typeSelect.map((item)=>{
    //             return item.value
    //         })
    //         console.log("label:",label)
    //         console.log("value:",value)
    //         let edata=value.map((item)=>{
    //             return res[item]
    //         })
    //         console.log("edata:",edata)
    //         setTlegend(label)
    //         setTXdata(res.listdataTime)
    //         var tsData=[]
    //         edata.forEach((item,index)=>{
    //             var xdata={
    //                 name:'',
    //                 type:'line',
    //                 data:[]
    //             }
    //             xdata.name=label[index]
    //             xdata.data=item;
    //             tsData.push(xdata)
    //             console.log("sData:",tsData)
    //         })
    //
    //         setTdata(tsData)
    //
    //     }
    // }
    const drawLine1=()=> {
        let myChart = echarts.init(document.getElementById('myChart1'));
        // if(isClear===true){
        //     myChart.clear();
        // }
        myChart.clear();
        // 绘制图表
        myChart.setOption({
            color: colors,
            title: {},
            tooltip: {},
            legend: {
                data: ["蓄电池电压","蓄电池负载电压","太阳能充电电压"]
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data:txdata
                }
            ],
            yAxis: {type: 'value',
                axisLabel: {
                    formatter: '{value}V'
                }},
            series:[{
                name: '蓄电池电压',
                data: listvoltage,
                type: 'line',
            },
            //     {
            //     name: '蓄电池负载电压',
            //     data: res.listloadCurrent,
            //     type: 'line',
            // },{
            //     name: '太阳能充电电压',
            //     data: res.listsolarVoltage,
            //     type: 'line',
            // }
            ]
        });
    };
    // const drawLine2=()=> {
    //     let myChart = echarts.init(document.getElementById('myChart2'));
    //     // if(isClear===true){
    //     //     myChart.clear();
    //     // }
    //     myChart.clear();
    //     // 绘制图表
    //     myChart.setOption({
    //         color: colors,
    //         title: {},
    //         tooltip: {},
    //         legend: {
    //             data: ["负载电流","太阳能充电电流"]
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 axisTick: {
    //                     alignWithLabel: true
    //                 },
    //                 data:txdata
    //             }
    //         ],
    //         yAxis: {type: 'value',
    //             axisLabel: {
    //                 formatter: '{value}a'
    //             }},
    //         series:[{
    //             name: '负载电流',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         },{
    //             name: '太阳能充电电流',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         }
    //         ]
    //     });
    // };
    // const drawLine3=()=> {
    //     let myChart = echarts.init(document.getElementById('myChart3'));
    //     // if(isClear===true){
    //     //     myChart.clear();
    //     // }
    //     myChart.clear();
    //     // 绘制图表
    //     myChart.setOption({
    //         color: colors,
    //         title: {},
    //         tooltip: {},
    //         legend: {
    //             data: ["风速","流速"]
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 axisTick: {
    //                     alignWithLabel: true
    //                 },
    //                 data:txdata
    //             }
    //         ],
    //         yAxis: {
    //             type: 'value',
    //             axisLabel: {
    //                 formatter: '{value}m/s'
    //             }
    //         },
    //         series:[{
    //             name: '水速',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         },{
    //             name: '流速',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         }
    //         ]
    //     });
    // };
    // const drawLine4=()=> {
    //     let myChart = echarts.init(document.getElementById('myChart4'));
    //     // if(isClear===true){
    //     //     myChart.clear();
    //     // }
    //     myChart.clear();
    //     // 绘制图表
    //     myChart.setOption({
    //         color: colors,
    //         title: {},
    //         tooltip: {},
    //         legend: {
    //             data: ["环境温度","水温"]
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 axisTick: {
    //                     alignWithLabel: true
    //                 },
    //                 data:txdata
    //             }
    //         ],
    //         yAxis: {
    //             type: 'value',
    //             axisLabel: {
    //                 formatter: '{value}℃'
    //             }
    //         },
    //         series:[{
    //             name: '环境温度',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         },{
    //             name: '水温',
    //             data: [820, 932, 901, 934, 1290, 1330, 1320],
    //             type: 'line',
    //         }
    //         ]
    //     });
    // };
    useEffect(()=>{
        //drawLine1()
        // drawLine2()
        // drawLine3()
        // drawLine4()
    },[res])

    return(
        <div>
            {/*<Row style={{height:'50px'}}>*/}
            {/*    <span style={{paddingLeft:'10px'}}>选择图形显示：</span>*/}
            {/*    <Select*/}
            {/*        labelInValue*/}
            {/*        style={{ width: '200px'}}*/}
            {/*        onChange={handleChange}*/}
            {/*        mode="multiple"*/}
            {/*        allowClear*/}
            {/*        placeholder="请选择">*/}
            {/*        <Option value="listvoltage">蓄电池电压</Option>*/}
            {/*        <Option value="listloadCurrent">负载电流</Option>*/}
            {/*        <Option value="listtemperature">环境温度</Option>*/}
            {/*        <Option value="listloadVoltage">蓄电池负载电压(v)</Option>*/}
            {/*        <Option value="listsolarCurrent">太阳能充电电流(a)</Option>*/}
            {/*        <Option value="listsolarVoltage">太阳能充电电压(v)</Option>*/}
            {/*        <Option value="listwindSpeed">风速(m/s)</Option>*/}
            {/*        <Option value="listwaterSpeed">流速(m/s)</Option>*/}
            {/*    </Select>*/}
            {/*    <span style={{paddingLeft:'40px'}}></span>*/}
            {/*    <Button onClick={showChart}> 确定</Button>*/}
            {/*</Row>*/}
            <div  id='myChart1' style={{width:'1100px',height:'450px'}}> </div>
            
        </div>
    )
}
export default EChartShow;