使用ECharts绘制预测数据

收藏

本帖最后由 lucas.Yan 于 2024-7-30 18:06 编辑

背景：
在数据分析和报告中，折线图是一种非常常见的图表类型，用于展示数据随时间的变化趋势。当涉及到对未来数据的预测时，这种图表就变得更加有用。我们在方方面面都会用到这些信息。
趋势分析：折线图能够清晰地显示出数据随时间的变化趋势，而预测曲线则可以帮助我们了解这种趋势在未来可能的发展方向。
决策支持：在商业、金融、科学等领域，准确的预测对于制定策略至关重要。例如，在销售预测中，公司可以根据未来的销售趋势来调整库存水平或营销策略。
风险管理：对于风险评估和管理来说，预测未来可能发生的情况有助于提前采取措施减少潜在损失。比如，通过天气预报数据预测自然灾害的可能性。
资源配置：在资源有限的情况下，准确的预测可以帮助更好地分配资源。例如，在医疗领域，通过预测疾病传播趋势可以更有效地调配医疗资源。
同时在论坛中客户也提出了类似需求：https://gcdn.grapecity.com.cn/showtopic-223714-1-1.html

示例：
image.png491011657.png

思路:
将绑定的数据预测线部分series的lineStyle修改为虚线即可实现上面的效果。

步骤:
1. 首先在option中根据对应series的name去匹配forecastItem对象。
2. 设置forecastItem的lineStyle.type="dashed"
3. 在series数组中新增一个对象用来绘制竖直的红色趋势线。

//console.log(option);
const forecastItem = option.series.find(o=>o.name==="forecast");
//console.log(forecastItem);
forecastItem.lineStyle.type="dashed";
option.series.push(
{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
lineStyle: {
opacity: 1,
type: 'solid',
width: 1.5,
color:'red',
},
symbol: 'none', //去掉箭头
data: [[{ coord: ['2024-08-26T00:00:00', 0] }, { coord: ['2024-08-26T00:00:00', 1] }]]
}
}
)
//console.log(option);
return option;

复制代码

资源:

wyn-export-20240730093201.zip (4.62 KB, 下载次数: 46)

		自动登录	找回密码
密码			立即注册

[仪表板] 使用ECharts绘制预测数据

0 个回复

浏览过的版块