React中通过Echarts实现磁贴的呈现与跳转效果

1、实现效果

• 内容模块通过磁贴效果进行呈现
• 双击对应磁贴模块，可以实现不同的页面跳转效果
• 具体效果截图如下

• 双击“个人信息”跳转到如下页面

2、准备工作：安装Echarts组件库

•   安装代码如下

npm install echarts --save

3、父子页面结构：

• 为友好实现本效果，采取父子页面结构，即真正的磁贴效果在子页面完成，由父页面调用进行呈现

4、父页面：index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../../style_css/antd.css';  // Add
import { Card, Layout } from 'antd';
import Child from './child.js'; //引入echarts实现磁贴效果的子页面
const { Header, Content, Footer, Sider } = Layout
class Index extends Component {
    render() {
        return (
            <Layout>
                <Header className="header">
                    <h1 className="App-logo">在线学习平台</h1>
                </Header>
                <Content style={{ padding: '0 50px' }}>
                    <Card style={{ marginTop: '50px' }}>
                    <Child> </Child>         {/* 引用echarts实现磁贴效果的子页面  */}
                    </Card>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    ©2017 Created by ************
                </Footer>
            </Layout>
        );
    }
}
export default Index;

5、子页面：child.js

• 不了解componentDidUpdate的小伙伴，请参考：http://blog.csdn.net/zrcj0706/article/details/78608740

import React from 'react'
import echarts from 'echarts/lib/echarts' //必须引入echarts插件
import PropTypes from "prop-types";//路由跳转需要
class Child extends React.Component {
    static contextTypes = {
        router: PropTypes.object//路由跳转需要
    }
    constructor(props, context) {//路由跳转需要
        super(props, context)
        this.initPie = this.initPie.bind(this)
    }
    //echarts呈现磁贴效果 
    initPie() {
        const option_select = {
            tooltip: {
                formatter: '{b}'
            },
            series: [
                {
                    name: '内容选择',
                    type: 'treemap',//类型：treemap，磁贴类型
                    zoomToNodeRatio: 0,
                    nodeClick: false,//屏蔽节点点击移至中心
                    breadcrumb: {
                        show: false
                    },
                    label: {
                        normal: {
                            fontSize: 20
                        },
                        show: true,
                        formatter: '{b}'
                    },
                    //磁贴颜色
                    color: [
                        '#c23531', '#314656', '#61a0a8', '#dd8668',
                        '#91c7ae', '#6e7074', '#61a0a8', '#bda29a',
                        '#44525d', '#c4ccd3'
                    ],
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        normal: {
                            gapWidth: 1,
                            borderWidth: 0.5,
                            borderWidthColorSaturation: 0.6,
                        }
                    },
                    //磁贴内容文本，value值代表磁贴面积大小，同为1说明比例相同，如果有2有1,2的面积要大于1的
                    data: [
                        {
                            value: 1,
                            name: '我的笔记',
                        },
                        {
                            value: 1,
                            name: '个人信息',
                        },
                        {
                            value: 1,
                            name: '我的任务',
                        }, {
                            value: 1,
                            name: '我的课堂',

                        }, {
                            value: 1,
                            name: '我的作业',
                        },
                        {
                            value: 1,
                            name: '课外活动',
                        },
                        {
                            value: 1,
                            name: '拓展活动',
                        },
                        {
                            value: 1,
                            name: '比赛',
                        },
                    ]
                }
            ]
        }
        var myChart = echarts.init(this.ID) //初始化echarts
        this.ID.oncontextmenu = function () {   //屏蔽原本右键“保存图片”等事件
            return false;
        }
        let props = this.props
        //设置options
        if (myChart.getOption() == undefined) {
            myChart.setOption(option_select)
        }
        else myChart.setOption(myChart.getOption())
        window.onresize = function () {
            myChart.resize()
        }
        // 双击事件
        myChart.on('dblclick', dblClick.bind(this))
        function dblClick(param) {
            switch (param.data.name) {
                case '我的笔记': { //如果双击我的笔记，则跳转到对应页面
                    this.context.router.history.push("/App/SelectSubject_Index");
                    break;
                }
                case '个人信息': {
                    this.context.router.history.push("/App/SelectSubject_Index");
                    break;
                }
                case '我的任务': {
                    this.context.router.history.push("/App/MapType_MyMap");
                    break;
                }
                case '我的课堂': {
                    this.context.router.history.push("/App/MapType_TopMap");
                    break;
                }
                case '我的作业': {
                    this.context.router.history.push("/App/Statistics_Index");
                    break;
                }
                case '课外活动': {
                    this.context.router.history.push("/App/Search_Index");
                    break;
                }
                case '拓展活动': {
                    window.location.href = 'https://blog.csdn.net/zrcj0706/article/list/2';
                    break;
                }
                case '比赛': {
                    this.context.router.history.push("/App/User_Index/MyInformation");
                    break;
                }
            }
        }
    }
    // 不了解componentDidUpdate的小伙伴，详情请参考：http://blog.csdn.net/zrcj0706/article/details/78608740
    componentDidUpdate() { 
        this.initPie()
    }
    render() {
        // 渲染组件
        const { width = "100%", height = '700px' } = this.props
        return <div ref={ID => this.ID = ID} style={{ width, height }}></div>
    }
}
export default Child;