定义一些option

// 滑动条，一个页面展示5条数据
const sliderDataZoom = [{type: 'slider',height: 8,bottom: 0,zoomLock: true,borderColor: '#fff',fillerColor: '#e4e4e4',showDataShadow: false,textStyle: false,startValue: 0,endValue: 4,},
];
// 不用滑动条
const noDataZoom = [{show: false,},
];// 重新渲染时，不改变的部分
const invariantOption = {grid: {left: 0,right: 0,top: 40,bottom: 18,containLabel: true,},tooltip: {trigger: 'axis',},color: ['#3388FF', '#FF9900', '#11C79B', '#FF9900', '#11C79B'],legend: {show: true,textStyle: {fontSize: '.14rem',color: '#223355',},data: ['指标1', '指标2', '指标3', '指标4', '指标5'],},yAxis: [{type: 'value',position: 'left', // 左边的比例尺axisLabel: {textStyle: {color: '#223254',fontSize: '.14rem',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: '#EEE',type: 'dashed',},},splitLine: {show: true,lineStyle: {color: '#EEE',type: 'dashed',},},},{type: 'value',position: 'right', // 右边的比例尺axisLabel: {textStyle: {color: '#223254',fontSize: '.14rem',},formatter: '{value}%',},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: '#EEE',type: 'dashed',},},splitLine: {show: true,lineStyle: {color: '#EEE',type: 'dashed',},},min: 0,max: 100,},],
};

得到Option的函数

const [option, setOption] = useState({});const getOption = (list) => {let xAxisData = [];let lineData1 = [];let lineData2 = [];let lineData3 = [];let lineData4 = [];let lineData5 = [];list.forEach((element) => {xAxisData.push(element.xLabelName);lineData1.push(element.xxxx1);lineData2.push(element.xxxx2);lineData3.push(element.xxxx3);lineData4.push(parseFloat(element.xxxxRate1.split('%')[0])); // 字符串转为数字，才能正确展示折线图lineData5.push(parseFloat(element.xxxxRate2.split('%')[0]));});const newOption = {...invariantOption,dataZoom: list.length > 5 ? sliderDataZoom : noDataZoom,xAxis: [{axisLabel: {interval: 0,textStyle: {color: '#223254',fontSize: '.14rem',},formatter: (value) => {value = value || '';return value.length > 5 ? value.slice(0, 5) + '\n' + value.slice(5) : value; // xLabelName换行},},axisTick: {show: false,},axisLine: {show: false,},data: xAxisData,},],series: [{name: 'xxxx1',type: 'bar', // 柱状图data: lineData1,barWidth: '10',yAxisIndex: 0,},{name: 'xxxx2',type: 'bar',data: lineData2,barWidth: '10',},{name: 'xxxx3',type: 'bar',data: lineData3,barWidth: '10',},{name: 'xxxx4',type: 'line', // 折线图data: lineData4,yAxisIndex: 1,},{name: 'xxxx5',type: 'line',data: lineData5,},],};setOption(newOption);return new Promise((resolve) => {// 确保option已经更新（主要为了更新滑动条是否展示）resolve();});
};

获取展示数据，然后调用上诉函数

const getRegionStatisticsData = () => {const params = {};// 调用封装的接口api().getRegionStatistics(params).then((res) => {const list = res?.data?.list || [];getOption(list).then(() => {// 更新完option再更新数据setRegionStatistics(list);});});
};

自动滚动

const timerRef = useRef(); // 用ref实例，注销时可确保清除useEffect(() => {if (timerRef.current) {clearInterval(timerRef.current);timerRef.current = null;}if (regionStatistics?.length > 0 && option?.dataZoom?.length > 0 && option.dataZoom[0].endValue) {// 有数据，且展示滑动条setTimeout(() => {// 等待页面其他模块加载，按需选择是否需要setTimeoutconst intervalTimer = setInterval(() => {// 间隔一段时间自动滚动一项let transOption = { ...option };const position = option.dataZoom[0];if (position.endValue === regionStatistics.length - 1) {transOption.dataZoom[0].endValue = 4;transOption.dataZoom[0].startValue = 0;setOption(transOption);} else {transOption.dataZoom[0].endValue = position.endValue + 1;transOption.dataZoom[0].startValue = position.startValue + 1;setOption(transOption);}}, 3500);timerRef.current = intervalTimer;}, 3000);}
}, [regionStatistics]);useEffect(() => {return () => {// 注销组件时清除定时器if (timerRef.current) {clearInterval(timerRef.current);timerRef.current = null;}};
}, []);const onClearTimer = () => {if (timerRef.current) {clearInterval(timerRef.current);timerRef.current = null;}
};

Echarts组件

1. 点击每一项，跳转至详情页面
2. 鼠标点击滑动条后，停止自动滚动

<ReactEchartsstyle={{ width: '100%', height: '100%' }}option={option}onEvents={{click: onGotoRegionStatistics,dataZoom: onClearTimer,}}/>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！