echarts 中国地图，tooltip，legend同时显示多组数据

最新推荐文章于 2024-07-30 11:13:28 发布
最新推荐文章于 2024-07-30 11:13:28 发布
阅读量9.2k 收藏 35
点赞数 5
分类专栏： 全栈 文章标签： echarts 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35736779/article/details/99772172
版权

此echarts图只是用于示例，记录在此，只是为方便以后可能需要用到做参考。具体数据部分，部分代码不够严整，就不在考虑范围了，毕竟这种较为复杂的图形用的也不多。

// 地图数据
var chinaDataURL = “/asset/get/s/data-1517645039291-B1vgpymUz.json”;

//坐标
var geoCoordMap = {
‘上海’: [119.1803, 31.2891],
“福建”: [119.4543, 25.9222],
“重庆”: [108.384366, 30.439702],
‘北京’: [116.4551, 40.2539],
“辽宁”: [123.1238, 42.1216],
“河北”: [114.4995, 38.1006],
“天津”: [117.4219, 39.4189],
“山西”: [112.3352, 37.9413],
“陕西”: [109.1162, 34.2004],
“甘肃”: [103.5901, 36.3043],
“宁夏”: [106.3586, 38.1775],
“青海”: [101.4038, 36.8207],
“新疆”: [87.9236, 43.5883],
“西藏”: [91.11, 29.97],
“四川”: [103.9526, 30.7617],
“吉林”: [125.8154, 44.2584],
“山东”: [117.1582, 36.8701],
“河南”: [113.4668, 34.6234],
“江苏”: [118.8062, 31.9208],
“安徽”: [117.29, 32.0581],
“湖北”: [114.3896, 30.6628],
“浙江”: [119.5313, 29.8773],
‘内蒙古’: [110.3467, 41.4899],
“江西”: [116.0046, 28.6633],
“湖南”: [113.0823, 28.2568],
“贵州”: [106.6992, 26.7682],
“云南”: [102.9199, 25.4663],
“广东”: [113.12244, 23.009505],
“广西”: [108.479, 23.1152],
“海南”: [110.3893, 19.8516],
‘黑龙江’: [127.9688, 45.368],
‘台湾’: [121.4648, 25.5630]
};
var data=[
{name:“宁夏”,value:“250021”},
{name:“新疆”,value:“452001”},
{name:“广东”,value:“550021”},
{name:“广西”,value:“258821”},
{name:“海南”,value:“457721”},
{name:“山东”,value:“521990”},
{name:“河南”,value:“521990”},
{name:“湖北”,value:“521990”},
{name:“湖南”,value:“212100”},
{name:“天津”,value:“1119938”},
{name:“河北”,value:“719938”},
{name:“浙江”,value:“521990”},
{name:“安徽”,value:“521990”},
{name:“福建”,value:“521990”},
{name:“江西”,value:“521990”},
{name:“山西”,value:“819938”},
{name:“内蒙古”,value:“919938”},
{name:“重庆”,value:“322100”},
{name:“四川”,value:“252100”},
{name:“贵州”,value:“252100”},
{name:“云南”,value:“252100”},
{name:“西藏”,value:“252001”},
{name:“陕西”,value:“450021”},
{name:“甘肃”,value:“450021”},
{name:“青海”,value:“350021”},
{name:“辽宁”,value:“619938”},
{name:“吉林”,value:“719938”},
{name:“黑龙江”,value:“919938”},
{name:“上海”,value:“1019938”},
{name:“江苏”,value:“521990”}
]

