React引入图表(TypeScript)

一、安装Echarts

npm i echarts -S

二、创建页面EchartsView.ts页面

//代码如下
import * as  echarts  from "echarts";
function EchartsView() {
    return ( <div>
        <h1>EchartsView</h1>
    </div> );
}

export default EchartsView;

三、路由创建便于切换页面

//导入页面
import EchartsView from "../views/EchartsView";
// 创建一个基础路由配置
const baseRouter = [
  {path:'/echarts',element:<EchartsView/>}
]
// 导出基础路由
export default baseRouter

1.切换网站（不同地址前面不同）

四、代码部分

//导入echarts
import * as  echarts  from "echarts";
//导入hook
import { useEffect, useState } from "react";
// 图表选项
var baseOption = {
    title:{text:'学习react一周睡觉时间'},
    tooltip:{},
    legend:{data:["睡眠时间"]},
    xAxis:{data:[1,2,3,4,5,6,'日']},
    yAxis:{},
    series:[
        {name:"睡眠时间",type:"bar",data:[8,7,6,5,4,7,8,14]}
    ]
}
function EchartsView() {
    // 定义图表的数据
    const [option,setOption] = useState(baseOption);
    useEffect(()=>{
        var container = document.getElementById("container") as HTMLElement
        // 初始化图表
        var echart = echarts.init(container,'light')
        // 更新图表数据
        echart.setOption(option)
    },[option])
    return ( <div>
        <h1>EchartsView</h1>
        {/* 动态调整数据 */}
        <p>周三睡眠：<input value={option.series[0].data[2]} onChange={e=>{
            var temp ={...option};
            temp.series[0].data[2] = Number(e.target.value)
            setOption(temp)
        }}/></p>
        <div id="container" style={{width:'100%',height:'800px'}}></div>
    </div> );
}

export default EchartsView;

五、补充使用typescript需要安装

npm install @types/echarts --save