Echarts 折线图一个点显示多个实时数据tooltip提示框

在项目开发当中遇到一个需求，需要在一个折线图当中显示多个实时数据，刚开始觉得有点困难，毕竟echarts虽然用了很久了，但是里面的api参数很多，常用的就是饼状图、柱状图、以及折线图，对于这种需求立马就是在网上看相应的文章，但是网上关于这方面的文章也很少，后来通过在网上搜索了一篇文章获得了启发，然后查看echarts官方文档，发现果然可以实现，只不过在series中的data值里面我们一般默认是一个数组其实它是可以自己定义json数据类型的，然后包裹在数组里面，真正在调用的时候通过data里面的数据进行调用，看实例：

<template>
  <div class="app-container">

    <div class="filter-container">
      <el-date-picker
          style="position: relative;top:-4px"
          v-model="datearr"
          type="datetimerange"
          @change="chosedatetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
      
      <el-button class="filter-item" style="margin-left:20px;" size="small" type="primary" @click="search">查询</el-button>
      <el-button class="filter-item" size="small" type="primary" @click="reset"> 重置 </el-button>
    </div>

        <div id="chart" class="chart" style="width: 90%;height: 500px;"/>

  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'liulanGeshu',
  components: {},
  data() {
    return {
            chart: null,
            listQuery: {
                begin_time:'',
                end_time:''
            },
            datearr:[]
    }
  },
    mounted() {
      this.initChart()
    },
  created() {
    
  },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
  methods: {
        search(){
            //console.log(this.listQuery)
            // this.listQuery.page = 1
            // this.getList()
        },
        reset(){
            this.listQuery.begin_time = '',
            this.listQuery.end_time = '',
            this.datearr = []
        },
        chosedatetime(obj){
            if(obj){
                this.listQuery.begin_time = obj[0]
                this.listQuery.end_time = obj[1]
            }else{
                this.listQuery.begin_time = ''
                this.listQuery.end_time = ''
            }
        },
        
        initChart() {
          this.chart = echarts.init(document.getElementById('chart'))
          this.chart.setOption({
            backgroundColor: '#FFFFFF',
            title: {
              top: 20,
              text: '人均浏览个数统计',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#000'
              },
              left: '1%'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: '#57617B'
                }
              },
                    formatter:function(params){
                        //console.log(params)
                        return (
                            `日期：${params[0].name}<br/>
                             浏览总数：${params[0]['data'].value}<br/>
                             浏览人数：${params[0]['data'].llrsValue}<br/>
                             人均浏览个数：${params[0]['data'].rjllgsValue}<br/>`
                        )
                    }
            },
            grid: {
              top: 100,
              left: '2%',
              right: '5%',
              bottom: '2%',
              containLabel: true
            },
            xAxis: [{
                    name:'日期',
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
            }],
            yAxis: [{
              type: 'value',
              name: '浏览总数',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#57617B'
                }
              }
            }],
            series: [{
              name: '',
              type: 'line',
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              itemStyle: {
                normal: {
                  color: '#0000FF',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12
                }
              },
              data: [{
                        value:240,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:140,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:40,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:20,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:100,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:120,
                        llrsValue:100,
                        rjllgsValue:100
                    },{
                        value:150,
                        llrsValue:100,
                        rjllgsValue:100
                    }],
            }]
          })
        }
  }
}
</script>
<style>

</style>