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">
|
||||
<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>
|
||||
|
||||
|
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