在echarts中自定义提示框内容

最新推荐文章于 2022-12-20 14:46:47 发布
最新推荐文章于 2022-12-20 14:46:47 发布
阅读量1.4k 收藏 5
点赞数
分类专栏： # Echarts 文章标签： echarts 自定义提示框 自定义 tooltip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36025814/article/details/103630206
版权

                                                                  在echarts中自定义提示框内容

 

一、用到的是 tooltip 下的 formatter 配置

API地址：option.html#tooltip.formatter

二、单个数据项的提示框配置
    tooltip: { trigger: 'item' },

三、多个数据项的提示框配置
    tooltip: { trigger: 'axis' },

1、默认提示

2、显示当前单个数据项的提示框

3、显示当前横坐标下多个数据项的自定义提示框

代码（复制可用）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在echarts中自定义提示框内容</title>
    <style>
        .tips{
            margin-left:20px;
            color:red
        }
    </style>
    <!-- 引入 echarts.js -->
    <script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
</head>
<body>

<a href="https://www.echartsjs.com/zh/option.html#tooltip.formatter" target="_blank">option.html#tooltip.formatter API地址</a>

<p>
    <b>单个数据项的提示框配置<br>
        <span class="tips">
            tooltip: {
                trigger: 'item'
            },
        </span></b>
</p>
<p>
    <b>
        多个数据项的提示框配置<br>
    <span class="tips">
        tooltip: {
            trigger: 'axis'
        },
    </span>
    </b>
