{"id":489,"date":"2026-06-20T16:46:51","date_gmt":"2026-06-20T08:46:51","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=489"},"modified":"2026-06-20T16:46:51","modified_gmt":"2026-06-20T08:46:51","slug":"echarts-for-react-%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/20\/echarts-for-react-%e4%bd%bf%e7%94%a8\/","title":{"rendered":"echarts-for-react \u4f7f\u7528"},"content":{"rendered":"\n

\u67f1\u72b6\u56fe\u548c\u997c\u56fe<\/p>\n\n\n\n

index.jsx<\/h2>\n\n\n\n
import React, { useEffect } from 'react';\nimport StaffAmount from '.\/component\/StaffAmount';\nimport { useSelector, useDispatch } from 'umi';\nimport StaffTable from '.\/component\/StaffTable';\nimport Pie from '.\/component\/Pie';\nimport AgeBar from '.\/component\/AgeBar';\nimport Bar from '.\/component\/Bar';\nconst Index = () => {\n    const { \n        amountDataList, \n        staffData,\n        pieList,\n        columnList,\n        marriageData,\n        constellationData\n    } = useSelector(state => state.dashboard );\n    \/\/console.log(amountDataList,'amountDataList');\n    const dispatch = useDispatch();\n    useEffect(() => {\n        dispatch({\n            type: 'dashboard\/initDashboardList',\n        })\n    }, []);\n\n    return (\n        <div className=\"dashboard-container\">\n\n           {amountDataList.map((item, index) => (\n                <StaffAmount {...item} key={index}><\/StaffAmount>\n           ))}\n           {\/* \u997c\u56fe \u5b66\u5386  \u6027\u522b *\/}\n           {pieList.map((item, index) => (\n                <Pie {...item} key={index}><\/Pie>\n            ))}\n            {pieList[1] && <AgeBar {...pieList[1]} ><\/AgeBar>}\n            <Pie {...marriageData} ><\/Pie>\n            {\/* \u5458\u5de5\u6570\u91cf\u67f1\u72b6\u56fe *\/}\n            {columnList.map((item, index) => (\n                <Bar {...item} key={index}><\/Bar>\n            ))}\n           {\/* \u5458\u5de5\u8868\u683c *\/}\n           <StaffTable {...staffData}><\/StaffTable>\n           {\/* \u661f\u5ea7\u60c5\u51b5 *\/}\n           <Pie {...constellationData} ><\/Pie>\n\n\n\n        <\/div>\n    );\n};\n\n\nexport default Index;\n<\/code><\/pre>\n\n\n\n
\u6ce8\u610f\u70b9\uff0c\u9875\u9762\u521d\u59cb\u6e32\u67d3\u53ef\u80fd\u539f\u59cb\u6570\u636e\u4e3a[]\uff0c\u9700\u8981\u5224\u65ad\u5904\u7406<\/p>\n\n\n\n
{pieList[1] && <AgeBar {...pieList[1]} ><\/AgeBar>}<\/code><\/pre>\n\n\n\n
.\/component\/AgeBar.jsx<\/h2>\n\n\n\n
import React from 'react';\nimport ReactECharts from 'echarts-for-react';\nconst AgeBar = ({renderList, styleData}) => {\n    const option = { \n        title:{\n            text:'\u5e73\u5747\u5e74\u9f84',\n        },\n        xAxis:{\n            max:Math.ceil(Math.max(...renderList.map(item => item.age))),\n        },\n        yAxis:{\n            type:'category',\n            data:renderList.map(item => item.name),\n            inverse:true,\n            max: 1\n        },\n        series:[\n            {\n                realtimeSort:true,\n                type:'bar',\n                data:renderList.map(item => item.age),\n                label:{\n                    show:true,\n                    position:'right',\n                    valueAnimation:true,\n                }\n            }\n        ]\n    };\n    return (\n        <div className=\"staff-amount-container\" style={{...styleData}}>\n            <ReactECharts option={option} className=\"react_for_echarts\"\/>\n        <\/div>\n    );\n}\n\nexport default AgeBar;\n<\/code><\/pre>\n\n\n\n
import React from 'react';\nimport ReactECharts from 'echarts-for-react';\nconst Bar = ({title, renderList, styleData, br = false}) => {\n    const option ={\n        title: {\n            text: title,\n        },\n        tooltip: {\n            trigger: 'axis',\n        },\n        xAxis: [{\n            type: 'category',\n            data: renderList.xData,\n            axisLabel: {\n                interval: 0,\n                formatter: value => br ? value.split('').join('\\n') : value,\n               \/\/ rotate: 45,\n            }\n        }],\n        yAxis: [{\n            type: 'value',\n            minInterval: 1\n        }],\n        series: [\n            {\n                name:'\u4eba\u6570',\n                type: 'bar',\n                data: renderList.yData,\n                label: {\n                    show: true,\n                    precision: 1,\n                    position: 'top',\n                    valueAnimation: true,\n                }\n            }\n        ],\n    }\n    return (\n       \n        <div className=\"staff-amount-container\" style={{...styleData}}>\n            <ReactECharts option={option} className=\"react_for_echarts\"\/>\n        <\/div>\n              \n    );\n}\n\nexport default Bar;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u67f1\u72b6\u56fe\u548c\u997c\u56fe index.jsx \u6ce8\u610f\u70b9\uff0c\u9875\u9762\u521d\u59cb..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,12,11],"tags":[],"class_list":["post-489","post","type-post","status-publish","format-standard","hentry","category-echarts","category-react-","category-front"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"ECharts<\/a> React<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=489"}],"version-history":[{"count":1,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/489\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/489\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}