Echarts在线免费图表

 
            
let data = {
   curData: [0.00, 0.08, 0.16, 0.25, 0.34, 0.44, 0.54, 0.66, 0.77, 0.89, 1.00],
   labels: [0.00, 0.10, 0.20, 0.30, 0.40, 0.50, 0.60, 0.70, 0.80, 0.90, 1.00],
   downData: [0.00, 0.07, 0.14, 0.22, 0.31, 0.40, 0.51, 0.62, 0.74, 0.86, 0.97],
   upData: [0.00, 0.09, 0.18, 0.27, 0.37, 0.47, 0.58, 0.69, 0.81, 0.92, 1.03]
}
const { upData, downData, curData = [], labels } = data;

// const y1 = curData[0], y2 = curData[curData.length - 1], x1 = labels[0], x2 = labels[labels.length - 1],raoteList = [];
// // 计算斜率
// const slope = (y2 - y1) / (x2 - x1);
// // 生成点数
// const otherLength = labels.length - 2;
// for (let i = 1; i <= otherLength; i++) {
//     const x = labels[i];
//     const y = y1 + slope * (i - x1);
//    raoteList.push(y);
// }
// console.log(raoteList)
function insertValues(arr, N) {
   const minVal = Math.min(...arr);
   const maxVal = Math.max(...arr);
   const step = (maxVal - minVal) / (N + arr.length - 1); // 计算每步递增的间隔

   // 创建一个新的数组用于存放结果
   let newArr = [...arr];

   // 插入新的值
   for (let i = 1; i <= N; i++) {
      const newVal = (((minVal * 1000) + (i * step * 1000)) / 1000).toFixed(2);
      // 找到新值应该插入的位置以保持数组递增
      let insertPos = newArr.findIndex(val => val > newVal);
      if (insertPos === -1) {
         // 如果新值比所有现有值都大，则直接追加到末尾
         newArr.push(newVal);
      } else {
         // 否则，在找到的位置插入新值
         newArr.splice(insertPos, 0, newVal);
      }
   }

   return newArr;
}

// 示例使用
let rangeData = [curData[0], curData[curData.length - 1]]; // 假设这是你的数组
let N = labels.length - 2; // 你想插入的数值数量
rangeData = insertValues(rangeData, N)
console.log(rangeData);
let base = downData.reduce(function (min, val) {
   return Math.floor(Math.min(min, val));
}, Infinity);
option = {
   grid: {
      left: '6%',
      top: '12%',
      right: '3%',
      bottom: '1%',
      containLabel: true
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'cross',
         animation: false,
         label: {
            backgroundColor: '#ccc',
            borderColor: '#aaa',
            borderWidth: 1,
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: '#222'
         }
      },
      formatter: function (params) {
         console.log(params)
         return (
            'time: ' + params[2].name +
            '<br />' +
            params[2].seriesName + ': ' + params[2].value +
            '<br />' +
            params[3].seriesName + ': ' + params[3].value +
            '<br />' +
            params[4].seriesName + ': ' + params[4].value +
            '<br />' +
            params[5].seriesName + ': ' + params[5].value
         )
      }
   },
   legend: {
      // data: ['区间成交量', '算法母单波动率'],
      textStyle: {
         align: 'right',
         color: '#999'
      },
      right: '0'
   },
   xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
         lineStyle: {
            color: '#999'
         }
      },
      data: labels,
      axisLabel: {
         rotate: 45,
         textStyle: {
            show: true,
            fontFamily: '微软雅黑',
            // color: '#5DCFF6',
            color: '#999',
            fontSize: '12'
         }
      }
   },
   yAxis: [
      {
         splitNumber: 3,
         type: 'value',
         splitLine: {
            show: true,
            lineStyle: {
               // type: 'dashed'
               color: '#E9E9F2'
            }
         },
         axisLabel: {
            textStyle: {
               show: true,
               fontFamily: '微软雅黑',
               // color: '#5DCFF6',
               color: '#999',
               fontSize: '12'
            },
         }
      }
   ],
   series: [
      {
         // name: 'L',
         type: 'line',
         data: downData.map(function (item) {
            return item + base;
         }),
         lineStyle: {
            opacity: 0
         },
         stack: 'confidence-band',
         symbol: 'none'
      },
      {
         // name: 'U',
         type: 'line',
         data: upData.map(function (item, index) {
            return item - downData[index];
         }),
         lineStyle: {
            opacity: 0
         },
         areaStyle: {
            color: '#ccc'
         },
         stack: 'confidence-band',
         symbol: 'none'
      },
      {
         type: 'line',
         showSymbol: false,
         lineStyle: {
            color: '#EF805D',
            type: 'dotted'
         },
         data: [],
      },
      {
         name: 'upper',
         type: 'line',
         data: upData,
         itemStyle: {
            color: '#FECC00'
         },
         showSymbol: false
      },
      {
         name: 'lower',
         type: 'line',
         data: downData,
         itemStyle: {
            color: 'rgba(50, 197, 255, 1)'
         },
         showSymbol: false
      },
      {
         name: 'curve',
         type: 'line',
         data: curData,
         itemStyle: {
            color: '#0089fe'
         },
         showSymbol: false
      },
      {
         name: 'diagonal',
         type: 'line',
         showSymbol: false,
         lineStyle: {
            color: '#EF805D',
            type: 'dotted',
         },
         data: rangeData,
         zlevel: 3,

      },
   ]
};