Echart佛山五区地图-动态地图-江西地图

佛山地区Echart地图

1. 下载

使用百度Echart编写的佛山五区地图。
动态地图，颜色、字体、tooltip提示均可进行修改。

Foshan-佛山地区Echart地图代码下载
https://gitee.com/guoye/blog-attachments/raw/master/website/Foshan.zip

2. 运行

如何运行？

因为需要读取json文件，所以需将源码放到服务端运行，如tomcat/Nodejs环境下。

在浏览器访问对应的服务器地址，运行对应*.html即可。直接打开是没有内容的。

---

江西地图

1. 在线调试

echarts3江西地图示例

echarts是一个很强大的图表库。
还提供在线运行调试的功能。在线运行地址：http://echarts.baidu.com/demo.html#pie-simple
下面是江西地图对应的代码及运行的效果图：

option = {
    
    title : {
        text: '协同办公系统',
        subtext: '',
        x:'center',
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['江西省水投生态资源开发集团有限公司','集团本部','江西省水务集团有限公司','江西省水投建设集团有限公司','江西省水投能源发展有限公司','中水联科技股份有限公司','江西省水投文化教育科技有限公司','江西省水投生态环境有限公司']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '45%',
            center: ['50%', '35%'],
            data:[
                {value:105, name:'江西省水投生态资源开发集团有限公司'},
                {value:500, name:'集团本部'},
                {value:74, name:'江西省水务集团有限公司'},
                {value:105, name:'江西省水投建设集团有限公司'},
                {value:140, name:'江西省水投能源发展有限公司'},
                {value:350, name:'中水联科技股份有限公司'},
                {value:190, name:'江西省水投文化教育科技有限公司'},
                {value:50, name:'江西省水投生态环境有限公司'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
    color: ['#f8cb00','#2298ef', '#63c2de', '#4dbd74', '#85c83e','#f86c6b',  '#f4689a', '#f9994b','#6e7074', '#546570', '#c4ccd3']
};

---

option = {
    title : {
        text: '访问统计',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['协同办公系统','人力资源系统','云行即时通信','主数据系统','邮件系统','营销系统']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '45%',
            center: ['50%', '35%'],
            data:[
                {value:235, name:'协同办公系统'},
                {value:1110, name:'人力资源系统'},
                {value:234, name:'云行即时通信'},
                {value:335, name:'主数据系统'},
                {value:290, name:'邮件系统'},
                {value:210, name:'营销系统'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
    color: ['#f8cb00','#2298ef', '#63c2de', '#4dbd74', '#f9994b','#f86c6b',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
};