taro react Hook Echarts

齐元章
2023-12-01

个人测试  bug多多

// 柱状图
import React, { Component, useEffect, useRef, useState } from "react";
import { View } from "@tarojs/components";
import { EChart } from "echarts-taro3-react";
import "./index.less";

export default function index() {
  const chart = useRef<any>()
  const [value, setValue] = useState({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.8)"
        }
      }
    ]
  });
  useEffect(() => {
    //模拟了vue的Moundted  一般在这请求ajax
    chart.current.refresh(value)
    console.log(chart,value,'555---------------------------------------------------------------------------')
    console.log("挂载完成");
  });
  return (
    <View className="bar-chart">
      <EChart ref={chart} canvasId="bar-canvas" />
    </View>
  );
}

 类似资料:

相关阅读

相关文章

相关问答