echart自定义多条提示信息

1、前提说明:项目使用vue + element UI 搭建的,图表使用axios请求后端数据回显到echart中

2、项目要求一条折线上展示多个字段,开始时看文档这样设置错误代码

methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const data = this.dataArr; //接收父组件数据
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        series: [{
          name: '金币值',
          type: 'line',
          data: data.map(function (item) {
            return item[1]/10000;
          })
        },{
          name: '服务器ID',
          type: 'line',
          data: data.map(function (item) {
            return item[2];
          })
        },{
          name: '游戏服务器',
          type: 'line',
          data: data.map(function (item) {
            return item[3];
          })
        }]
      })
    }
  }

这样设置是有问题的,会展示3条折线,但我只需要展示一条数据并且中文字符不会显示,原因在type,但type是必填字段,所以想要处理就不能在series中,需要在tooltip中处理,通过下标确定当前值 正确代码

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;
          })
        }]
      })
    }
  }

猜你喜欢

转载自blog.csdn.net/lilongwei4321/article/details/82907642