echarts折线渐变 + 预测值

最新推荐文章于 2024-08-05 11:28:39 发布

山野里的小菊花

最新推荐文章于 2024-08-05 11:28:39 发布

阅读量4k

点赞数 4

分类专栏： echarts echarts折线渐变文章标签： echarts line 渐变预测值

本文链接：https://blog.csdn.net/liuxin00020/article/details/80696132

版权

本文介绍了如何使用echarts创建带有渐变效果的折线图，并展示预测值的方法。通过设置visualMap组件实现渐变，利用两条线分别表示实线和预测值。关键步骤包括配置visualMap的参数，处理数据以添加预测值，以及调整x轴和y轴的数据格式。

摘要由CSDN通过智能技术生成

先来个效果图

原理：使用echarts创建一个折线图，渐变原理是使用虚拟地图visualMap，预测值是使用了两条线（第一根实线，最后一个值为空，第二根虚线，只保留最后一个值）

1、下载echarts-all-3.js，引入到页面中，准备一个div盒子（必须有个最低高度，如果百分比高度，浏览器在加载时，可能会无法显示出来）

<div id="safe-trending" style="width:628px;min-height: 125px;height:30%"></div>

2、渐变的核心部分：在option里面增加配置项visualMap

show:false // 隐藏 visualMap-continuous 组件 true的时候，左边会出现一个渐变柱子

type:continuous //连续型，另外一个类型piecewise：分段型，会显示一节一节的，不平滑

min:最小值 // 显示渐变色颜色的最低值，通常是数据集的最小值

max:最大值 // 显示渐变色颜色的最大值，通常是数据集的最大值

color:颜色数组 // 从上往下，若渐变是左右的，那就是从左往右

若需要横向渐变，增加一个dimension: 0, max:valueList.length-1

若指定某条折线渐变，则增加seriesIndex: 1 ,数值是折线的索引号，从0开始

其余的配置请参考官网http://echarts.baidu.com/option.html#visualMap-continuous.dimension

visualMap: [{
 //渐变色
    show: false,
    type: 'continuous',
    min: Math.min.apply(null, valueList),
    max: Math.max.apply(null, valueList),
    color: ['#fc2a01', '#ffcc00', '#54ff00'],
}],

3、预测值的核心部分：第一根实线，最后一个值为空，第二根虚线，只保留最后一个值，相当于两根线拼接起来的

y轴数据处理

//格式化数据，最后四个形成虚线(生成两条折线，第一条折线后四个为空值，第二条折线后只保留后四个值)
var yData = [];
yData[0] = valueList.map(function (value, index) {
 //第一条折线数据
    if (index > valueList.length - 2) {
        return '';
    } else