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;