获取返回值画echart
<ReactEcharts option={option} notMerge={true} lazyUpdate={true} />
<Button type="primary" onClick={doLine}>查询</Button>
ReactEcharts --->图表
Button--->按钮查询图表
option 值动态赋值。
const [option, setOption] = useState({})
const doCreatLine = async ()=> {
lineOption(data)
}
const lineOption = (data: any) => {
let option = {
title: {
text: 'Stacked Line',
textStyle: {
color: textColor
},
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads'],
textStyle: {
color: textColor
},
y: 'bottom'
},
grid: {
left: '6%',
right: '6%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.map((item: { req: any }, index: any) => { //react 遍历写法和juqery不同
return item.req
}),
axisLine: {
lineStyle: {
color: axisLineColor
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: axisLineColor
}
},
splitLine: {
lineStyle: {
color: splitLineColor
}
}
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: data.map((item: { email: any }, index: any) => {
return item.email
})
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: data.map((item: { UnionAds: any }, index: any) => {
return item.UnionAds
})
}
]
}
setOption(option) // option赋值,调用
}