定义一些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组件

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

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

echart柱状图、折线图自动滚动相关推荐

php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
Echars 折线图自动向右平移显示数据(数据量大的时候适应)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Ech ...
轮播图自动滚动无缝连接 js
轮播图自动滚动无缝连接 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...

echart柱状图、折线图自动滚动

定义一些option

得到Option的函数

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

自动滚动

Echarts组件

echart柱状图、折线图自动滚动相关推荐

最新文章

热门文章