先来个效果图
原理:使用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