Echarts如何实现在地图上画饼图

最新推荐文章于 2024-03-11 13:15:00 发布

jim8757

最新推荐文章于 2024-03-11 13:15:00 发布

阅读量5.9k

点赞数 1

分类专栏： Web开发

Web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文参考：http://gallery.echartsjs.com/editor.html?c=xrJlpbBQSZ

废话不多说了，直接上HTML源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>china map</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.js"></script>
    <script src="../china.js"></script>
    <script src="../guangdong.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var yearArr = [2013,2014,2015];
var yearIndex = 1;
var selectedRange = null;
var option = null;
var str = "";
var data = [];
var geoCoordMap = {};

var mapFeatures = echarts.getMap('广东').geoJson.features;
mapFeatures.forEach(function(v){
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
    data.push({
            "name":name,
            "value":[
                    {name:"2013",value:Math.round(Math.random() * 100 + 10)},
                    {name:"2014",value:Math.round(Math.random() * 100 + 10)},
                    {name:"2015",value:Math.round(Math.random() * 100 + 10)}
                    ]
        })
});

//var geoCoordMap = eval("({"+str+"})");
console.log("===========geoCoordMap===============");
for (var i in geoCoordMap) {
    console.log(geoCoordMap[i]);
}
console.log(geoCoordMap);
console.log("===========data===============");
console.log(data);


function convertMapDta(year,data){
    var mapData = [];
    data.forEach(function(v){
        v.value.forEach(function(v1){
            if(String(v1.name) === String(year)){
                mapData.push({
                    "name":v.name,"value":v1.value
                })
            }
        })   
    });
    /*mapData.push({
        name: '南海诸岛',
        itemStyle: {
            normal: {
                opacity:0
            }
        },
        label: {
            normal: {
                show: false
            }
        }
    });*/
    return mapData;
}

function resetPie(myChart,params,geoCoordMap,yearIndex){
    var op = myChart.getOption();
    var ops = op.series;
    ops.forEach(function(v,i){
        if(i > 0){
            var geoCoord = geoCoordMap[v.name];
            var p = myChart.convertToPixel({seriesIndex: 0}, geoCoord);
            v.center = p; 
            if(params != 0 && params.zoom){
                v.radius = v.radius * params.zoom;
            }
            if(params != 0 && params.selected){
                var rangeFirstNumber = params.selected[0];
                var rangeSecondNumber = params.selected[1];
                var pd = v.data[yearIndex].value;
                if(pd < rangeFirstNumber || pd > rangeSecondNumber){
                    v.itemStyle.normal.opacity = 0;
                }else{
                    v.itemStyle.normal.opacity = 1;
                }
            }
        }
    });
    myChart.setOption(op,true);
}

function addPie(chart,data) {
    var op = chart.getOption();
    var sd = option.series;
    for (var i = 0; i < data.length; i++) {
        var randomValue = Math.round(Math.random() * 30);
        var radius = randomValue <= 10 ? 10 : randomValue;
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            var vr = [];
            (data[i].value).map(function(v,j){
                vr.push({name:v.name,value:v.value});
            });
            var p = chart.convertToPixel({seriesIndex: 0}, geoCoord);
            sd.push(
                {
                    name:data[i].name,
                    type:'pie',
                    tooltip:{
                        formatter:function(params){
                            return params.seriesName + "<br/>" + params.name + " : " + params.value;
                        }
                    },
                    radius : radius,
                    center: p,
                    data:vr,
                    zlevel:4,
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle:{
                        mormal:{
                           opacity:1 
                        }
                    }
                }
            );
        }
    }
    return sd;
};

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'test',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter:function(params){
            if(params.value){
                return params.name + "<br/>"+ yearArr[yearIndex] +": "+ params.value;
            }
        }
    },
    visualMap: {
        min: 0,
        max: 120,
        left: 'left',
        top: 'bottom',
        seriesIndex:0,
        text: ["高", "低"],
        calculable: true,
        color: ['#c05050','#e5cf0d','#5ab1ef'],
    },
    series : [{
        name: 'chinaMap',
        type: 'map',
        mapType: '广东',
        roam:true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        itemStyle:{
            normal:{
                areaColor:"#eee"
            }
        },
        data:convertMapDta(yearArr[yearIndex],data),
        /*zlevel:3*/
    }]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

addPie(myChart,data);
console.log("===========option=================");
console.log(option);
myChart.setOption(option,true);


/*myChart.on('georoam', function (params) {
    resetPie(myChart,params,geoCoordMap,yearIndex);
});

myChart.on('datarangeselected', function (params) {
    resetPie(myChart,params,geoCoordMap,yearIndex);
});

window.addEventListener("resize",function(){
    myChart.resize();
    resetPie(myChart,0,geoCoordMap);
})*/

// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
</script>
</body>
</html>

jim8757

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Echarts如何实现在地图上画饼图

本文参考：http://gallery.echartsjs.com/editor.html?c=xrJlpbBQSZ废话不多说了，直接上HTML源码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>china map</title>  <script sr
复制链接

扫一扫