echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解

Ming-Afresh

已于 2023-03-22 14:46:05 修改

阅读量2.7k

点赞数 1

分类专栏： # 数据可视化文章标签： echarts javascript ecmascript

于 2023-01-05 16:35:08 首次发布

本文链接：https://blog.csdn.net/Start_Simple/article/details/128565396

版权

数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写目录标题

1、实例
2、案例详解

1、实例

在这里插入图片描述
这次我拿echarts中地图组合散点图的实例

！！！实现效果：滑到散点显示不同于地图块的信息及 formatter 提示窗自定义！！！

这个显示项目名称为"文昌小学校节能项目" ，地图块为"阿城区" 防止重复触发代码：【重点是silent: true】

var mapInit = () =>$.get(mapname,function(yCjson){
        echarts.registerMap('haerbin', yCjson, {});
        var option = { // echarts 配置
            tooltip: {
                trigger: 'item',
                //   提示框
                formatter:function(params){
                    let text = params.name + 
                            "<br>位置信息：" + params.value 
                    return text
                },
            },
            geo: { // 地图配置
                show: true,
                map: 'haerbin', 
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        borderColor: '#2AB8FF',   // 边
                        borderWidth: 1.5,
                        areaColor: '#12235c'    // 里
                    },
                    emphasis: {
                        areaColor: '#2AB8FF',
                        borderWidth: 0,
                    }
                },
                zoom: 1.2,
                silent: true,                  //  遮罩一层 ！！！
            },
            series: [ { // 散点配置
                name: '项目坐标',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: geoCoordMap,
                symbolSize: 15,   // 点的大小
                showEffectOn: 'emphasis',   // 特效渲染前提设置
                rippleEffect: {
                    brushType: 'stroke'    // 特效波纹渲染
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',    // 右侧文字
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ff8003'
                    }
                }
            },]
        };
        myCharts.setOption(option);
    });
    // 散点触发
    myCharts.on('click', function (e) {
        window.location.href="./indexChild.html";
    });
    mapInit();

这里用到了两次 formatter 第一个在trigger中为正常显示的提示框默认黑底白字的第二个在label中
可以理解为是散点的“特色”
调用{a}{b}{c}方法详见官方文档

还有一处自定义是我把地图的series数据删掉了否则与散点的silent冲突而且此需求地图的意义用geo引入进来即可应用散点还是靠坐标位置来衡量geo

2、案例详解

formatter一般用于格式化鼠标悬浮时间的信息，如果数据是JSON数组格式，那么不必这样判断扇形图的 ticket值，使用 formatter 的 callback 时间即可自行对应

formatter: function (params, ticket, callback) {
console.log(params);
console.log(ticket);
var str = '明细：<br/>';
if(ticket == 'item_操作概况_0'){
for(var i in data.mustMod){
str += "模块：" + data.mustMod[i].MODULE_NAME +"&nbsp"+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.must.totalAccess + "&nbsp" +"("+ data.must.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_1'){
for(var i in data.moreMod){
str += "模块：" + data.moreMod[i].MODULE_NAME +"&nbsp"+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.more.totalAccess + "&nbsp" +"("+ data.more.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_3'){
for(var i in data.lessMod){
str += "模块：" + data.lessMod[i].MODULE_NAME +"&nbsp"+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.less.totalAccess + "&nbsp" +"("+ data.less.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_2'){
for(var i in data.normalMod){
str += "模块：" + data.normalMod[i].MODULE_NAME +"&nbsp"+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数："+ data.normal.totalAccess + "&nbsp" +"("+ data.normal.totalPrecent+"%)" + "<br/> ";
}
//callback(ticket, str);
return str;
}
},

补充知识： echarts点击柱状图事件，点 echarts柱状图悬浮展示相应的信息， echarts柱状图柱头展示信息

悬浮显式在tooltip中设置formatter
柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置
点击事件就是：【先获取柱状图的div 然后和对象.on() 】

var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {});

ajax:

$.ajax({
url: "../../basexxxx/getxxxxxxx",
type: "post",
data: {
param: param
},
success: function (data) {
option.series[0].data = xxxxxxxxxxx;//百分比
// option.series[1].data = xxxxxxxxxxx;
option.xAxis[0].data = xxxxxxxxxxxx;//项点名称
riskNames = xxxxxxxxxx;
//违反次数
breakCount = xxxxxxxxx;//xx次数
//检查次数
checkCount = xxxxxxxxxx;
//描述
riskLevelDetails = xxxxxxxxxxx;
//项点id集合
riskIds = data.xxxxxxxxx;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});

HTML:

<div style="margin: 0;padding: 5px; max-width:100%;width: 100%;overflow-x: auto;">
<div id="main" style="width: 350%;height:500px;"></div>
</div>

Option:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var breakCount = [];
var checkCount = [];
var riskLevelDetails = [];
var riskNames = [];
var riskIds = [];
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
//悬浮提示
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params[0].name) {
var val3 = riskLevelDetails[i] || 0;
// toFixed(1)精确小数点
return '项点名称：' + riskNames[i] + '<br>'
+ '违反占比：' + option.series[0].data[i].toFixed(1) +'%'+ '<br>'
+ riskLevelDetails[i];
}
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 40
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '违反占比',
type: 'bar',
barWidth: '60%',
itemStyle: {
normal: {
//可根据柱状图量的大小进行判断变换颜色
color: function (params) {
if (params.data < 60) {
return 'green'
} else {
return '#c23531'
}
return '#ccc'
},
label: {
show: true,
position: 'top',
formatter: function (params) {
//单个柱状图表头展示
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params.name) {
var val1 = breakCount[i] || 0;
var val2 = checkCount[i] || 0;
return '{color1|' + val1 + '}/{color2|' + val2 + '}';
}
}
},
rich: {
color1: {
color: '#c23531'
},
color2: {
color: '#42a1fe'
}
},
textStyle: {
color: '#333'
}
}
}
},
data: []
}
]
};
然后柱状图的点击事件
//点击事件
myChart.on('click', function (params) {
console.log(params);
var index = params.dataIndex;
console.log("下标："+xxx);
console.log("项点id："+xxxx);
console.log("名称："+params.name);
console.log("南京东机务段单位代码："+xxxxx);
});

Ming-Afresh

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解

echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
复制链接

扫一扫