feat: 人物轨迹图表功能
JINGYJ
11 months ago
parent
4511641865
commit
d8d4f42230
@ -1,3 +1,3 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M12 0H0L16 16V4C16 1.79086 14.2091 0 12 0Z" fill="#E80D0D"/>
|
<path d="M12 0H0L16 16V4C16 1.79086 14.2091 0 12 0Z" fill="#E64D1F"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 173 B After Width: | Height: | Size: 173 B |
@ -0,0 +1,101 @@
|
|||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
interface LineChartProps {
|
||||||
|
dataStatistics: any;
|
||||||
|
}
|
||||||
|
const LineChart: React.FC<LineChartProps> = ({ dataStatistics }) => {
|
||||||
|
const chartRef = useRef(null);
|
||||||
|
const seriesData: any[] = Array.isArray(dataStatistics.yAxis)
|
||||||
|
? dataStatistics.yAxis.map((item: any) => {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
name: item.device_name,
|
||||||
|
symbol: 'circle',
|
||||||
|
smooth: false,
|
||||||
|
data: item.value,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: { top: 30, right: 124, bottom: 24, left: 28 },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
name: '日期',
|
||||||
|
nameTextStyle: {
|
||||||
|
// padding: [-100, 10, 10, -30], // 修改单位位置
|
||||||
|
verticalAlign: 'top',
|
||||||
|
padding: [7, 0, 0, -15],
|
||||||
|
color: '#666',
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
show: true,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#8C8C8C',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
show: true,
|
||||||
|
color: '#E0E0E0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: dataStatistics.xAxis,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '7日出现次数',
|
||||||
|
nameTextStyle: {
|
||||||
|
padding: [0, 0, 0, 14], // 修改单位位置
|
||||||
|
color: '#666',
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
minInterval: 1,
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E0E0E0',
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: seriesData,
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
top: 10,
|
||||||
|
right: 30,
|
||||||
|
icon: 'rect',
|
||||||
|
// itemWidth: 16,
|
||||||
|
itemHeight: 4,
|
||||||
|
// itemGap: 30,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#333',
|
||||||
|
padding: [0, 0, 0, 4],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(chartRef.current);
|
||||||
|
const chartInstance = chartRef.current?.getEchartsInstance();
|
||||||
|
if (chartInstance) {
|
||||||
|
// 在这里调用 resize()，但通常你可能不需要这样做，除非有特殊情况
|
||||||
|
chartInstance.resize();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
return <ReactECharts ref={chartRef} style={{ width: '100%', height: '100%' }} option={option} />;
|
||||||
|
};
|
||||||
|
export default LineChart;
|
||||||
Loading…
Reference in New Issue