/*
* @Author: 作者
* @Date: 2022-07-05 17:16:05
* @LastEditors: 最后修改人
* @LastEditTime: 2022-07-06 14:39:27
* @Description: 描述
*/
import React, { useState, useEffect, useRef } from 'react
import * as echarts from 'echarts';
const FirstLacp = (props) => {
// 基于准备好的dom，初始化echarts实例
const myLcap = useRef(null);
const { charts } = props.data;
const myChart = useRef(null);
// const [myChart, setMyChart] = useState();
//useState的Set方法实际上是覆盖掉以前的数据 ，所以选择用useref存储，这样的话没有覆盖一说，更好理解。
useEffect(() => {
myChart.current = echarts.init(myLcap.current);
}
}, []);
//写两个useEffect有先后顺序。满足先创建Echart后再调用Echart中的方法控制样式和数据
useEffect(() => {
//判断数据是否已经传过来 避免第一次初始化时。数据为空 下列方法获取不到对应参数而报错
if (charts) {
var color = ['rgba(23, 255, 243', 'rgba(119,61,190'];
var lineY = [];
for (var i = 0; i < charts.names.length; i++) {
var x = i;
if (x > color.length - 1) {
x = color.length - 1;
}
var data = {
name: charts.names[i],
type: 'line',
color: color[x] + ')',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[x] + ', 0.3)',
},
{
offset: 0.8,
color: color[x] + ', 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
symbol: 'circle',
symbolSize: 5,
data: charts.value[i],
};
lineY.push(data);
}
// lineY[0].markLine = {
// silent: true,
// data: [
// {
// yAxis: 5,
// },
// {
// yAxis: 100,
// },
// {
// yAxis: 200,
// },
// {
// yAxis: 300,
// },
// {
// yAxis: 400,
// },
// ],
// };
// // 绘制图表
myChart.current.setOption({
backgroundColor: '#0d235e',
tooltip: {
trigger: 'axis',
},
legend: {
data: charts.names,
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '4%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: charts.lineX,
axisLabel: {
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
formatter: function (params) {
return params.split(' ')[0];
},
},
},
yAxis: {
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
series: lineY,
});
setInterval(() => {
myChart.current.setOption({
legend: {
selected: {
出口: false,
入口: false,
},
},
});
myChart.current.setOption({
legend: {
selected: {
出口: true,
入口: true,
},
},
});
}, 1000);
}
}, [charts]);
return (
<div
ref={myLcap}
id="lacpEchart"
style={{
width: '1200px',
height: '500px',
backgroundColor: 'white',
}}
></div>
);
};
export default FirstLacp;
优化完毕的函数式echart组件
/*
* @Author: 作者
* @Date: 2022-07-05 17:16:05
* @LastEditors: 最后修改人
* @LastEditTime: 2022-07-07 09:20:06
* @Description: 描述
*/
import React, { useEffect, useRef, useMemo } from 'react';
import * as echarts from 'echarts';
const FirstLacp = (props) => {
// 基于准备好的dom，初始化echarts实例
const myLcap = useRef(null);
const { data } = props;
const myChart = useRef(null);
useEffect(() => {
if (myLcap.current) {
myChart.current = echarts.init(myLcap.current);
}
}, []);
const lineY = useMemo(() => {
var color = ['rgba(23, 255, 243', 'rgba(119,61,190'];
//如果data有值则执行&&后面的 如果data为空则不执行
return (
data.value &&
data.value.map((item, index) => {
return {
name: item.name,
type: 'line',
color: color[index] + ')',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[index] + ', 0.3)',
},
{
offset: 0.8,
color: color[index] + ', 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
symbol: 'circle',
symbolSize: 5,
data: item.data,
};
})
);
}, [data]);
useEffect(() => {
console.log('%%%%%%', data);
if (data.length != 0) {
myChart.current.setOption({
backgroundColor: '#0d235e',
tooltip: {
trigger: 'axis',
},
legend: {
data: '',
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '4%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.lineX,
axisLabel: {
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
formatter: function (params) {
return params.split(' ')[0];
},
},
},
yAxis: {
name: data.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
series: lineY,
});
}
}, [data]);
return (
<div
ref={myLcap}
id="lacpEchart"
style={{
width: '1200px',
height: '500px',
backgroundColor: 'white',
}}
></div>
);
};
export default FirstLacp;
