echarts3地图显示为什么有问题_百度知道echarts3地图显示为什么有问题_百度知道echarts地图,图例与显示数据联动及自定义显示数据
这几天一直在研究php与echarts的集成.集成好了,但是还得根据业务需求更改地域报表.研究了下,主要的有:
&1.为图例添加点击事件
&2.更改鼠标悬停显示的数据(自定义显示,你想显示什么就按照你的来).
&3.图例与鼠标悬停显示的数据联动(例如:三个图例选中,鼠标悬停显示选中三个图例的数据)
&注:本人第一次使用echarts报表插件.若有不足,不完善的或可以优化的地方欢迎大家提出.
&邮箱: dujun_
&//=====echarts地图数据============开始=================//
&//获取echarts-map.js文件
fileLocation ='scripts/echarts/js/echarts-map';
&//获取echarts文件夹,该文件夹下有相关的js文件
echarts='scripts/echarts'
&require.config({
&& paths:{
'echarts': echarts,
'echarts/chart/map':
fileLocation&&&&&&
&// 作为入口
&&& 'echarts',
&&& 'echarts/chart/map'
& displayChart &
displayChart(ec) {
& chinaMapChart =
ec.init(document.getElementByIdx_x_x_x('btnF_set'));
& chinaMapChart.showLoading({
"后台小二狂力奔跑中....."
& //所有构图参数和数据都在此方法里
& chinaMapChartOtion =
getChinaMapChartOption();
chinaMapChart.setOption(chinaMapChartOtion);
&//获得Pie图的选项和数据
getChinaMapChartOption(){
&& //ecConfig这个很重,若要点击事件必须引入config.js文件
&& var ecConfig =
require('echarts/config');
&& //获取图例点击事件
chinaMapChart.on(ecConfig.EVENT.LEGEND_SELECTED,
function (param) {
&&&&&&&&&&&&
len = param.
&& //根据图例判断展示的数据&
并返回true或者false
&& function tf(name){
var tf=true;
if(len == null){
len = chinaMapChartOption.legend.
if(name == '曝光量'){
tf= len.曝光量;
}else if(name == '点击量'){
tf= len.点击量;
}else if(name == '转化量'){
tf= len.转化量;
}else if(name == '消耗量'){
tf= len.消耗量;
tf = true;
&&& //构图& 配置属性
var& chinaMapChartOption = {
type:'PONENT_TYPE_LEGEND',
orient: 'vertical',
data:['曝光量','点击量','转化量','消耗量'],
selectedMode:'single',
selected:{
'曝光量':true,
'点击量':true,
'转化量':true,
'消耗量':true
tooltip : {
trigger: 'item',
//------------自定义鼠标悬停展的数据----------//
//控制鼠标悬停显示数据格式
formatter:function(params,ticket,callback){
var legendSelected =
&&&&&&&&&&&&&&
chinaMapChartOption.legend.
var res='';
var series =
chinaMapChartOption.
for(var i=0; i
&&&&&&&&&&&
//根据图例展示相应的数据信息
&&&&&&&&&&&
if(tf(series[i].name+'')){
&&&&&&&&&&&&&&
var dataArr =
series[i].
&&&&&&&&&&&&&&
for(var j=0;j
&&&&&&&&&&&&&&&&
if(dataArr[j].name ==
params[1]){
&&&&&&&&&&&&&&&&&&&
res+=series[i].name+':'+dataArr[j].value+'';
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&
//若无数据,赋值为零,并且判断根据图例展现相应的数据信息
if(res == ''){
&&&&&&&&&&&
var show ='';
&&&&&&&&&&&
var click = '';
&&&&&&&&&&&
var change = '';
&&&&&&&&&&&
var consume = '';
&&&&&&&&&&&
if(tf('曝光量')){
&&&&&&&&&&&&&
show = '曝光量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('点击量')){
&&&&&&&&&&&&&
click = '点击量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('转化量')){
&&&&&&&&&&&&&
change = '转化量:0';
&&&&&&&&&&&
&&&&&&&&&&&
if(tf('消耗量')){
&&&&&&&&&&&&&
consume = '消耗量:0';
&&&&&&&&&&&
&&&&&&&&&&&
res= show + click + change +
//若要测试鼠标悬停展示数据,
//可以把function中的代码删除.只保留下面的代码即可
//return params[1]+":展示量:12;转化量:123;消耗量:46;";
&& &//------------自定义鼠标悬停展的数据--------------//
&&&&&&&&&&&&
toolbox: {
show : true,
orient: 'vertical',
x:'right',
y:'center',
feature : {
&&&&&&&&&&
mark : true,
&&&&&&&&&&
dataView : {readOnly: false}
dataRange: {
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'],//
文本，默认为数值文本
calculable : true
&&&&&&&&&&&&&
//辅助工具箱
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
dataView : {show: true,
readOnly: false},
saveAsImage : {show: true}
series : [
name: '曝光量',
type: 'map',
mapType: 'china',
selectedMode:'single',//展示一个还是多个地图
mapValueCalculation:'sum',
itemStyle:{
&&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&&
emphasis:{label:{show:true}}
name: '点击量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:click
name: '转化量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:change
name: '消耗量',
type: 'map',
mapType: 'china',
selectedMode:'single',
itemStyle:{
&&&&&&&&&&&
normal:{label:{show:true}},
&&&&&&&&&&&
emphasis:{label:{show:true}}
data:consume
animation: false
chinaMapChartO
//====echarts地图数据============结束============//
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。echarts3地图显示不正常是怎么回事_百度知道力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） ? （百度）
by 于博（新华社） ? 吴楚茵（南方都市报） ? （百度）
by 孟立昕（腾讯）? 王飞宇（证券时报） ? 颜冬（视觉中国） ? （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）