You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/06/27 16:20:33 UTC
[GitHub] [echarts] acekavinxx opened a new issue, #17285: [Feature] connection pie to the map
acekavinxx opened a new issue, #17285:
URL: https://github.com/apache/echarts/issues/17285
### What problem does this feature solve?
I have one map, and one pie, which seperated by trees, and those tree can be found in different provinces. what I want is click on the tree in pie, corresponding province get highlight. Like following:
when I click yellow part in pie, it correponse to Guandong province, and then the whole part in map can be highlight. If you need I have the whole folder can be shared.
`<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="button.css">
<meta charset="utf-8" />
<title>ECharts</title>
<body>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main_map" style="height:600px"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
})
// 使用
require([
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/map', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/pie',
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart_map = ec.init(document.getElementById('main_map'));
var tree_data = ['木槿','碧桃','杨树','国槐','侧柏','山杏','枫树','垂柳',
'海棠','枣树','蝟实','紫叶李','栾树','元宝槭','黄栌','玉兰树',
'香樟树','乌桕树','荷花木兰','刚竹','桂花','紫薇','紫荆','枇杷',
'榆树','女贞','夹竹桃','木芙蓉','黄葛树','龙牙花','榕树','木棉',
'棕榈树','凤凰木','鸡蛋花树'];
var itemStyle = {
normal: {
label: {
show: true,
formatter: '{b}',
//left: 100px ,
textStyle: { fontSize: 12, fontWeight: 'bold' }
}
},
emphasis: { label: { show: true } }
};
var option_map = {
//color:['#800080','#ED7C30','#80FF80'],
title: {
text: '中国地图',
subtext: '四班一组',
x: 'center'
},
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c}",
position:function(p){ //其中p为当前鼠标的位置
return [p[0] - 50, p[1] - 48];
},
extraCssText:'width:160px;height:40px;background:red;',
enterable:true,
},
legend: {
orient: 'vertical',
x: 'left',
type: 'scroll',
data: tree_data,
selected: {
木槿: true,
碧桃: true,
杨树: true,
}
},
dataRange: {
min: 0,
max: 80,
x: 'right',
y: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
china: true
}
},
series: [
{
name: '树木种类: ',
type: 'map',
mapType: 'china',
roam: true,
layoutCenter: ['60%', '50%'],
layoutSize: 450,
//center: ['12%', '40%'],
// itemStyle:{
// normal:{label:{show:true}},
// emphasis:{label:{show:true}}
// },
itemStyle: itemStyle,
data: [
{ name: '北京', value: 15 },
{ name: '天津', value: 35 },
{ name: '上海', value: 23 },
{ name: '重庆', value: 25 },
{ name: '河北', value: 13 },
{ name: '河南', value: 14 },
{ name: '云南', value: 17 },
{ name: '辽宁', value: 18 },
{ name: '黑龙江', value: 21 },
{ name: '湖南', value: 54 },
{ name: '安徽', value: 14 },
{ name: '山东', value: 47 },
{ name: '新疆', value: 22 },
{ name: '江苏', value: 54 },
{ name: '浙江', value: 57 },
{ name: '江西', value: 43 },
{ name: '湖北', value: 32 },
{ name: '广西', value: 23 },
{ name: '甘肃', value: 15 },
{ name: '山西', value: 25 },
{ name: '内蒙古', value: 44 },
{ name: '陕西', value: 23 },
{ name: '吉林', value: 52 },
{ name: '福建', value: 46 },
{ name: '贵州', value: 33 },
{ name: '广东', value: 5 },
{ name: '青海', value: 44 },
{ name: '西藏', value: 35 },
{ name: '四川', value: 3 },
{ name: '宁夏', value: 28 },
{ name: '海南', value: 15 },
{ name: '台湾', value: 51 },
{ name: '香港', value: 34 },
{ name: '澳门', value: 38 }
]
},
{
name: '木槿',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '碧桃',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '杨树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '国槐',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '侧柏',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '山杏',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: false } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '枫树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '垂柳',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '海棠',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '枣树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京' , value: 1 },
]
},
{
name: '蝟实',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '紫叶李',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京' , value: 1 },
{ name: '安徽', value: 1 },
]
},
{
name: '栾树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
{ name: '安徽', value: 1 },
]
},
{
name: '元宝槭',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '黄栌',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: 1 },
]
},
{
name: '玉兰树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '香樟树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '乌桕树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '荷花木兰',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '刚竹',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '桂花',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '紫薇',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '紫荆',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '枇杷',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '榆树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '女贞',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '夹竹桃',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '安徽', value: 1 },
]
},
{
name: '木芙蓉',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '四川', value: 1 },
]
},
{
name: '黄葛树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '四川', value: 1 },
]
},
{
name: '龙牙花',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '四川', value: 1 },
]
},
{
name: '榕树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '广东', value: 1 },
]
},
{
name: '木棉',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '广东', value: 1 },
]
},
{
name: '鸡蛋花树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '广东', value: 1 },
]
},
{
name: '棕榈树',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '广东' , value: 1 },
]
},
{
name: '凤凰木',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: '广东', value: 1 },
]
},
]
}
// 为echarts对象加载数据
myChart_map.setOption(option_map),
myChart_map.on('click', function(params){
console.log(params);
var name = params.data.name;
window.open('https://www.google.com/search?q='+name);
});
})
// </script>
<div id="pie" align="center" style="position:absolute;right:40px;top:150px;width:400px;height:400px"></div>
//<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('pie');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '树木',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '荷花木兰',url: "http://www.google.com" },
{ value: 735, name: '凤凰木', url: "http://www.baidu.com" },
{ value: 580, name: '鸡蛋花树' },
{ value: 484, name: '栾树' },
{ value: 300, name: '龙牙花' }
]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
myChart.on('click', function (param) {
console.log(param);
var name = param.name;
//window.open('https://www.google.com/search?q='+name);
myChart_map.dispatchAction({type: 'highlight',
//seriesIndex: 0,
seriesName: '树木种类: ',
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
//dataIndex?: number | number[],
// 可选，数据项名称，在有 dataIndex 的时候忽略
name: '安徽',
});
});
//mapChart_pie.on('click', function (params) {
//var cityname = params.data.name;// 获取当前点击索引，
//myChart_pie.dispatchAction({ type: 'highlight', name:cityname});
//var na = param.name;// 获取当前点击名
//option['title']['subtext'] = '新乡市'+city;
//option['series'] = series_zztdata[index];
//myChart_pie.setOption(option);
// });
//document.write(cityname)；
</script>
</body>
</head>`
### What does the proposed API look like?
Don't need.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] fuchunhui commented on issue #17285: [Feature] connection pie to the map
Posted by GitBox <gi...@apache.org>.
fuchunhui commented on issue #17285:
URL: https://github.com/apache/echarts/issues/17285#issuecomment-1168324737
unable to run the demo, try it like this.
```
mapChart_pie.on('click', function(params) {
const index = 0; // computed the index of Guandong province
myChart_map.dispatchAction({
type: 'highlight',
dataIndex: index
});
});
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org