【ucharts】超详细介绍使用ucharts图表

✨$编写不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教

使用背景

公司要求在taro框架中使用图表，同时我自己的导航网(react+ts)也要用图表。一开始呢，我肯定是跟着大家一样用echarts的或者使用taro市场插件里的图表的。但是神奇的事发生了，不兼容！！！taro3版本。我强颜欢笑，我就疯狂的查找其他好用的图表，最后找到了牛叉的ucharts。为什么说他牛叉呢？首先他适合多端开发，其次他的文档有对应的代码，你直接ctrl+cv就ok了。如下图:

okok,你肯定说我不想贴在自己代码里调试，我就想看看他每个属性的怎么用的，有没有在线调试，在线文档看的呀。一开始我呢，其实跟大家一样想的，后来我发现，居然真的有在线调试的功能！！我只能说，作者已经给开发者做到了保姆级别了！

1.介绍uCharts

1.ucharts最新官网
https://www.ucharts.cn/v2/#/

2.适合多端开发（taro,uniapp,微信,qq,百度,支付宝,字节跳动,快手,web,vue）。你想要的他都有了！
3.ucharts有在线调试功能，在线图表属性介绍文档。
4.ucharts还有自己的模板，让你快速上手，妈妈再也不为我的学习所烦恼了。

2.使用ucharts

基于我的react+typescript项目为例

2.1下载ucharts

网址:https://www.ucharts.cn/v2/#/dwonload/index

npm i @qiun/ucharts

2.2项目中引入

废话不多说，直接上代码
home.tsx–父类

import G_LINE_INTERACT from "@/components/v1/common/ucharts/line/LineInteract"
class Home extends Component{
    lineRef:any;
    constructor(props:any>) {
        super(props)
        this.lineRef = createRef();
    }
     componentDidMount(): void {
     //加载ucharts，父类调用子类方法
        this.lineRef.current.getServerData()
    }
    render() {
		return (
			<>
				 <G_LINE_INTERACT ref={this.lineRef} />
			</>
		)
	}
}

LineInteract.tsx–子类

//coding = utf-8
//@Time : 2022-04-30 18:38
//@Author : 沉默小管
//@File : LineInteract.tsx
//@web  : www.php-china.com
//@Software: WebStorm
import { resInterface } from "@/network/v1/network/networkInterface";
import React, {forwardRef, MutableRefObject, useImperativeHandle, useRef, useState} from "react"
import uCharts from "@qiun/ucharts"
import styles from "./LineInteract.module.less"
/**
 * 组件类
 * @returns
 */
var uChartsInstance = {};
const LineInteract = forwardRef((props: any,ref:any) => {
    let [uChartsId, setUChartsId] = useState<string>("uChartsId");
    let [cWidth, setCWidth] = useState<number>(750);
    let [cHeight, setCHeight] = useState<number>(500);
    useImperativeHandle(ref,()=>({
        getServerData
    }))

    const getServerData = ()=>{
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
            let res = {
                categories: ["2020-12-10","2020-12-11","2020-12-12","2020-12-13","2020-12-14","2020-12-15","2020-12-16","2020-12-17","2020-12-18"],
                series: [
                    {
                        name: "日新增用户量",
                        data: [10,5,1,8,0,1,30,20,13]
                    }
                ]
            };
            showCharts(uChartsId, res);
        }, 500);
    }
    const showCharts=(id,data)=>{
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const ctx = canvas?.getContext("2d");
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        uChartsInstance[id] = new uCharts({
            type: "line",
            context: ctx,
            width: canvas.width,
            height: canvas.height,
            categories: data.categories,
            series: data.series,
            animation: true,
            background: "#FFFFFF",
            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
            padding: [15,10,0,15],
            legend: {},
            xAxis: {
                disableGrid: true,
                labelCount: 4
            },
            yAxis: {
                gridType: "dash",
                dashLength: 2
            },
            extra: {
                line: {
                    type: "straight",
                    width: 2
                }
            }
        });
        canvas.onclick = (e:any)=>{
            uChartsInstance[uChartsId].touchLegend(getH5Offset(e));
            uChartsInstance[uChartsId].showToolTip(getH5Offset(e));
        };
        canvas.onmousemove=(e:any)=>{
            uChartsInstance[uChartsId].showToolTip(getH5Offset(e));
        };
    }
    const getH5Offset=(e)=>{
        e.mp = {
            changedTouches: []
        };
        e.mp.changedTouches.push({
            x: e.offsetX,
            y: e.offsetY
        });
        return e;
    }
    return (<>
        <canvas id={uChartsId} className={styles.charts}></canvas>
    </>)
})
export default LineInteract

最终效果

更多使用ucharts请进入官网查看
https://www.ucharts.cn/v2/#/