</p>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<p>显示当前单个数据项的提示框</p>
<div id="main1" style="width: 600px;height:400px;"></div>
<p>显示当前横坐标下多个数据项的自定义提示框</p>
<div id="main2" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    let consoleObj = {};

    /**
     * @todo 渲染 echarts
     * @param id echarts需要挂载的对象
     * @param paramData paramData 需要展示的相关数据
     */
    consoleObj.createBar = function (id, paramData) {
        let barChart = echarts.init(document.getElementById( id ));
        const barOptions = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            //color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            color: ['#c23531','#d48265', '#6e7074','#749f83'],
            xAxis : [ // X轴
                {
                    show: true,
                    type : 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data : paramData.xAxis  //X轴的数据
                }
            ],
            yAxis : [ // Y轴
                {
                    type : 'value'
                }
            ],
            series: [
                {
                    name: '订单数量',
                    type: 'bar',
                    stack: 'countStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    data: paramData.orderCount
                },
                {
                    name: '订单金额',
                    type: 'bar',
                    stack: 'priceStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    label: {
                        formatter: '￥：{c}',
                        show: true,
                        position: 'top' //在X轴上方
                    },
                    data: paramData.orderPrice
                },
                {
                    name: '退款数量',
                    type: 'bar',
                    stack: 'countStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    data: paramData.refundCount
                },
                {
                    name: '退款金额',
                    type: 'bar',
                    stack: 'priceStack',
                    itemStyle: {
                        barBorderRadius: [0, 0, 5, 5]
                    },
                    label: {
                        show: true,
                        formatter: '出账：{c}',
                        color: '#999',
                        position: 'bottom'
                    },
                    data: paramData.refundPrice
                }
            ]
        }
        barChart.setOption(barOptions);
    };

    /**
     * @todo 显示当前横坐标下单个数据项的自定义提示框
     * @param id echarts需要挂载的对象
     * @param paramData paramData 需要展示的相关数据
     */
    consoleObj.createBarOne = function (id, paramData) {
        let barChart = echarts.init(document.getElementById( id ));
        const barOptions = {
            tooltip : {
                trigger: 'item',
                axisPointer : {
                    type : 'shadow'
                },
                formatter: function(params){
                    var color = params.color;//图例颜色
                    var htmlStr ='<div>';
                    htmlStr += params.name + '<br/>';//x轴的名称

                    //组装订单金额，退款金额，退款数量 数据
                    let dateIndex = params.dataIndex;    //当前stack的索引（数据在传入的 data 数组中的 index）

                    let string = '';
                    string += '；订单金额：'+ paramData.orderPrice[dateIndex];
                    string += '<br/>退款数量：'+ paramData.refundCount[dateIndex];
                    string += '；退款金额：'+ paramData.refundPrice[dateIndex];

                    //为了保证和原来的效果一样，在数据左边加上一个（圆圈、点）
                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';

                    //拼接提示框内容
                    htmlStr += params.seriesName + '：'+params.value + string;

                    htmlStr += '</div>';
                    return htmlStr;
                }
            },
            //color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            color: ['#c23531','#d48265', '#6e7074','#749f83'],
            xAxis : [ // X轴
                {
                    show: true,
                    type : 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data : paramData.xAxis  //X轴的数据
                }
            ],
            yAxis : [ // Y轴
                {
                    type : 'value'
                }
            ],
            series: [
                {
                    name: '订单数量',
                    type: 'bar',
                    stack: 'countStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    data: paramData.orderCount
                }
            ]
        }
        barChart.setOption(barOptions);
    };

    /**
     * @todo 显示当前横坐标下多个数据项的自定义提示框
     * @param id echarts需要挂载的对象
     * @param paramData paramData 需要展示的相关数据
     */
    consoleObj.createBarMore = function (id, paramData) {
        let barChart = echarts.init(document.getElementById( id ));
        const barOptions = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                },
                formatter: function(params){

                    let htmlStr = '';
                    let money = 0;
                    for(let i=0;i<params.length;i++){   //循环当前 stack
                        let param = params[i];
                        let xName = param.name;//x轴的名称
                        let seriesName = param.seriesName;//图例名称
                        let value = param.value;//y轴值
                        let color = param.color;//图例颜色

                        let dateIndex = param.dataIndex;    //当前stack的索引（数据在传入的 data 数组中的 index）

                        if(seriesName == '订单数量' ){
                            money = '；订单金额：'+ paramData.orderPrice[dateIndex];
                        }else{
                            money = '；退款金额：'+ paramData.refundPrice[dateIndex];

                        }

                        if(i===0){
                            htmlStr += xName + '<br/>';//x轴的名称
                        }
                        htmlStr +='<div>';
                        //为了保证和原来的效果一样，在数据左边加上一个（圆圈、点）
                        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';

                        //圆点后面显示的文本
                        htmlStr += seriesName + '：' + value + money;

                        htmlStr += '</div>';
                    }
                    return htmlStr;
                }
            },
            //color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            color: ['#c23531','#d48265', '#6e7074','#749f83'],
            xAxis : [ // X轴
                {
                    show: true,
                    type : 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data : paramData.xAxis  //X轴的数据
                }
            ],
            yAxis : [ // Y轴
                {
                    type : 'value'
                }
            ],
            series: [
                {
                    name: '订单数量',
                    type: 'bar',
                    stack: 'countStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    data: paramData.orderCount
                },
                {
                    name: '退款数量',
                    type: 'bar',
                    stack: 'countStack',
                    itemStyle: {
                        barBorderRadius: [5, 5, 0, 0]
                    },
                    barCategoryGap: '50%', // 柱形间距
                    data: paramData.refundCount
                }
            ]
        }
        barChart.setOption(barOptions);
    };

    //定义数据
    let paramData = {
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'], // x轴数据
        orderPrice: [100, 200, 300, 400, 500, 440, 350],    //订单金额
        orderCount: [10, 20, 30, 40, 50, 44, 35],    //订单数量
        refundPrice: [-200,-400,-500,-100,-200,-440,-350],  //退款金额
        refundCount: [-2, -5, -15, -16, -19, -11, -22],   //退款数量
    };
    //调用方法
    consoleObj.createBar('main', paramData);
    consoleObj.createBarOne('main1', paramData);
    consoleObj.createBarMore('main2', paramData);
</script>
</body>
</html>

 