//series数据
var capital=[
{name:“宁夏”,value:[{name:“时间”,value:“20170303”},{name:“数值”,value:“250021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“新疆”,value:[{name:“时间”,value:“20170302”},{name:“数值”,value:“452001”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“广东”,value:[{name:“时间”,value:“20170301”},{name:“数值”,value:“550021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“广西”,value:[{name:“时间”,value:“20170325”},{name:“数值”,value:“258821”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“海南”,value:[{name:“时间”,value:“20170315”},{name:“数值”,value:“457721”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“山东”,value:[{name:“时间”,value:“20180316”},{name:“数值”,value:“521990”},{name:“类型”,value: “资金”},{name:“程度”,value:“一般”}]},
{name:“河南”,value:[{name:“时间”,value:“20180315”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖北”,value:[{name:“时间”,value:“20180314”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖南”,value:[{name:“时间”,value:“20180313”},{name:“数值”,value:“212100”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“天津”,value:[{name:“时间”,value:“20190305”},{name:“数值”,value:“1119938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“河北”,value:[{name:“时间”,value:“20190205”},{name:“数值”,value:“719938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]}]

var manage=[
{name:“浙江”,value:[{name:“时间”,value:“20180320”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“安徽”,value:[{name:“时间”,value:“20180319”},{name:“数值”,value:“521990”},{name:“类型”,value: “管理”},{name:“程度”,value: “一般”}]},
{name:“福建”,value:[{name:“时间”,value:“20180318”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“江西”,value:[{name:“时间”,value:“20180317”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“山西”,value:[{name:“时间”,value:“20190105”},{name:“数值”,value:“819938”},{name:“类型”,value: “管理”},{name:“程度”,value: “严重”}]},
{name:“内蒙古”,value:[{name:“时间”,value:“20180326”},{name:“数值”,value:“919938”},{name:“类型”,value:“管理”},{name:“程度”,value:“严重”}]}]

var person=[
{name:“重庆”,value:[{name:“时间”,value:“20180312”},{name:“数值”,value:“322100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“四川”,value:[{name:“时间”,value:“20180311”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“贵州”,value:[{name:“时间”,value:“20180310”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“云南”,value:[{name:“时间”,value:“20170309”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“西藏”,value:[{name:“时间”,value:“20170308”},{name:“数值”,value:“252001”},{name:“类型”,value:“人员”},{name:“程度”,value: “轻微”}]},
{name:“陕西”,value:[{name:“时间”,value:“20170307”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“甘肃”,value:[{name:“时间”,value:“20170306”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“青海”,value:[{name:“时间”,value:“20170304”},{name:“数值”,value:“350021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]}]

var weather = [
{name:“辽宁”,value:[{name:“时间”,value:“20180325”},{name:“数值”,value:“619938”},{name:“类型”,value: “天气”},{name:“程度”,value: “严重”}]},
{name:“吉林”,value:[{name:“时间”,value:“20180324”},{name:“数值”,value:“719938”},{name:“类型”,value:“天气”},{name:“程度”,value: “严重”}]},
{name:“黑龙江”,value:[{name:“时间”,value:“20180323”},{name:“数值”,value:“919938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“上海”,value:[{name:“时间”,value:“20180322”},{name:“数值”,value:“1019938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“江苏”,value:[{name:“时间”,value:“20180321”},{name:“数值”,value:“521990”},{name:“类型”,value:“天气”},{name:“程度”,value:“一般”}]}]
var data = [
{name:“天津”,value:[{name:“时间”,value:“20190305”},{name:“数值”,value:“1119938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“河北”,value:[{name:“时间”,value:“20190205”},{name:“数值”,value:“719938”},{name:“类型”,value:“资金”},{name:“程度”,value:“严重”}]},
{name:“山西”,value:[{name:“时间”,value:“20190105”},{name:“数值”,value:“819938”},{name:“类型”,value: “管理”},{name:“程度”,value: “严重”}]},
{name:“内蒙古”,value:[{name:“时间”,value:“20180326”},{name:“数值”,value:“919938”},{name:“类型”,value:“管理”},{name:“程度”,value:“严重”}]},
{name:“辽宁”,value:[{name:“时间”,value:“20180325”},{name:“数值”,value:“619938”},{name:“类型”,value: “天气”},{name:“程度”,value: “严重”}]},
{name:“吉林”,value:[{name:“时间”,value:“20180324”},{name:“数值”,value:“719938”},{name:“类型”,value:“天气”},{name:“程度”,value: “严重”}]},
{name:“黑龙江”,value:[{name:“时间”,value:“20180323”},{name:“数值”,value:“919938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“上海”,value:[{name:“时间”,value:“20180322”},{name:“数值”,value:“1019938”},{name:“类型”,value:“天气”},{name:“程度”,value:“严重”}]},
{name:“江苏”,value:[{name:“时间”,value:“20180321”},{name:“数值”,value:“521990”},{name:“类型”,value:“天气”},{name:“程度”,value:“一般”}]},
{name:“浙江”,value:[{name:“时间”,value:“20180320”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“安徽”,value:[{name:“时间”,value:“20180319”},{name:“数值”,value:“521990”},{name:“类型”,value: “管理”},{name:“程度”,value: “一般”}]},
{name:“福建”,value:[{name:“时间”,value:“20180318”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“江西”,value:[{name:“时间”,value:“20180317”},{name:“数值”,value:“521990”},{name:“类型”,value:“管理”},{name:“程度”,value:“一般”}]},
{name:“山东”,value:[{name:“时间”,value:“20180316”},{name:“数值”,value:“521990”},{name:“类型”,value: “资金”},{name:“程度”,value:“一般”}]},
{name:“河南”,value:[{name:“时间”,value:“20180315”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖北”,value:[{name:“时间”,value:“20180314”},{name:“数值”,value:“521990”},{name:“类型”,value:“资金”},{name:“程度”,value:“一般”}]},
{name:“湖南”,value:[{name:“时间”,value:“20180313”},{name:“数值”,value:“212100”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“重庆”,value:[{name:“时间”,value:“20180312”},{name:“数值”,value:“322100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“四川”,value:[{name:“时间”,value:“20180311”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“贵州”,value:[{name:“时间”,value:“20180310”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“云南”,value:[{name:“时间”,value:“20170309”},{name:“数值”,value:“252100”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“西藏”,value:[{name:“时间”,value:“20170308”},{name:“数值”,value:“252001”},{name:“类型”,value:“人员”},{name:“程度”,value: “轻微”}]},
{name:“陕西”,value:[{name:“时间”,value:“20170307”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“甘肃”,value:[{name:“时间”,value:“20170306”},{name:“数值”,value:“450021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“青海”,value:[{name:“时间”,value:“20170304”},{name:“数值”,value:“350021”},{name:“类型”,value:“人员”},{name:“程度”,value:“轻微”}]},
{name:“宁夏”,value:[{name:“时间”,value:“20170303”},{name:“数值”,value:“250021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“新疆”,value:[{name:“时间”,value:“20170302”},{name:“数值”,value:“452001”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“广东”,value:[{name:“时间”,value:“20170301”},{name:“数值”,value:“550021”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]},
{name:“广西”,value:[{name:“时间”,value:“20170325”},{name:“数值”,value:“258821”},{name:“类型”,value:“资金”},{name:“程度”,value:“轻微”}]},
{name:“海南”,value:[{name:“时间”,value:“20170315”},{name:“数值”,value:“457721”},{name:“类型”,value: “资金”},{name:“程度”,value:“轻微”}]}
]

var capitalData = function(data) {
var res = [];
for (var i = 0; i < capital.length; i++) {
var geoCoord = geoCoordMap[capital[i].name];
if (geoCoord) {
res.push({
name: capital[i].name,
value: geoCoord.concat(capital[i].value[1].value)
});
}
}
return res;
};
var manageData = function(data) {
var res = [];
for (var i = 0; i < manage.length; i++) {
var geoCoord = geoCoordMap[manage[i].name];
if (geoCoord) {
res.push({
name: manage[i].name,
value: geoCoord.concat(manage[i].value[1].value)
});
}
}
return res;
};
var personData = function(data) {
var res = [];
for (var i = 0; i < person.length; i++) {
var geoCoord = geoCoordMap[person[i].name];
if (geoCoord) {
res.push({
name: person[i].name,
value: geoCoord.concat(person[i].value[1].value)
});
}
}
return res;
};
var weatherData = function(data) {
var res = [];
for (var i = 0; i < weather.length; i++) {
var geoCoord = geoCoordMap[weather[i].name];
if (geoCoord) {
res.push({
name: weather[i].name,
value: geoCoord.concat(weather[i].value[1].value)
});
}
}
return res;
};

$.getJSON(chinaDataURL, function(geoJson) {
echarts.registerMap(‘china’, geoJson)

option = {
    backgroundColor: '#030303',
    title: {
        text: '全国主要城市损失',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
          
			var toolTiphtml = ''
			for(var i = 0;i<data.length;i++){
				if(params.name==data[i].name){
					toolTiphtml += data[i].name+':<br>'
					for(var j = 0;j<data[i].value.length;j++){
						toolTiphtml+=data[i].value[j].name+':'+data[i].value[j].value+"<br>"
					}
				}
			}
			return toolTiphtml;
    }
    },
    legend: {
        orient: 'vertical',
        right: 20,
        top: 10,
        data: [{
                name: '天气',
                   }, {
                name: '资金',
                  },
            {
                name: '管理',
                 },
            {
                name: '人员',
                 }
        ],
        textStyle: {
            color: '#fff'
        }
    },
    visualMap: {
        min: 0,
        max: 1200000,
        left: 20,
        bottom: 20,
        calculable: true,
        text: ['高', '低'],
        inRange: {
            color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: 'rgb(19, 91, 153)',
                borderColor: 'rgb(9, 54, 95)'
            },
            emphasis: {
                areaColor: 'rgb(10, 105, 187)'
            }
        }
    },
    series: [
         {
            name: '天气',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: weatherData(data),
            symbol:'arrow',
            symbolSize: function(val) {
                return val[2] / 50000;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function(params) {
                        // console.log(params);
                        return params.name;
                    },
                    position: 'right',
                    color: '#fff',
                    fontSize: '8'
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#4bbbb2',
                    borderWidth: 2,
                    borderColor: '#b4dccd'
                }
            }
        },{
            name: '资金',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: capitalData(data),
            symbol:'circle', 
            symbolSize: function(val) {
                return val[2] / 50000;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function(params) {
                        // console.log(params);
                        return params.name;
                    },
                    position: 'right',
                    color: '#fff',
                    fontSize: '8'
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#ea6347',
                    borderWidth: 2,
                    borderColor: '#f4b391'
                }
            }
        },
        {
            name: '管理',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: manageData(data),
            symbol: 'pin', 
            symbolSize: function(val) {
                return val[2] /50000;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function(params) {
                        // console.log(params);
                        return params.name;
                    },
                    position: 'right',
                    color: '#fff',
                    fontSize: '8'
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#00ff00',
                    borderWidth: 2,
                    borderColor: '#55E355'
                }
            }
        },
        {
            name: '人员',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: personData(data),
            symbol:'triangle',
            symbolSize: function(val) {
                console.log(personData(data))
                return val[2] / 50000;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function(params) {
                        // console.log(params);
                        return params.name;
                    },
                    position: 'right',
                    color: '#fff',
                    fontSize: '8'
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#FAFF1A',
                    borderWidth: 2,
                    borderColor: '#E3BC1F'
                }
            }
        },

        {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            tooltip: {
                show: false
            }
        }
    ]
}

myChart.setOption(option);

})；
在这里插入图片描述

笑谈烟雨时、
关注
  • 5
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
(echarts)ECharts地图图表tooltip显示多条数据
nyf_unknow的博客
04-02 2281
【代码】(echarts)ECharts地图图表tooltip显示多条数据。
前端-echarts tooltip展示多项自定义数据
qq_42371932的博客
06-26 983
效果如图，鼠标滑动到某一个柱子的时候，出现这一项数据的多个自定义数据，外加自己的模板样式渲染。主要是在data中，value就是实际展示的主数据，其他字段名为自定义的数据。希望能展示每一列中的多个自定义数据。
Echarts图中的Treemap 图表底部的黑色显示区域隐藏
最新发布
qq_61815434的博客
07-30 395
在option配置中的series中添加breadcrumb: { show: false},效果如下图所示：
echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）
热门推荐
习惯有你&的博客
12-07 11万+
在操作echarts时，echarts的柱状图、地图等各种图形显示的时候往往会有legend图标的显示，有时候需求要求，legend图标不全部显示，只显示一个或指定的图标显示。 默认的图形（以柱状图及地图为例）： 需求要求的图： 解决办法： 代码展示： function randomData() { return Math.round(Math.ran
ECharts地图中tooltip提示框通过formatter分别显示多个数值
GiScript的博客
08-09 7万+
Echarts官方实例中 地图  最后一个是 iphone销量的全国地图    实例链接 但是tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。 现在我们想要分别显示iphone3，iphone4，iphone5的值，只需要修改tooltip即可。 //官方实例tooltip tooltip: {         trigger: 'item
自定义Echarts柱状图， 一图显示多组数据
weixin_40463857的博客
08-04 4907
这个自定义的功能是参考一位大佬的帖子做出来的， 以此为基础加了一些优化， 但是我找不到大佬的帖子链接了， 如果有发现的请告诉我， 我在帖子上加一下， 以谢大佬指点之恩。//先定义图表容器， 至于图表所需要的js啥的， 请自行搜索教程， 不多赘述。...
echarts地图json数据
01-15
这些数据通常会比中国地图数据简单，因为不需要细化到省级或县级。 在使用ECharts绘制地图时，我们需要先加载地图JSON数据，然后在ECharts实例的option中配置地图系列（series）。在这个系列中，我们需要指定地图...
echarts实现地图定时切换散点与多图表级联联动详解
10-18
例如，引入ECharts的最小化版本`echarts.min.js`和特定的地图JSON文件，如`china.js`，用于中国地图的展示。 ```html <!DOCTYPE html> <script src="echarts/jquery-1.11.2.min.js"> <script src="echarts/...
echarts-地图添加悬浮文本标签
04-14
Echarts是一款由百度开发的开源、轻量级且功能强大的数据可视化库，它支持多种图表类型，包括柱状图、折线图、饼图以及地图等。在地图的展示中，有时我们需要为特定的地理位置添加标签，以便更直观地显示数据信息。...
echarts世界地图资源map.zip
10-13
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及地图等。在给定的压缩包"echarts世界地图资源map.zip"中，主要包含的是ECharts用于绘制世界地图的...
天津echarts地图资源
12-30
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图图表，其中包括了中国各个省份以及城市的地图数据。在本资源包中，重点是关于...
Echarts 地图tooltip多行显示,当鼠标悬停地区显示数据
weixin_54685622的博客
12-30 2706
代码如下 tooltip : { trigger : 'item', // formatter: '{b}' // formatter: '{b}<br/>{c} (个)' formatter : function(params) { var res = params.name + '<br/>'; var myseries = option.series; for (var i = 0; i < myseries.length;
Vue iview Echart 中国地图多数据展示
qq_27312237的博客
12-08 1257
效果如图所示 接下来说如何实现这样的一个中国地图： 1、首先要安装echart : 执行 npm install echarts --save 2、在要展示的页面引入： import ECharts from "vue-echarts/components/ECharts"; import "echarts/map/js/china"; 3、完整代码： <template> <div> <chart :options="o...
echarts 默认显示图例_echarts设置图例颜色和地图底色的方法实例
weixin_39718083的博客
12-20 2606
前言本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。1、地图的一些基本属性就不介绍了，还是那些style2、地图数据的获取以及Series的加载和其他没有什么大的差异。地图数据都在map.js中，都可以自己看，也可以自己根据格式获取响应的数据。这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题。1、图例的...
Echarts鼠标悬浮显示数据详细介绍
azhe5201314的专栏
08-30 2万+
Echarts鼠标悬浮显示数据
echarts中国地图二级联动且多条数据展示
Spring_lmu的博客
12-16 1697
canvas的map类型使用 最近笔者的公司提出了新的需求，要求将对应的数据呈现在地图上，将对应省份的数据渲染出来（之前是表格的来）。 既然是要画图，那自然是得用到canvas，至少我用的来的就只有这个，其他的也未曾深入研究。而我打开它的文档，随意一翻就发现居然有map的类型，这不正是我想要的嘛。 首先第一个问题就是：省级地图不能动态引入，因为笔者用的是 vue 的项目，所以目前还没...
echarts 多个series_Echarts地图悬浮框显示多组series数据以及修改地图大小
weixin_39880337的博客
12-22 1665
HULUHULU全国带宽分布var myChart = echarts.init(document.getElementById('province'));var option = {title : {text: 'HULU全国带宽',subtext: '数据来自HBase',x:'center'},tooltip : {trigger: 'item',formatter:function(par...
echarts柱状图tooltip显示多条数据
04-26
要在echarts柱状图的tooltip中显示多条数据，可以在series中设置dataZoom，然后在tooltip中设置formatter函数。在formatter函数中通过params数组获取到当前鼠标hover的数据项，然后将需要显示的数据拼接成一个HTML字符串，并返回即可。具体实现可以参考echarts官网上的相关文档和示例代码。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值