工作当中使用echarts提示框的一些心得

比较常见的问题就是我们显示的提示框的样式或者是提示框的内容要多加一些东西，这个时候很多人都很头疼，

那么我来给大家一种比较好理解的法子。

先来说说需要改成需要的内容

第一种：

tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} %'   //通过formatter 这些来设置自己要添加的单位如：%
},

这种方法有时候不是特别理想，因为这种方法有时候太乱了，有时候又没有自己想要的内容，这个时候教大家第二种方法

第二种：

tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(12, 204, 104, 0.92)',
    borderColor: '#FFFFCC'
    formatter: function(params, ticket, callback) {
        //根据业务自己拓展要显示的内容，可以打印一下参数选择自己需要的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        //然后在这里设置自己需要添加的一些其他的内容
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;  
        return res;  //必须要有返回值
    }
},

第二种基本上可以解决很大一部分的问题了。

那么接下来说说，如何设置提示框的样式呢？

有时候我们一个echarts图里面有很多的数据，提示框会变的很长甚至有时候一部分会看不见这样我们觉得不行，客户体验也不好，所以就需要来改变的提示框的样式了。但是问题来了，echarts里面提示框没有设置样式这一说，我百度了一下找到了答案，因为提示框是一个div不是在canvas画布上画出来的，所以把这个放到下面讲因为一部分跟上面也有关系。

来看案例：

<style>

/*给雷达图提示框设置样式*/
.f_cpu div:nth-child(2){
    width: 240px;
}
.f_clock{
    width: 70px;
    display: block;
    float: left;
    padding: 0 5px;
}

</style>

tooltip: {
    show: true,
    trigger: "item",
    formatter: function (params) {
        var res="";
        for(var i=0; i<24; i++){
            res+="<span class='f_clock'>"+i+"点："+params.data[i]+"</span>"; //设置提示框里面想要的样式
        }
        return res;
    }
},

</script>

工作当中使用echarts提示框的一些心得

猜你喜欢