PC4-插件使用（终）：Echarts ，tiny富文本编译器，xlsx使用excel，map百度地图

憨憨404

已于 2023-05-04 08:46:10 修改

阅读量225

点赞数

分类专栏： react 文章标签： react.js 前端前端框架

于 2023-05-04 08:18:41 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/130399719

版权

react 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Echarts使用：封装一下，请求的话需要扣细节了。

useEffect模仿组件挂载完成后执行，解决dom在ts中报错

import React, { useEffect } from 'react';
import './index.scss'
// 导入echarts
import * as echarts from 'echarts';

const Echarts = () => {
    var main1: any = null;
    // 要在组件挂载完成后执行,useEffect模仿
    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1') || document.body);
        
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

    return (
        <div>
            <div id="main1" style={{ width: 600, height: 400 }}></div>
        </div>
    );
};

export default Echarts;

封装echarts

import React, { useEffect } from 'react';
import './index.scss'
// 导入echarts
import * as echarts from 'echarts';

const Echarts = () => {
    // 提前为空可以定义加载中
    let main1:any = null
    let main2:any = null
    let main3:any = null
    // 要在组件挂载完成后执行,useEffect模仿挂载完成的生命周期钩子函数
    useEffect(() => {
        // 定义函数参数，先占位。后边请求传入数据
        main1 = initEcharts('main1','',[],[])
        main2 = initEcharts('main2','',[],[])
        main3 = initEcharts('main3','',[],[])

        // 显示loading动画
        main1.showLoading();
        main2.showLoading();
        main3.showLoading();

        // 模拟发请求
        setTimeout(() => {
            initEcharts(
            'main1',
            '商品售量统计',
            ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            [5, 20, 36, 10, 10, 20]
            );
            initEcharts(
                'main2',
                '车子售量统计',
                ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                [30, 30, 30, 30, 30, 30]
            );
            initEcharts(
                'main3',
                '房子售量统计',
                ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                [5, 10, 15, 20, 25, 30]
            );
            // 关闭loading动画
            main1.hideLoading();
            main2.hideLoading();
            main3.hideLoading();
        }, 2000);
    },[])
    // // //:::
    // 定义封装的组件：可调用了: dom节点，titleText表名称，xAxisdate表类别，seriesdata数据
    const initEcharts = (dom:any, titleText:any, xAxisdata:any, seriesdata:any)=>{
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(dom) || document.body);
        
        // 指定图表的配置项和数据
        myChart.setOption({
            title: {
              text: titleText
            },
            tooltip: {},
            xAxis: {
            //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                data:xAxisdata
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                // data: [5, 20, 36, 10, 10, 20]
                data:seriesdata
              }
            ]
          });
          // 导出使用了  
          return myChart
    }
    return (
        <div className='echarts'>
            <div id="main1" style={{ width: 500, height: 400 }}></div>
            <div id="main2" style={{ width: 500, height: 400 }}></div>
            <div id="main3" style={{ width: 500, height: 400 }}></div>
        </div>
    );
};

export default Echarts;

tiny 编译器使用

// // // 导入编译器组件：

npm install tinymce@latest --save

import React, { useRef } from 'react';
import './index.scss'
// 导入组件
import { Button } from 'antd';

// // // 导入编译器组件：
// npm install tinymce@latest --save
import { Editor } from '@tinymce/tinymce-react';

const MyEditor = () => {
    let editorRef:any = useRef('')
    let handleClick = () => {
        // 获取组件实例
        console.log(editorRef.current.getContent());
    }
    return (
        // 渲染编译器组件
        // oninit 方法会在Editor组件初始化完成时自动执行，通过参数editor可以获取组件的实例
        <div className='myeditor'>
            <Editor
                apiKey='your-api-key'
                onInit={(evt, editor) => editorRef.current = editor}
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                    ],
                    toolbar: 'undo redo | blocks | ' +
                        'bold italic forecolor | alignleft aligncenter ' +
                        'alignright alignjustify | bullist numlist outdent indent | ' +
                        'removeformat | help',
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                }}
            />
            <Button onClick={handleClick}>发布</Button>
        </div>
    );
};

export default MyEditor;

Excel 导入导出 xlsx插件：导入导出插件。

input 的 file 可以变成文件选择框。但是不好看，

因此：隐藏文件选择框，button点击弹出

：：：：：：代码如下

