文章转载于 https://blog.csdn.net/lilongwei4321/article/details/82907642

要求

项目要求一条折线上展示多个字段

源码

methods: {
    
    
    initChart() {
    
    
      this.chart = echarts.init(document.getElementById(this.id))
      const data = this.dataArr;
      const that = this;
      this.chart.setOption({
    
    
        title: {
    
    
          text: '金币曲线(万)'
        },
        tooltip: {
    
    
          trigger: 'axis',
          formatter (params){
    
    
            let indexId = params[0].dataIndex;
            var htmlStr ='<div>时间：';
            htmlStr += params[0].name + '<br/>';//x轴的名称
            // //为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #096;"></span>金币值：'+that.dataArr[indexId][1]/10000 + '万<br/>'
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #CC0033;"></span>服务器ID：'+that.dataArr[indexId][2] + '<br/>'
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #FF9933;"></span>游戏服务器：'+that.dataArr[indexId][3] + '<br/>';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        series: [{
    
    
          name: '金币值',
          type: 'line',
          data: data.map(function (item) {
    
    
            return item[1]/10000;
          })
        }]
      })
    }
  }