react：react-redux && echarts实现简单的图表交互

这里使用redux进行数据的存储以及传递，使用store对状态进行调用，能够更方便的管理state在上下文之间的传递。

模块使用情况

    "antd": "^3.26.7",
    "echarts": "^4.6.0",
    "echarts-for-react": "^2.0.15-beta.1",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"

项目结构

echarts绘图组件

这里使用的是echarts-for-react，调用起来方便一些，当然也可以使用echarts的原生js

export function EchartsTest(props) {
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: Api(props.name),
            type: 'line',
            itemStyle:{
                color:"	#87CEFA"
            }
        }]
    };
    return <div>
        <ReactEcharts option={option} style={{ height: '600px', width: '800px' }} />
    </div>
}

这里对获取api数据进行模拟，之后可以通过axios通过接口获取数据，逻辑就是输入name之后获取相应的数据列表

const Api =  (name) => {
    const data = {"lilei": [820, 932, 901, 934, 1290, 1330, 1320],
    "hanmeimei": [820, 1345, 1020, 934, 590, 745, 600]}
    return data[name]
}

Radio选择组件，使用antd的Radio模块

antd是一个吹爆的react组件库，为啥？试试antd pro你就知道了
通过onchange获取数据，更改store中状态
因为这里的asyncSelect方法和num都是使用store进行处理，所以需要使用connect函数进行包装

const RadioGroup = connect(mapStateToProps, mapDispathToPorps)(function ({asyncSelect, num}) {
        console.log(num);
    return (
        <Radio.Group onChange={asyncSelect} value={num}>
            <Radio value="hanmeimei">hanmeimei</Radio>
            <Radio value="lilei">lilei</Radio>
        </Radio.Group>
    );
})

TestRudex组件，实现功能

简单的展示组件，向EchartsTest组件中传入 name变量（在store中获取），EchartsTest组件通过传入的name对数据进行更改刷新DOM

const mapStateToProps = state => ({num: state})
const mapDispathToPorps = {select, asyncSelect}

function TestRudex({num}) {
    return (
        <div>
            <RadioGroup></RadioGroup>
            <EchartsTest name={num}></EchartsTest>
        </div>
    )
}
export default connect(mapStateToProps, mapDispathToPorps)(TestRudex)

store内容 index.jsx

这里使用了logger组件，可以在控制台看到操作的信息，thunk组件使用异步操作

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import {selector} from './select.redux'


const store = createStore(
    selector, 
    applyMiddleware(logger, thunk)
)

export default store

select.redux.jsx 用来实现数据的保存以及更改
这里其实直接return type值就行

export const selector = (state="hanmeimei", action) => {
    switch (action.type) {
        case "hanmeimei":
            return "hanmeimei"
        case "lilei":
            return "lilei"
        default:
            return state
    }
}

export const select = e =>({type: e.target.value})
export const asyncSelect= e => dispatch => {
    // 异步测试
    setTimeout(() => {
        dispatch({type: e.target.value})
    }, 1500);
}

App.js

内容居中引入模块，因为使用了Redux所以需要传入store

function App() {
  return (
    <div align="center">
      <h1>测试Ecarts</h1>
        <Provider store={store}>
          <TestRudex/>
        </Provider>
    </div>
  )
}