echarts饼图与地图_json

 

echarts饼图与地图_数据_02

 

echarts饼图与地图_数据_03

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
    <script src="mytheme/essos.js"></script>
</head>
<body>
<div style="width: 600px;height: 800px"></div>
</body>
</html>
<script>
    var mcharts=echarts.init(document.querySelector('div'))
    var pdata=[
        {
            name:'淘宝',
            value:1222
        },
        {
            name:'京东',
            value:3233
        },
        {
            name:'唯品会',
            value:3234
        },
        {
            name:'助课宝',
            value:4345
        },
        {
            name:'灵通',
            value:8888
        }
    ]
var option={
        series:[
            {type:'pie',
             name:'消费',
                data:pdata,
                label:{
                     show:true,
                    formatter:function (arg) {
                       return arg.name+""+arg.value+"-"+arg.percent+"%";
                    }
                },
                //radius:20,//饼图半径
                //radius:20%,//参照容器的宽度与高度较小的一部分设置
                //radius:['50%','70%']
                roseType:'radius',//南丁格尔图，随数值大小变化
               //selectedMode:'single'//偏离原点一定距离
                selectedMode:'multiple'
            }
        ]
}
mcharts.setOption(option)
</script>

echarts饼图与地图_jquery_04

 

echarts饼图与地图_jquery_05

 

echarts饼图与地图_jquery_06

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 800px;height: 600px"></div>
</body>
</html>
<script>
   var mcharts=echarts.init(document.querySelector('div'))
   $.get('json/china.json',function (ret) {
       //ret是中国各个省份的矢量地图数据
       echarts.registerMap('chinaMap', ret)


       var option = {
           geo: {
               type: 'map',
               map: 'chinaMap',
               roam:true,//设置允许缩放及拖动
               label:{
                   show:true,//显示数据
               },
               zoom:1,//设置初始化缩放比例
               center:[87,43]//设置地图中心点
           }
       }
       mcharts.setOption(option)
   })
</script>