本文介绍了如何在React中使用Echarts实现可拖动的折线图，并与旭日图联动。当点击折线图上的点时，旭日图会同步更新。关键代码包括设置`dataZoom`属性以实现时间轴缩放，以及添加`onEvents`监听点击事件以更新旭日图数据。推荐查阅Echarts官方文档以获取更多详细信息。
这两天在做ehcarts图标的时候遇到了一些问题，总结一下~~
需求：可拖动的折线图与旭日图进行联动，点击折线图折点，旭日图同步更新，
好了直接上代码
const lineEchartsOption = (params, yAxis) => ({
title: {
text: '',
textStyle: {
color: '#666C73',
fontSize: 18,
},
left: 'center',
},
tooltip: {
trigger: 'axis' as 'axis' | 'none' | 'item' | undefined,
},
grid: {
left: 0,
right: '4%',
bottom: '50px', // 使用dataZoom的时候自己调试一下时间轴的位置
top: 30,
// top: 30,
containLabel: true,
},
xAxis: {
type: 'category' as 'category' | 'value' | 'time' | 'log' | undefined,
// boundaryGap: false,
data: params?.xAxis,
axisLine: {
lineStyle: {
color: '#ACACAC',
},
},
},
yAxis: {
name: yAxis,
type: 'value' as 'category' | 'value' | 'time' | 'log' | undefined,
axisLine: {
lineStyle: {
color: '#ACACAC',
},
},
},
// 可拖拽的时间轴，简单配置
dataZoom: [
{
type: 'slider',
start: 80,
end: 100,
// top: 20
},
{
start: 0,
end: 100,
}
],
series: [
{
name: yAxis,
type: 'line',
stack: yAxis,
data: yAxis.includes('(%)')
? params?.series?.map((item) => item * 100 || item)
: params?.series,
itemStyle: {
normal: {
color: '#FFD478',
lineStyle: {
color: '#FFD478',
},
},
},
},
],
});
const onEvents = {
'click': (e: any) => {
// 自己从e里边取数据请求旭日图数据
}
}
<ReactEcharts
showLoading={!datasourceLine}
onEvents={onEvents} // 绑定点击事件
option={lineEchartsOption(
{
xAxis: dataSourceLine?.xAxis || [],
series: dataSourceLine?.series || [],
},
'交易量（笔）',
)}
theme="Imooc"
style={{ height: '300px', width: '100%' }}
/>
这里其实就很简单，使用dataZoom，echarts官网里都有，可以去官网看一下
echarts官网： https://echarts.baidu.com/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
