Echart自定义多条提示信息

简介: Echart自定义多条提示信息

文章转载于 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;
          })
        }]
      })
    }
  }
相关文章
|
JSON 前端开发 JavaScript
微前端项目难点解决(二)
微前端项目难点解决
1018 0
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
297 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
JavaScript
iview 表单有值却校验失败
iview 表单有值却校验失败
497 1
|
XML API 网络架构
什么是API数据接口该怎么使用?
API(Application Programming Interface,应用程序编程接口)是一种定义了规范和协议的集合,用于不同应用程序之间的数据交互和通信。API数据接口主要关注的是数据的传输格式、请求和响应消息的协议以及数据的安全性和可靠性等方面。 在现代软件开发中,API数据接口被广泛使用,因为它可以简化不同应用程序之间的数据交互过程。通过使用API数据接口,开发者可以专注于应用程序的业务逻辑和功能,而不需要花费过多的时间和精力来解决数据传输和交互的问题。
|
移动开发 Java 编译器
什么是pyc文件,把python的py文件编译成pyc文件,把pyc文件反编译成py文件。以及python编译的如何设置不生成pyc文件
什么是pyc文件,把python的py文件编译成pyc文件,把pyc文件反编译成py文件。以及python编译的如何设置不生成pyc文件
372 1
|
缓存
【已解决】npm安装依赖报错: npm ERR! cb() never called! npm ERR! This is an error with npm itself.
【已解决】npm安装依赖报错: npm ERR! cb() never called! npm ERR! This is an error with npm itself.
3356 0
|
前端开发 JavaScript 应用服务中间件
windows server + iis 部署若伊前端vue项目
5,配置url重写规则(重写后端请求) 注:如果没有Application Request Routing Cachefourcloudbdueclaim和URL重写,则是第二部的那两个插件没装上 打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能
502 0
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
433 1
|
算法 前端开发 JavaScript
SpringBoot+随机盐值+双重MD5实现加密登录
SpringBoot+随机盐值+双重MD5实现加密登录
1076 1