[游戏开发]绘制虚实线面积、折线图，渐变（linear-gradient）实现虚线效果

效果图

通过linear-gradient实现虚实线

mdn介绍

正常使用
background: linear-gradient(90deg, #333, #eee 75%);

当区间内的颜色相同时,颜色会变成突变
background: linear-gradient(90deg, #333, #333 25%,#eee 25%, #eee 50%, #333 50%, #333 75%);

想要实现虚线效果，减少实线区间即可

示例地址

echarts绘制虚实线

如果想要绘制虚线，直接设置lineStyle为dash即可

但是有时候可能需要前半段实线，后半段虚线。
如果是折线图，分两段数据可以实现

但是如果是曲线，后半段会因为缺少前面数据的支撑，趋势变形

这时候，使用上面介绍的linear-gradient，实线效果如下

echarts案例地址

let data = [120, 200, 150, 80, 70, 110, 130]

// 分界点位置
let s0 = (data.length - 2) / (data.length - 1)

/**
 * @description: 生成虚线的渐变数组
 * @param {number} start 起始点位置 0-1
 * @param {number} dash 虚线宽度 0-1
 * @param {string} color 虚线颜色
 * @return {*}
 */
function generateLinearArray({start, dash, color}) {
  let arr = []
  for(let i = start; i < 1 - 2 * dash;i += 2*dash) {
    arr.push({
      offset: i,
      color
    })
    arr.push({
      offset: i + dash,
      color
    })
    arr.push({
      offset: i + dash,
      color: 'transparent'
    })
    arr.push({
      offset: i + 2 * dash,
      color: 'transparent'
    })
  }
  console.log(arr)
  return arr
}

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data,
      type: 'line',
      symbol: 'triangle',
      symbolSize: 20,
      smooth: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          },
          {
            offset: s0,
            color: 'rgba(58,77,233,0.8)'
          },
          ...generateLinearArray({
            start: s0,
            dash: 0.01,
            color: 'red'
          }),
          {
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          }
        ]),
        width: 4,
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#EE6666',
        color: 'yellow'
      }
    }
  ]
};

以上

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