Vue3+Echarts+Setup实现动态曲线堆叠图+图例分页

提前安装引入echarts

效果图

dom实例

<div id="rightCharterwang" style="height: 28vh"></div>

 配置项，将数据换成从接口请求回来的数据（这里是写死的假数据）

const rightCharterwang = () => {
  let namedata = [
    'a',
    'b',
    'c',
    'd',
    'e',
    'ffffff',
    'g',
    'hhhhhhhhhhhhhhhhhhhh',
    'i',
    'g',
    'k',
    'l',
    'm',
    'n'
  ]
  const chartBox = echarts.init(document.getElementById('rightCharterwang'))
  const option = {
    title: {
      text: ''
    },
    //显示悬浮窗体
    // tooltip: {
    //   trigger: 'axis'
    // },
    // 纵向
    // legend: {
    //   type: 'scroll',
    //   orient: 'vertical',
    //   right: 10,
    //   top: 20,
    //   bottom: 20,
    //   data: namedata
    // },
    // 横向
    legend: {
      type: 'scroll',
      top: 10,
      data: namedata
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 25,
      interval: 5
    },
    series: [
      {
        name: 'a',
        type: 'line',
        smooth: true,
        data: [12, 13, 10, 13, 9, 2, 21]
      },
      {
        name: 'b',
        type: 'line',
        smooth: true,
        data: [22, 18, 19, 23, 2, 3, 3]
      },
      {
        name: 'c',
        type: 'line',
        smooth: true,
        data: [15, 23, 20, 15, 19, 3, 4]
      },
      {
        name: 'd',
        type: 'line',
        smooth: true,
        data: [13, 23, 3, 14, 15, 16, 17]
      },
      {
        name: 'e',
        type: 'line',
        smooth: true,
        data: [8, 9, 11, 20, 12, 16, 13]
      },
      {
        name: 'ffffff',
        type: 'line',
        smooth: true,
        data: [8, 9, 11, 10, 12, 17, 13]
      },
      {
        name: 'g',
        type: 'line',
        smooth: true,
        data: [18, 19, 9, 11, 12, 15, 13]
      },
      {
        name: 'hhhhhhhhhhhhhhhhhhhh',
        type: 'line',
        smooth: true,
        data: [18, 19, 9, 13, 1, 14, 3]
      },
      {
        name: 'i',
        type: 'line',
        smooth: true,
        data: [18, 3, 9, 15, 1, 2, 0]
      },
      {
        name: 'j',
        type: 'line',
        smooth: true,
        data: [22, 19, 9, 17, 1, 0, 3]
      },
      {
        name: 'k',
        type: 'line',
        smooth: true,
        data: [23, 19, 0, 19, 1, 3, 3]
      },
      {
        name: 'l',
        type: 'line',
        smooth: true,
        data: [18, 0, 9, 21, 1, 3, 3]
      },
      {
        name: 'm',
        type: 'line',
        smooth: true,
        data: [0, 19, 9, 22, 1, 3, 3]
      },
      {
        name: 'n',
        type: 'line',
        smooth: true,
        data: [0, 0, 6, 9, 18, 13, 3]
      }
    ]
  }
  option && chartBox.setOption(option)
  window.addEventListener('resize', function () {
    chartBox.resize()
  })
}

rightCharterwang()

分页实现 就是配置legend，将type设置scroll并且配置图例的名字数组， orient: 'vertical',设置为纵向并调整位置，默认是横向