当前位置：首页 <
echarts做的一个地图省市县三级
摘要：在百度上搜到了echarts地图。用的时候发现只有省市二级和全国和省份的地图，没办法在网上找了很久的也没有省市县三级的。后来没招了，就想着把echarts地图省市二级的扩展到三级，经过漫长的研究代码终于找到了解决办法。省市县三echarts地图终于搞定。不过有个BUG ，进入下一级后不能返回上一级。
客户要求做的一个地图本来说好的是要全国，山东省，济宁市三级的。做完了之后结果客户不干了，非得要全国所有省市县的。做的第一版是SVG+js 做的在网上也找到SVG的数据了，整理SVG的数据的时候，弄烦了就在网上找有没有现成的地图。很偶然的机会，在百度上搜到了echarts地图。用的时候发现只有省市二级和全国和省份的地图，没办法在网上找了很久的也没有省市县三级的。后来没招了，就想着把echarts地图省市二级的扩展到三级，经过漫长的研究代码终于找到了解决办法。省市县三echarts地图终于搞定。不过有个BUG ，进入下一级后不能返回上一级。希望有高手能够解决这一BUG。
现将免费源码分享到网上供大家参考！
/file-3170437.html
您可能感兴趣的文章问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我需要实现一个：全国 =》 省 =》 市 的联动切换效果；
遇到一个问题：在使用echarts省市地图时报错。
代码如下：
1.引入地图文件：
我使用的是JS文件的地图文件。前提是已经用npm安装了echarts。
import React, { Component } from 'react';
import echarts from 'echarts';
import $ from '../../js/lib/jquery';
import './index.scss';
import '../../../node_modules/echarts/map/js/china';
import '../../../node_modules/echarts/map/js/province/anhui';
import '../../../node_modules/echarts/map/js/province/aomen';
import '../../../node_modules/echarts/map/js/province/beijing';
所有地图文件
2.使用地图
const option = {
text: 'iphone销量',
subtext: '纯属虚构',
left: 'center'
name: 'iphone3',
type: 'map',
mapType: 'shanghai',
roam: false,
show: true
emphasis: {
show: true
3.代码如上，我如果使用shanghai这个地图，就会报下面这个错：
请问：在react中需要怎样正确的引用echarts的地图文件才能正常工作？谢谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
npm 安装echarts-for-react,import ReactEcharts from 'echarts-for-react';import 'echarts/map/js/shanghai.js';
var DaMap = React.createClass({
componentDidMount: function(){},
getOption: function(){
const option = {
title：。。。。。
render: function(){
&ReactEcharts option={this.getOption()} style={{height: 500}} /&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感谢各位的回答支招！
两位推荐我使用封装后的echarts react组件，但是这不是问题产生的原因。感谢
的提醒，我已经有这方面的考虑。
在提了这个问题之后不久，我就解决了这个问题。详细说下我的解决方法：报错是说：Map 'shanghai' not exits.
因为我是对照着示例写的这个'shanghai'的地图名，所以最开始没网地图名方面去想，纠结了很久没找到原因，试了各位的方法也不行。然后，我就可以往这个报错信息上找原因，既然说 'shanghai' not exits，那么肯定是我引入的地图名不对或不对应。
我就打开的地图文件查看，结果发现了：
原来，echarts把地图名注册为了：“上海”，而非 'shanghai'，所以我在使用'shanghai'这个地图的时候，才会报错。
PS.顺便表达一个疑惑：为什么要用中文名来注册地图？然后，在使用的过程中，我也发现了echarts的一个“bug”，。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：　　在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是Echarts了。平时用js加载Echarts组件很方便，但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的Echarts的例子就是Echarts文档上介绍的最简单的应用。
render:function() {
var info = 1;
&div className="mt15 xui-financialAnalyse-page"&
&div className="xui-general"&
&Chart data={info} data-info={info} /&
　　这是调用Echarts组件的地方，给里面传了2个属性（data-开头是H5定义的规范）
var Chart = React.createClass({
getInitialState: function() {
this.token = Store.addListener(this.onChangeData);
componentWillMount: function() {
var info = this.props.
//HTML5规定自定义属性要以data-开头，这样的可以如下取
console.log(this.props['data-info'])
Action.getInfo(info);
componentDidUpdate: function() {　　　　　this.showChart(this.state.data)
onChangeData: function() {
var data = Store.getData();
this.setState({
data: data['info']['data']
//后台返回的数据
showChart: function(dataSet){
var myChart = echarts.init(document.getElementById('main'));
var option = {
text: 'ECharts 入门示例'
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
type : 'value'
series : [
name:'你好',
type:'bar',
barWidth: '60%',
data: dataSet
myChart.setOption(option);
render: function() {
&div id="main" style={{width: 500, height:500}}&&/div&
　　上面是完整的demo Echarts组件的代码，主要是利用了React根据不同状态（3种状态）提供的处理函数（一共有5种）。
　　1、componentWillMount：在插入真实DOM之前发起Action，向后端请求数据。
　　2、onChangeStore：在数据变更的时候更新数据，并在getInitialState中加入监听Store中数据变化的监听器。
　　3、componentDidUpdate：在数据被重新渲染之后，触发showChart()方法绘制canvas。
　　4、showChart：配置Echarts，具体配置信息可以参考Echarts文档
　　5、如果组件生命周期结束，那么要加上如下代码：
componentWillUnmount: function() {
this.token.remove();
　　否则会报错：&Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.&
　　最后附上效果图：
阅读(...) 评论()}