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);

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

笑谈烟雨时、
关注
专栏目录
ECharts地图中tooltip提示框通过formatter分别显示多个数值
GiScript的博客
08-09 7万+
Echarts官方实例中 地图  最后一个是 iphone销量的全国地图    实例链接 但是tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。 现在我们想要分别显示iphone3，iphone4，iphone5的值，只需要修改tooltip即可。 //官方实例tooltip tooltip: {         trigger: 'item
echarts 多个series_Echarts地图悬浮框显示多组series数据以及修改地图大小
weixin_39880337的博客
12-22 1673
HULUHULU全国带宽分布var myChart = echarts.init(document.getElementById('province'));var option = {title : {text: 'HULU全国带宽',subtext: '数据来自HBase',x:'center'},tooltip : {trigger: 'item',formatter:function(par...
(echarts)ECharts地图图表tooltip显示多条数据
nyf_unknow的博客
04-02 2297
【代码】(echarts)ECharts地图图表tooltip显示多条数据。
前端-echarts tooltip展示多项自定义数据
qq_42371932的博客
06-26 1114
效果如图，鼠标滑动到某一个柱子的时候，出现这一项数据的多个自定义数据，外加自己的模板样式渲染。主要是在data中，value就是实际展示的主数据，其他字段名为自定义的数据。希望能展示每一列中的多个自定义数据。
Echarts图中的Treemap 图表底部的黑色显示区域隐藏
最新发布
qq_61815434的博客
07-30 413
在option配置中的series中添加breadcrumb: { show: false},效果如下图所示：
echarts的legend分多处排列
dlm_bk的博客
12-14 9613
实现legend分多处放置，分列左右，上下，不放在一起，可以将legend分多个组，然后修改其属性，以达到目标效果 将需要分离排列的legend分成两组，如下代码： legend: [                 {                     icon : 'bar',                     textStyle : {          
Vue iview Echart 中国地图多数据展示
qq_27312237的博客
12-08 1261
效果如图所示 接下来说如何实现这样的一个中国地图： 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 map tootip 显示多条信息
USTC_ygg的博客
03-28 739
data.data.name data = { name: 'Tom', value: 25， price: 1000 } tooltip: { trigger: 'item', formatter: function (data) { var res = [];...
echarts地图的tooltip自定义样式显示图表
weixin_43931898的博客
10-18 9742
实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中，鼠标点击或者停留在地图中某一片区域时，该区域显示亮高和显示tooltip提示框信息，但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种，tooltip提示框中只是单纯显示文本信息。 但是，需求要的不是这种，先不多说，直接给你们看最终展示的效果。 这里我们以广州市作为模板，可以看出这是我们想要的在tooltip提示框中绘制另外一层图表。 ok，接下来我们直接上代码。 <templat
echarts中国地图二级联动且多条数据展示
Spring_lmu的博客
12-16 1702
canvas的map类型使用 最近笔者的公司提出了新的需求，要求将对应的数据呈现在地图上，将对应省份的数据渲染出来（之前是表格的来）。 既然是要画图，那自然是得用到canvas，至少我用的来的就只有这个，其他的也未曾深入研究。而我打开它的文档，随意一翻就发现居然有map的类型，这不正是我想要的嘛。 首先第一个问题就是：省级地图不能动态引入，因为笔者用的是 vue 的项目，所以目前还没...
百度地图 echarts tooltip属性 经纬度坐标不显示
weixin_30832405的博客
08-06 1093
中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标 1 echarts.appMap = function (id, opt) { 2 // 实例 3 var chart = this.init(document.getElementById(id)); 4 // var curGeoJson = {}; 5 ...
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
echarts地图json数据
01-15
这些数据通常会比中国地图数据简单，因为不需要细化到省级或县级。 在使用ECharts绘制地图时，我们需要先加载地图JSON数据，然后在ECharts实例的option中配置地图系列（series）。在这个系列中，我们需要指定地图...
echarts-地图添加悬浮文本标签
04-14
Echarts是一款由百度开发的开源、轻量级且功能强大的数据可视化库，它支持多种图表类型，包括柱状图、折线图、饼图以及地图等。在地图的展示中，有时我们需要为特定的地理位置添加标签，以便更直观地显示数据信息。...
echarts绘制中国地图 tooltip悬浮显示多数据且自动播放
weixin_42679187的博客
02-25 4811
echarts---中国地图 html文件 &lt;div id="chinaMap"&gt; 引入echarts-map-china.js和echarts-auto-toopltip.js文件 (function(){ chinaMapAnalysis(); })(); var timers = setInterval("chinaMapAnalysis()",2000*34); ...
echarts设置多个legend样式
热门推荐
RogerWang_H5的博客
01-07 1万+
echart设置多组legend
ECharts图表tooltip显示多条数据效果
hxf6060的博客
04-28 1万+
在做ECharts图表开发时，会遇到提示框浮层显示多条数据的需求，后端返参如下图所示： 前端展示需要把所有字段都显示在tooltip里，这时我们需要用到formatter格式器。我们知道这个地方的数据入口在series的data里，因此我们只需要处理一下放入data里面的数据格式即可。 首先我们在vue data里面声明一个数组： data() { return { ...
自定义Echarts柱状图， 一图显示多组数据
weixin_40463857的博客
08-04 4917
这个自定义的功能是参考一位大佬的帖子做出来的， 以此为基础加了一些优化， 但是我找不到大佬的帖子链接了， 如果有发现的请告诉我， 我在帖子上加一下， 以谢大佬指点之恩。//先定义图表容器， 至于图表所需要的js啥的， 请自行搜索教程， 不多赘述。...
tooltip展示多条数据
qq_41560894的博客
02-09 1922
最近开始使用vue结合echarts进行前端界面的编写，在实现鼠标触碰提示框展示多条数据的时候遇到了以下的问题，记录一下 一、tooltip显示多条数据 当echarts柱状图提示框想要展示的数据不仅仅局限于x轴和y轴的时候，需要处理series中对应的data，使其包含你想要的数据： data的格式为[{value:值1，自定义key1，对应value1},{value:值2，自定义key2，对应value2}] ，value是必须的，它的值是展示在y轴上的值； tooltip使用formatter函数
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、付费专栏及课程。

余额充值