import React, { useRef } from 'react';
import './index.scss'
import * as XLSX from 'xlsx'
import { Button, notification } from 'antd';
import fs from 'file-saver'

const Excel = () => {
    let inputRef: any = useRef()
    // // // 导入xlsx插件：npm install xlsx
    // 实现思路：选择文件，获取文件，解析文件，本地预览文件/上传到服务器

    // 点击button组件，调用input导入导出
    let handleImport = () => {
        inputRef.current.click()
    }
    let handleChange = (e: any) => {
        // 被调用后，获取文件
        let file = e.target.files[0]
        // 解析文件后缀

        const types = file.name.split('.')[1]
        const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)
        // 如果不存在提示错误
        if (!fileType) {
            notification.error({ message: '格式错误！请重新选择' })
            return
        }

        // 读取文件内容，格式化输出到网页
        // 方式1（官网推荐、如果有报错就使用方式2）
        file.arrayBuffer().then((ab: any) => {
            /* Parse file */
            const wb = XLSX.read(ab);
            const ws = wb.Sheets[wb.SheetNames[0]];

            /* Generate HTML */
            var TableContainer = document.getElementById('TableContainer') || document.body
            TableContainer.innerHTML = XLSX.utils.sheet_to_html(ws)
        });
    }
    // // // 导出file-saver插件：npm i --save-dev @types/file-saver
    // 思路1：借助xlsx解析dom元素的内容，通过file-saver生成并下载文件到本地
    // 思路2：发动请求从服务器获取数据，通过file-saver生成并下载文件到本地
    var handleExport = () => {
        excelExport(document.querySelector('table'), 'export_react');
    }

    function excelExport(table: any, filename: any) {
        // workbook,
        const wb = XLSX.utils.table_to_book(table)

        /* Export to file (start a download) */
        const defaultCellStyle = {
            font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
            fill: { fgColor: { rgb: 'FFFFAA00' } },
        }
        const wopts: any = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
            cellStyle: true,
            defaultCellStyle: defaultCellStyle,
            showGridLines: false,
        }
        const wbout = XLSX.write(wb, wopts)
        const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
        fs.saveAs(blob, filename + '.xlsx')
    }

    var s2ab: any = (s: any) => {
        if (typeof ArrayBuffer !== 'undefined') {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
        } else {
            const buf = new Array(s.length);
            for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
            return buf;
        }
    }
    return (
        <div className='excel'>
            <input  ref={inputRef} onChange={handleChange} type="file"/>
            <Button onClick={handleImport}>导入</Button>
            <Button onClick={handleExport}>导出</Button>

            {/* 导入后读取： */}
            <div id="TableContainer"></div>
        </div>
    );
};

export default Excel;

.excel{
    input{
        display: none;
    }
    table{
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        line-height: 40px;
        tr{
            border: 1px solid #ccc;
            td{
                border: 1px solid #ccc;
            }
        }
        tr:nth-child(even){
            background-color: lightblue;
        }
    }
}

Map（百度地图）高德地图使用也是差不多的

识别不了插件，那就别tsx后缀了，改为jsx

// 使用npm方式安装react组件库，然后通过es模块加载

先html中引入秘钥（待定）
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=EqjFtTz81rMg5KHAN9H7VSDf7V7YBb06"></script>

npm install react-bmapgl --save

import React from 'react';
import {Map,Marker,NavigationControl,InfoWindow,ZoomControl,MapTypeControl} from 'react-bmapgl'
// public文件夹下index.html中引入秘钥key
{/* <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=EqjFtTz81rMg5KHAN9H7VSDf7V7YBb06"></script> */}

const MyMap = () => {
    return (
        // 百度地图插件下载：
        <div className='map'>
            {/* enableScrollWheelZoom 开启鼠标缩放 */}
            {/* style={{height:700}} 通过css样式设置地图的高度 */}
            {/* center={{lng: 116.402544, lat: 39.928216}} 地图的中心点 */}
            {/* zoom="1" 地图的缩放级别 */}
            <Map enableScrollWheelZoom style={{height:700}} center={{lng: 116.402544, lat: 39.928216}} zoom="11">
                <Marker position={{lng: 116.402544, lat: 39.928216}} />
                <NavigationControl /> 
                <ZoomControl  />
                <MapTypeControl />
                {/* <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/> */}
            </Map>
        </div>
    );
};

export default MyMap;