|
|
|
|
@ -9,13 +9,11 @@ import echarts from "@/utils/echarts.min.js";
|
|
|
|
|
import "./index.less";
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
series: any,
|
|
|
|
|
full:any
|
|
|
|
|
series: any;
|
|
|
|
|
full: any;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Index({ series ,full}: Props) {
|
|
|
|
|
function Index({ series, full }: Props) {
|
|
|
|
|
const echartsRef = useRef<EchartsHandle>(null);
|
|
|
|
|
const [options, setOptions] = useState({
|
|
|
|
|
animation: false,
|
|
|
|
|
@ -145,40 +143,36 @@ function Index({ series ,full}: Props) {
|
|
|
|
|
color: "#ff8410",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: []
|
|
|
|
|
})
|
|
|
|
|
series: [],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const level = [8, 7, 6, 5, 4, 3, 2];
|
|
|
|
|
const [newOptions, setNewOptions] = useState(options)
|
|
|
|
|
const [newOptions, setNewOptions] = useState(options);
|
|
|
|
|
|
|
|
|
|
const updata = useCallback((res) => {
|
|
|
|
|
let option = JSON.parse(JSON.stringify(options))
|
|
|
|
|
option.series = JSON.parse(JSON.stringify(res))
|
|
|
|
|
let option = JSON.parse(JSON.stringify(options));
|
|
|
|
|
option.series = JSON.parse(JSON.stringify(res));
|
|
|
|
|
// 更新图表数据
|
|
|
|
|
setNewOptions(option)
|
|
|
|
|
}, [])
|
|
|
|
|
setNewOptions(option);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const cancelFull = useCallback((res) => {
|
|
|
|
|
full()
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
full();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setOptions(newOptions)
|
|
|
|
|
setOptions(newOptions);
|
|
|
|
|
}, [newOptions]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
updata(series)
|
|
|
|
|
}, [series])
|
|
|
|
|
|
|
|
|
|
updata(series);
|
|
|
|
|
}, [series]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Block>
|
|
|
|
|
<View id='box' className='box'>
|
|
|
|
|
<View id="box" className="echart-component">
|
|
|
|
|
<Echarts
|
|
|
|
|
force-use-old-canvas='false'
|
|
|
|
|
force-use-old-canvas="false"
|
|
|
|
|
echarts={echarts}
|
|
|
|
|
option={options}
|
|
|
|
|
ref={echartsRef}
|
|
|
|
|
@ -186,22 +180,26 @@ function Index({ series ,full}: Props) {
|
|
|
|
|
// style自定义设置echarts宽高
|
|
|
|
|
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
|
|
|
|
|
/>
|
|
|
|
|
<View className='box_background'>
|
|
|
|
|
<Image className='full' src={require("@/img/full-scran.png")} onClick={cancelFull}></Image>
|
|
|
|
|
<View className='power'>实时能量</View>
|
|
|
|
|
<View className="box_background">
|
|
|
|
|
<Image
|
|
|
|
|
className="full"
|
|
|
|
|
src={require("@/img/full-scran.png")}
|
|
|
|
|
onClick={cancelFull}
|
|
|
|
|
></Image>
|
|
|
|
|
<View className="power">实时能量</View>
|
|
|
|
|
{level.map((item) => (
|
|
|
|
|
<View className='line' key={item}>
|
|
|
|
|
<View className='number'>{item}</View>
|
|
|
|
|
<View className='bottom_line'></View>
|
|
|
|
|
<View className="line" key={item}>
|
|
|
|
|
<View className="number">{item}</View>
|
|
|
|
|
<View className="bottom_line"></View>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
<View className='line'>
|
|
|
|
|
<View className='number'>1</View>
|
|
|
|
|
<View className="line">
|
|
|
|
|
<View className="number">1</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className='time'>时间</View>
|
|
|
|
|
<View className="time">时间</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</Block >
|
|
|
|
|
</Block>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
blak-kong
2 years ago