记一次echarts折线图

产品提出需求：折线图，两条线，要展示一整天的数据，0点到现在是高亮，现在到24点是暗色（预估数据）

效果图

开搞吧

• 问题1：echarts的横坐标里没有现在的时间点（取已过去的最近的时间点作为分隔坐标）

• 问题2：怎么给一条线设置两种样式（visualMap属性）

直接堆代码

测试地址

// 第几个横坐标作为分界点（这里我写死了，可以写个函数处理）
let cutYDataIdx = 4;

// 这是两条线的数据(数据都是瞎写的)
const yDataFlow = [10,220,35,400,50,600,700,800,900,1000];
const yDataSaturation = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];
let xData = [1,2,3,4,5,6,7,8,9];
option = {
        backgroundColor: '#000912',
        color: ['#6DD400', '#32C5FF', '#E02020',
          '#D6F700', '#44D7B6', '#8563FF', '#B620E0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          },
        },
        grid: {
          left: 50,
          right: 45,
          top: 40,
          bottom: 30
        },
        calculable: true,
        visualMap: [
          {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            // 阴影
            pieces: [
              {
                gt: 0,
                lt: cutYDataIdx,
                color: 'rgba(117,219,110,0.8)'
              },
              {
                gt: cutYDataIdx,
                lt: xData.length,
                color: 'rgba(117,219,110,0.3)'
              }
            ]
          },
          {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 1,
            // 阴影
            pieces: [
              {
                gt: 0,
                lt: cutYDataIdx,
                color: 'rgba(103,117,231,0.8)'
              },
              {
                gt: cutYDataIdx,
                lt: xData.length,
                color: 'rgba(103,117,231,0.3)'
              }
            ]
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#90979c'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#90979c'
              },
              show: false,
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
          },
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#90979c'
              },
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            },
          },
        ],
        series: [
          {
            name: '整体饱和度',
            type: 'line',
            data: yDataSaturation,
            smooth: true, // 圆滑过渡
            symbolSize: 0, // 去掉节点的显示
            // 阴影
            areaStyle: {},
          },
          {
            name: '交通流率',
            type: 'line',
            yAxisIndex: 1,
            data: yDataFlow,
            symbolSize: 0,
            smooth: true,
            areaStyle: {},
          }
        ]
      };