Echarts实现点击列表联动饼图的示例代码.docxVIP

第

Echarts实现点击列表联动饼图的示例代码

目录简单易懂的Echars案例，实现点击列表联动饼图效果图1.首先我们先写一个左侧列表StageLineStageLine子组件StageItem2.接下来我们写右侧饼图3.在最外层父级，写一些方法，进行联动操作。

简单易懂的Echars案例，实现点击列表联动饼图

安装echarts-for-react项目中引入importReactEChartsfromecharts-for-react开始写案例啦！！！

效果图

1.首先我们先写一个左侧列表StageLine

利用StageItem将data中的数据遍历并展示。

importReact=require(react);

import{StageItem}from./StageItem;

constdata=[

{name:糖,value:12},

{name:蛋白质,value:24},

{name:脂肪,value:15},

typeStageLineProps={

handleClickPie:(index:number)=void;

setCurrentIndex:(o:number)=void;

exportdefaultfunctionStageLine({

handleClickPie,

setCurrentIndex,

}:StageLineProps){

return(

div

{data.map((item,index)={

return(

key={index}

()={

handleClickPie.(index);

setCurrentIndex.(index);

StageItemtitle={item.name}value={item.value}/

/div

/div

}

StageLine子组件StageItem

import{Group,Text}from@mantine/core;

importReact=require(react);

typeStageItemProps={title:string;value:string};

exportfunctionStageItem({title,value}:StageItemProps){

return(

Group

spacing={2}

noWrap

align=center

sx={{

cursor:pointer,

width:200,

display:flex,

flexDirection:row,

flexWrap:nowrap,

justifyContent:center,

alignItems:stretch,

alignContent:stretch,

alignSelf:normal,

Text

sx={{

backgroundColor:#004399,

padding:6px8px,

color:white,

minWidth:40,

maxWidth:85,

lineHeight:18px,

alignItems:stretch,

display:inline-block,

flexShrink:0,

size={12}

weight={600}

{title}

/Text

Text

sx={{

backgroundColor:rgba(0,67,153,0.06),

padding:6px8px,

color:#004399,

flexGrow:1,

.react-katex:{

//height:26px,

size={12}

weight={600}

{value-}

{/*divinline-block}}{unit}/div*/}

/Text

/Group

}

2.接下来我们写右侧饼图

我们利用forwardRef来接受从父组件传递过来的ref，并将ref赋给饼图组件ReactECharts