多曲线图

function (data,params){
  // const myChart = this.myChart;
  const yearData = [2020, 2021, 2022, 2023, 2024, 2025]
  const personData3 = [1020, 1132, 1101, 1134, 1490, 1530, 1520]
  const personData = [820, 932, 901, 934, 1290, 1330, 1320]
  const personData2 = [620, 732, 701, 734, 1090, 1130, 1120]
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      name: '年',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'category',
      boundaryGap: false,
      data: yearData,
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      },
    },
    yAxis: {
      name: '单位: 人',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置刻度线为虚线个数
        }
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      }
    },
    series: [
      {
        data: personData3,
        type: 'line',
        smooth: true,
        symbol: 'circle', // 设置曲线两头的形状为圆形
        symbolSize: 4, // 大小
        showSymbol: false, // 默认不显示圆点
        emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】
            focus: 'series',
            itemStyle: {
              color: '#FFFFFF', // 鼠标悬浮时折线点的颜色
              borderColor: '#FFE04D',
              borderWidth: 3
            }
        },
        lineStyle: {
          width: 2,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 176, 253, 1)' }, // %0 处的颜色
              { offset: 0.5, color: 'rgba(0, 248, 255, 1)' }, // %50 处的颜色
              { offset: 1, color: 'rgba(0, 176, 253, 1)' }, // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 176, 253, 0.75)' }, // 0% 处的颜色
              { offset: 1, color: 'rgba(0, 176, 253, 1)' } // 100% 处的颜色 
            ],
            global: false // 缺省为 false
          }
        },
      },
      {
        data: personData,
        type: 'line',
        smooth: true,
        symbol: 'circle', // 设置曲线两头的形状为圆形
        symbolSize: 4, // 大小
        showSymbol: false, // 默认不显示圆点
        emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】
            focus: 'series',
            itemStyle: {
              color: '#FFFFFF', // 鼠标悬浮时折线点的颜色
              borderColor: '#FFE04D',
              borderWidth: 3
            }
        },
        lineStyle: {
          width: 2,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#F45A23' }, // %0 处的颜色
              { offset: 0.5, color: '#FFE04D' }, // %50 处的颜色
              { offset: 1, color: '#F45A23' }, // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 224, 77, 0.75)' }, // 0% 处的颜色
              { offset: 1, color: 'rgba(255, 224, 77, 0)' } // 100% 处的颜色 
            ],
            global: false // 缺省为 false
          }
        },
      },
      {
        data: personData2,
        type: 'line',
        smooth: true,
        symbol: 'circle', // 设置曲线两头的形状为圆形
        symbolSize: 4, // 大小
        showSymbol: false, // 默认不显示圆点
        emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】
            focus: 'series',
            itemStyle: {
              color: '#FFFFFF', // 鼠标悬浮时折线点的颜色
              borderColor: '#FFE04D',
              borderWidth: 3
            }
        },
        lineStyle: {
          width: 2,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#B4F856FF' }, // %0 处的颜色
              { offset: 0.5, color: '#00FF96FF' }, // %50 处的颜色
              { offset: 1, color: '#B6F955FF' }, // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 255, 150, 0.75)' }, // 0% 处的颜色
              { offset: 1, color: 'rgba(0, 255, 150, 0)' } // 100% 处的颜色 
            ],
            global: false // 缺省为 false
          }
        },
      }
    ]
  };
  
  return option;
}

 

posted @ 2024-06-25 08:48  ladybug7  阅读(6)  评论(0编辑  收藏  举报