参考:
Echarts官网实例
效果:
需要通过ajax的方式获取json数据:
{"code":100,"msg":"处理成功!","extend":{"items":[{"name":"三亚","value":52},{"name":"三门峡","value":37},{"name":"上海","value":153},{"name":"东莞","value":251},{"name":"东营","value":50},{"name":"中山","value":50},{"name":"临安","value":42},{"name":"临汾","value":59},{"name":"临沂","value":42},{"name":"丹东","value":38},{"name":"丽水","value":40},{"name":"义乌","value":36},{"name":"乌鲁木齐","value":50},{"name":"九江","value":44},{"name":"乳山","value":51},{"name":"云浮","value":50},{"name":"佛山","value":35},{"name":"保定","value":49},{"name":"克拉玛依","value":46},{"name":"兰州","value":39},{"name":"包头","value":62},{"name":"北京","value":156},{"name":"北海","value":53},{"name":"南京","value":57},{"name":"南充","value":44},{"name":"南宁","value":49},{"name":"南昌","value":51},{"name":"南通","value":45},{"name":"即墨","value":46},{"name":"厦门","value":50},{"name":"句容","value":41},{"name":"台北","value":150},{"name":"台州","value":50},{"name":"合肥","value":40},{"name":"吉林","value":35},{"name":"吴江","value":35},{"name":"呼和浩特","value":59},{"name":"咸阳","value":51},{"name":"哈尔滨","value":47},{"name":"唐山","value":53},{"name":"嘉兴","value":55},{"name":"嘉峪关","value":39},{"name":"大同","value":52},{"name":"大庆","value":40},{"name":"大连","value":58},{"name":"天津","value":47},{"name":"太仓","value":40},{"name":"太原","value":65},{"name":"威海","value":46},{"name":"宁波","value":45},{"name":"安阳","value":56},{"name":"宜兴","value":35},{"name":"宜宾","value":50},{"name":"宜昌","value":56},{"name":"宝鸡","value":54},{"name":"宿迁","value":48},{"name":"富阳","value":42},{"name":"寿光","value":56},{"name":"岳阳","value":43},{"name":"常州","value":64},{"name":"常德","value":45},{"name":"常熟","value":56},{"name":"平度","value":52},{"name":"平顶山","value":47},{"name":"广州","value":151},{"name":"库尔勒","value":51},{"name":"廊坊","value":51},{"name":"延安","value":44},{"name":"开封","value":43},{"name":"张家口","value":47},{"name":"张家港","value":40},{"name":"张家界","value":41},{"name":"徐州","value":46},{"name":"德州","value":41},{"name":"德阳","value":55},{"name":"惠州","value":50},{"name":"成都","value":56},{"name":"扬州","value":51},{"name":"承德","value":52},{"name":"抚顺","value":52},{"name":"拉萨","value":45},{"name":"招远","value":54},{"name":"揭阳","value":35},{"name":"攀枝花","value":57},{"name":"文登","value":49},{"name":"无锡","value":49},{"name":"日照","value":54},{"name":"昆山","value":51},{"name":"昆明","value":50},{"name":"曲靖","value":44},{"name":"本溪","value":49},{"name":"杭州","value":101},{"name":"枣庄","value":57},{"name":"柳州","value":56},{"name":"株洲","value":43},{"name":"桂林","value":49},{"name":"梅州","value":50},{"name":"武汉","value":46},{"name":"汕头","value":35},{"name":"汕尾","value":52},{"name":"江门","value":45},{"name":"江阴","value":39},{"name":"沈阳","value":43},{"name":"沧州","value":48},{"name":"河源","value":46},{"name":"泉州","value":44},{"name":"泰安","value":44},{"name":"泰州","value":56},{"name":"泸州","value":48},{"name":"洛阳","value":58},{"name":"济南","value":46},{"name":"济宁","value":47},{"name":"海口","value":49},{"name":"海门","value":39},{"name":"淄博","value":49},{"name":"淮安","value":42},{"name":"深圳","value":154},{"name":"清远","value":65},{"name":"温州","value":33},{"name":"渭南","value":44},{"name":"湖州","value":52},{"name":"湘潭","value":50},{"name":"湛江","value":55},{"name":"溧阳","value":45},{"name":"滨州","value":47},{"name":"潍坊","value":63},{"name":"潮州","value":49},{"name":"澳门","value":80},{"name":"烟台","value":62},{"name":"焦作","value":48},{"name":"牡丹江","value":53},{"name":"玉溪","value":39},{"name":"珠海","value":77},{"name":"瓦房店","value":54},{"name":"盐城","value":48},{"name":"盘锦","value":43},{"name":"石嘴山","value":46},{"name":"石家庄","value":42},{"name":"福州","value":45},{"name":"秦皇岛","value":46},{"name":"章丘","value":40},{"name":"绍兴","value":43},{"name":"绵阳","value":45},{"name":"聊城","value":53},{"name":"肇庆","value":53},{"name":"胶南","value":34},{"name":"胶州","value":53},{"name":"自贡","value":62},{"name":"舟山","value":45},{"name":"芜湖","value":41},{"name":"苏州","value":51},{"name":"茂名","value":43},{"name":"荆州","value":49},{"name":"荣成","value":53},{"name":"莱州","value":36},{"name":"莱芜","value":63},{"name":"莱西","value":60},{"name":"菏泽","value":51},{"name":"营口","value":45},{"name":"葫芦岛","value":43},{"name":"蓬莱","value":39},{"name":"衡水","value":54},{"name":"衢州","value":58},{"name":"西宁","value":55},{"name":"西安","value":44},{"name":"诸暨","value":41},{"name":"贵阳","value":40},{"name":"赤峰","value":34},{"name":"连云港","value":34},{"name":"遵义","value":44},{"name":"邢台","value":43},{"name":"邯郸","value":49},{"name":"郑州","value":37},{"name":"鄂尔多斯","value":51},{"name":"重庆","value":49},{"name":"金华","value":49},{"name":"金坛","value":39},{"name":"金昌","value":53},{"name":"铜川","value":49},{"name":"银川","value":59},{"name":"锦州","value":46},{"name":"镇江","value":53},{"name":"长春","value":40},{"name":"长沙","value":43},{"name":"长治","value":56},{"name":"阳江","value":61},{"name":"阳泉","value":51},{"name":"青岛","value":47},{"name":"鞍山","value":58},{"name":"韶关","value":49},{"name":"香港","value":155},{"name":"马鞍山","value":39},{"name":"高雄","value":100},{"name":"齐齐哈尔","value":53}]}}
记得要引入china.json
该项目下载地址:全国主要城市买家数量统计
可以从官方地址下载;GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browser
从官方下载的文件中,china.json的位置在:test/data/map/json文件夹下面
如果没有引入这个china.json的话,地图可能无法渲染成功。
因为没有在实际的项目中使用,所以把ajax返回值这块改写了一下,获取数据的代码也在,只是屏蔽了
完全是静态的echarts实例
Document