夏已微凉、
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts自定义提示框的文字
yijiupingfan0914的博客
11-28 2855
  option = {     color: ['#3398DB'], //默认的提示框及提示文字      /*tooltip : {         trigger: 'axis',         axisPointer : {            // 坐标轴指示器，坐标轴触发有效             type : 'shadow'        // 默认为直线，可选为：'l...
Echarts饼图自定义提示框内容
dawnStart的博客
07-02 9263
效果图： 首先在后台把数据包装成下面格式，lightTypeList集合中的数据格式 //获取饼状图的数据 function finLightRoadTotal(){ var lightType = $("#lightType").combobox('getValue'); // var areaId = $("#areaId").combobox('getValue'); var roadId = $("#roadId").combobox('getValue'); progressL
ECharts多折线图——自定义悬浮提示框内容、自定义折线图线条颜色、自定义y轴单位、气泡单位，轴线颜色、图表网格容器大小
winne雪
06-16 1万+
1、自定义tooltip悬浮提示框内容（数据处理后加单位），需要在tooltip配置项的formatter使用回调函数的形式 参数详解：https://echarts.baidu.com/option.html#legend.formatter 2、自定义折线图线条颜色，直接在color配置项数组中写自己喜欢的颜色，在线条绘制的时候就会在数组中自动选择。 具体如下配置： option = { ...
echarts自定义tooltip提示框内容
jacklin_01的博客
09-02 2万+
最近做一个展示需要在显示的tooltip上加上单位。。。需要自定义tooltip提示框内容效果如下 先看效果和代码设置： tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'cross', // 默认为直线，可选为：'line' | 'shadow' '
echarts 折线图 默认显示tooltip提示框内容
JaxWan的博客
01-18 2万+
大致思路：tooltip提示框默认是鼠标悬浮事件，echarts默认有触发这个事件的函数dispatchAction，调用即可。 下边展示的一个双Y轴折线图的提示： 1.首先在option里面配置tooltip，只贴了tooltip的配置，其他的省略了 option: { tooltip: { //鼠标悬停提示内容 trigger: ...
vue2.0 自定义 饼状图 (Echarts)组件的方法
08-27
在 Vue 2.0 中，创建自定义饼状图 (Echarts) 组件可以实现灵活的数据可视化。下面，我们将创建一个自定义的饼状图组件，使用 Echarts 库来绘制饼状图。 组件结构 首先，我们需要创建一个名为 `Echarts.vue` 的组件...
解决echarts中横坐标值显示不全(自动隐藏)问题
10-15
在使用ECharts绘制图表时，有时会遇到横坐标值显示不全的问题，特别是在数据量大或者标签内容较长的情况下，ECharts为了保持图表的清晰度，会自动隐藏部分横坐标标签。本文将详细介绍如何解决这个问题。 首先，...
3D地球+自定义tooltip，自定义样式完美显示
04-17
ECHARTS3D 地球，解决TOOLTOP不显示问题.使用CSS自定义tooltip样式，完美显示。
JS弹出层对话框,Tooltip提示,Msg消息框
11-18
JS弹出层对话框插件源码，包含弹出层对话框和Tooltip提示框，消息框等多种功能，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器）。内置4种颜色的皮肤，且可以自定义对话框样式，可设置对话框位置。Tooltip可以...
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
echars柱状图横向堆积显示，文字在下方
前端开发工程师博客
12-20 1065
echars柱状图横向堆积显示，文字在下方。
Echarts 折线图自定义toolTip内容及位置
weixin_39428080的博客
01-09 3606
const trendFunc = () => { option = { title: { text: "" }, grid: { left: 45, top: 30, right: 10 }, tooltip: { trigger: "axis", extraCssText:"z-index:10", position: function (point: any, par.
ECharts折线图tooltip提示框格式自定义
等风来的博客
11-02 1万+
ECharts自定义tooltip显示格式
echarts之formatter两种使用形式及蝴蝶图的绘制
qq_42248955的博客
10-17 3869
1、formatter两种使用形式 可以通过函数和字符串模板来自定义formatter ①通过函数动态创建节点 通过循环param的长度，不写死节点，这样有一个好处就是当点击了某一个legend取消了数据的展示的时候，tooltip提示框不至于报错。 formatter: function (params) { var result = "<div>" + params[0].axisValue + "</div>"; params....
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5168
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
Echarts横向的柱状图
热门推荐
夏已微凉、
08-15 3万+
Echarts横向的柱状图 1、步骤： 1)、封装Echarts折线图方法registerFunnelChart(),提取出公共的部分； 2)、AJax获取后台数据传参至Echarts公共方法； 3)、模拟后台获取的json数据； 4)、给day...
echarts设置之stack参数
夏已微凉、
12-20 1万+
echarts设置之stack参数 1、效果 2、代码（复制可用） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
echarts地图自定义提示框
最新发布
08-24
对于echarts地图的自定义提示框，你可以通过设置series中的tooltip属性来实现。 首先，你需要设置tooltip的trigger为"item"，表示在鼠标悬停在地图上某个区域时触发提示框。然后，可以通过formatter属性来定义提示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值