首页 > 其他分享 >react echats封装

react echats封装

时间:2023-06-12 09:55:16浏览次数:58  
标签:封装 指示器 EChartsOption react 柱状图 echats data echarts const

import * as echarts from "echarts";
import {EChartsOption} from 'echarts'
function Index(props:EChartsOption) {
  const echartsRef:any= useRef<HTMLElement>();
  useEffect(() => {
    const myChart = echarts.init(echartsRef.current as HTMLElement);
    myChart.setOption(props.option as EChartsOption);
  });
  return <div ref={echartsRef} style={{ width: "100%", height: "100%" }}></div>;
}
export default Index;

  data

import {EChartsOption } from 'echarts'
export const option:EChartsOption  = {
    // 柱状图的颜色
    color: ["#12ccee"],
    // 表的标题
    title: {
        text: "2019 年度销量",
        subtext: "Sub Title",
        // 标题的位置
        left: "center",
        top: "top",
        textStyle: {
            fontSize: 18,
            // 主标题文字的颜色。
            color: "#ee33aa",
        },
        subtextStyle: {
            fontSize: 12,
            // 主标题文字的颜色。
            color: "#445533",
        }
    },
    tooltip: {
        // 鼠标悬停柱状图是否有hover提示效果
        show: true,
        // 在哪种类型触发
        trigger: "axis",
        // 指示器类型。
        // 'line' 直线指示器
        // 'shadow' 阴影指示器
        // 'none' 无指示器
        // 'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
        axisPointer: {
            type: "cross"
        }
    },
    // x轴的数据
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    // y轴的数据
    yAxis: {},
    // 柱状图的数据name名字,类型bar,数据为data
    series: [{
        name: "销量",
        // 折线图line,柱状图bar,饼状图pie
        type: "line",
        data: [10, 22, 93, 45, 44, 100]
    }]
} as EChartsOption

  

标签:封装,指示器,EChartsOption,react,柱状图,echats,data,echarts,const
From: https://www.cnblogs.com/zjxzhj/p/17474149.html

相关文章

  • ChatGPT学习心得一(使用node+react做了一个案例)
    ChatGPT学习心得一(使用node+react做了一个案例) 项目地址http://chat.xutongbao.top项目截图编辑编辑编辑 编辑编辑使用技术栈node+SQLite+redis+nginx+log4js+express+jenkins+cdn+react+antd+react-scrollbars-custom+iconfont+webpack+postman+axios+redux+immut......
  • 【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记
    前言大家好我是歌谣今天继续给大家带来前端工作中遇到的实际性问题如何实现一个tab效果以及闪屏问题效果演示(tab滚动效果)案例遇到问题先去查api查百度一开始我以为是安卓的功能直接api打开<DemoBlocktitle='超长自动滚动'padding='0'><TabsdefaultActiveKey=......
  • react antd 表头分组渲染的问题记录
    importReact,{useEffect}from'react'import{observer}from'mobx-react'import{get}from'lodash'import{Modal}from'antd'importSelfTablefrom'@/view/common/self_table/self-table'impo......
  • 用C++封装的ADO类
    用C++封装的ADO类作者:刘振海.H文件//ADO.h:interfacefortheCADOclass.////#if!defined(AFX_ADO_H__5A466E67_5E04_445D_9CB0_C64650B9AC68__INCLUDED_)#defineAFX_ADO_H__5A466E67_5E04_445D_9CB0_C64650B9AC68__INCLUDED_#if_MSC_VER>1000#pragmaonce......
  • React - 06 初步尝试封装组件
    1.封装dialog组件调用2.函数组件是静态组件/*函数组件是“静态组件”第一次渲染组件,把函数执行+产生一个私有的上下文:EC(V)+把解析出来的props「含children」传递进来「但是被冻结了」+对函数返回的JSX元素「virtualDOM」进行渲染当我们点击按钮的......
  • React - 28 redux部分源码解析
    myRedux.jsimport_from'./assets/utils';/*实现redux的部分源码*/exportconstcreateStore=functioncreateStore(reducer){if(typeofreducer!=='function')thrownewError("Expectedtherootreducertobeafunction");......
  • 聊聊结合业务需求给出合理的技术解决方案,改进现有模块功能,提高系统的可扩展性,封装性,稳
    针对提高系统的可扩展性、封装性、稳定性,改进现有模块功能,以下是我给出的一些技术解决方案:使用面向对象编程的设计模式:可以采用一些设计模式如单例模式、工厂模式、观察者模式等,来提高系统的可扩展性和封装性。应用微服务架构:可以将系统拆分成多个独立的服务,使得每个服务都可......
  • 【React工作记录九十六】docker部署前后端项目在云服务器
    前言大家好我是歌谣最近开始前端和后端的学习需要部署项目在服务器上面命令部分目前只会部署的部分前端前彻底端的目录是在/ngng/html下面dockerrestartngng重新启动容器前端文件放置后端后端的文件在project下面步骤1dockerstopgeo2dockerrm-fgeo3dockerrmi-fgg......
  • react项目入口文件即调用顺序
    react项目入口文件,指的是启用react项目的主文件,它通常是一个JavaScript文件,包含了项目组件,并将这些组件渲染到界面上。该文件通常命名为index.js或app.js,并被放在应用程序的根目录中。使用cra创建的react项目入口文件是src目录下的index.js。这是一个简单的React入口文件示......
  • React - 04 函数组件的底层渲染机制
    1.函数组件创建:在SRC目录中,创建一个xxx.jsx的文件,就是要创建一个组件;我们在此文件中,创建一个函数,让函数返回JSX视图「或者JSX元素、virtualDOM虚拟DOM对象」;这就是创建了一个“函数组件”!!调用:基于ES6Module规范,导入创建的组件「可以忽略.jsx后缀名」,然后像写标签一样调用这个组......