zoukankan      html  css  js  c++  java
  • ECharts--自定义tooltip属性

    记录每一个小坑、大坑

    ECharts 中的 tooltip 属性在使用中的使用率还是比较高的,看一看官方文档,整理简单的例子

    1. Tooltip属性

    2. 现象

    • 像图中的提示部分,是默认属性,不是很好看,很多时候也不符合需求,急需改一下!
      原柱状图.png

    3. 官网文档

    • 提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
    1. 字符串模板,就是把相对应的模板变量进行拼串
       formatter: '{b0}: {c0}<br />{b1}: {c1}'
    

    模板变量.png


    2.回调函数

    // 回调函数格式
    (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
    

    主要取用第一个参数 params 是 formatter 需要的数据集

    {
        componentType: 'series',
        // 系列类型
        seriesType: string,
        // 系列在传入的 option.series 中的 index
        seriesIndex: number,
        // 系列名称
        seriesName: string,
        // 数据名,类目名
        name: string,
        // 数据在传入的 data 数组中的 index
        dataIndex: number,
        // 传入的原始数据项
        data: Object,
        // 传入的数据值
        value: number|Array,
        // 数据图形的颜色
        color: string,
    
        // 饼图的百分比
        percent: number,
    
    }
    

    打印的数据.png

    4. 使用属性

    • 仔细看看官网文档,使用属性
    formatter(params) {
        console.log(params) //打印相关数据
             ///
    }
    
    • 在项目中的简单使用
      可以在回调函数中拼 HTML 代码,很好用。
                 tooltip: {
                                trigger: "axis",
                                axisPointer: {
                                    // link: null,
                                    animation: true,
                                    type: 'cross'
                                },
                                formatter:function (params) { //在此处直接用 formatter 属性
                                    // console.log(params)  // 打印数据
                                    var showdata = params[0];
                                    // 根据自己的需求返回数据
                                    return `
                                            <div>时间:${showdata.axisValueLabel}</div>
                                            <div>数据:<a style="color: #00E8D7">${showdata.data}</a>次/分</div>
                                           `
                                }
                            }
    

    柱状图.png

    5. 结束

    内容其实在官方文档中很详细,整理一下加深印象!

    点个赞呗!

  • 相关阅读:
    BZOJ 2034 【2009国家集训队】 最大收益
    vijos P1780 【NOIP2012】 开车旅行
    BZOJ 2115 【WC2011】 Xor
    BZOJ 3631 【JLOI2014】 松鼠的新家
    BZOJ 4717 改装
    BZOJ 2957 楼房重建
    BZOJ 4034 【HAOI2015】 T2
    BZOJ 1834 【ZJOI2010】 network 网络扩容
    BZOJ 2440 【中山市选2011】 完全平方数
    BZOJ 2733 【HNOI2012】 永无乡
  • 原文地址:https://www.cnblogs.com/jry199506/p/11040180.html
Copyright © 2011-2022 走看看