<script type="text/javascript" src="../js/chinamapPath.js"></script>
<script type="text/javascript" src="../js/raphael.js"></script>
<script type="text/javascript" src="../js/g.raphael-min.js"></script>
<script type="text/javascript" src="../js/g.pie-min.js"></script>
<script type="text/javascript" src="../js/g.bar-min.js"></script>
2. 添加页面部分代码
<div id="china_map" style="margin-left:200pxmargin-top:40px"></div>
3. 绘制地图部分代码：
$(function() {
Raphael.getColor.reset()//色谱重置回红色
//创建一个画布对象用来绘制。你必须第一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。
var R = Raphael("china_map", 600, 500)
//调用绘制地图方法
paintMap(R)
var current = null
//用于对鼠标点击次数的计数；
var result = 0
//判断两次点击的区域名字的标志量；
var nameFlag = ""
var x=0
var y=0
var textAttr = {
"fill": "#000",
"font-size": "13px",
"cursor": "pointer" //光标的CSS类型,指针类型；
}
for (var state in china) {//state代表每个省，即就是用每个或区域来遍历整个地图区域；
//Raphael.getColor(0.9):每次调用返回色谱中的下一个颜色(返回颜色的十六进制表示)
china[state]['path'].color = Raphael.getColor(0.9)//分省区域着色
china[state]['path'].transform("t30,0")//地图的每个省的路径横向平移坐标（30px,0px）
(function (st, state) {
//获取每个区域的中心坐标（getBBox()：返回指定元素的边界框，x：左上角Xy表示左上角y）
var xx = st.getBBox().x + (st.getBBox().width / 2)
var yy = st.getBBox().y + (st.getBBox().height / 2)
//***修改部分地图文字偏移坐标
switch (china[state]['name']) {
case "江苏":
xx += 5
yy -= 10
break
case "河北":
xx -= 10
yy += 20
break
case "天津":
xx += 10
yy += 10
break
case "上海":
xx += 10
break
case "广东":
yy -= 10
break
case "澳门":
yy += 10
break
case "香港":
xx += 20
yy += 5
break
case "甘肃":
xx -= 40
yy -= 30
break
case "陕西":
xx += 5
yy += 10
break
case "内蒙古":
xx -= 15
yy += 65
break
default:
}
//***写入地名,并加点击事件,部分区域太小，增加对文字的点击事件
//R.text(xx, yy, china[state]['name'])给地图区域的中心位置添加省的名字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(function () {
if(result<1){ //第一次点击这个区域
nameFlag = china[state]['name']
clickMap()
controlChinaMap()
result += 1
}else if(result>=1 &&(nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap()
}else{
clickMap()
controlChinaMap()
china[state]['text'] = R.text(xx, yy, nameFlag).attr(textAttr).click(function (){
clickMap()
})
}
})
//图形的点击事件(st[0]表示一个SVGPathElement对象)
$(st[0]).click(function (e) {
if(result<1){ //第一次点击这个区域
x = xx
y = yy
nameFlag = china[state]['name']
clickMap()
controlChinaMap()
result += 1
}else if(result>=1 &&(nameFlag == china[state]['name'])){//第N此点击，判断是不是同一个点击区域
clickMap()
}else{
clickMap()
R.barchart(x,y-150,50,200,[0],{type:"round"})
controlChinaMap()
}
})
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500)//为地图区域创建动画，鼠标滑过区域颜色加深，持续时间500毫秒
china[state]['text'].toFront()//元素上移
R.safari()//处理渲染错误
}
st[0].onmouseout = function () {
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500)
china[state]['text'].toFront()
R.safari()
}
function clickMap() {
if (current == state) //判断两次点击是否点击的是同一个区域
return
//重置上次点击的图形
current &&china[current]['path'].animate({ transform: "t30,0", fill: china[current]['isClick'] ? china[current]['path'].color : "#b0d0ec", stroke: "#ddd" }, 2000, "elastic")
current = state //将当前值赋给变量
//对本次点击
china[state]['path'].animate({ transform: "t30,0 s1.03 1.03", fill: china[state]['path'].color, stroke: "#000" }, 1200, "elastic")
st.toFront() //向上
R.safari()
china[current]['text'].toFront() //***向上
if (china[current] === undefined) return
}
function controlChinaMap(){
//type默认是square，还有sharp、soft
R.barchart(xx,yy-150,50,200,[5,4,3,2,1],{type:"round"})
//在你的图上面加一个注释
//R.blob(xx,yy-130, "25%", 50)
}
})(china[state]['path'], state)
}
})
这个我曾经成功开发过，不过写插件就写了很久，太累人。部分代码看这里：http://www.idlepa.com/yezi/blog/?i=page&id=99/article.html如果这样还是不能理解，那推荐题主还是用插件来解决吧
这段时间以来，每天早上起床的第一件事就是打开手机看看当前疫情的状况。作为一名程序员，看这个图的时候，我猜测这个图应该是用百度的echarts画的，然后脑子里过了一下echarts的使用。不过试试证明，我还是太年轻，没有产品意识。
百度的echarts团队其实早就将echarts的能力包装成一个完整易用的工具开放出来。不需要懂一行代码，谁都可以快速开发出来一个像疫情图这样高级的图标。
话不多说，这个工具就是百度图说，网址是https://tushuo.baidu.com/
看右下角，果然没错，echarts出品。
下面开始我的表演：
随便找个网站，拔下来一份最新的疫情数据
点击开始制作图表--->创建图表 --->选择地图--->标准中国地图
数据编辑--->导入excel。即可将我们准备的疫情数据导入
4，调整颜色
通过参数调整。在值域中通过修改值域范围和控制器颜色。可以简单的做出一个还不错的图表。
另外，图说里面还有其他很多常用的图例。都是我们用echarts经常来做的。
这个工具挺好，虽说我们程序员都可以用代码写出来，这样也可以省不少事。并且这个工具可以查看源代码，又没实现的功能，咱们也可以拿来改改。
对于不懂代码的人来说，直接拿来用就行，一行代码你也不需要懂。
另外其他的一些开源图表推荐
D3.js是一个开源的JavaScript库，用于根据用户数据处理文档。这是一个强大的工具，通过HTML，SVG和CSS的帮助，赋予数据生命。 D3允许开发人员将任意数据绑定到DOM，然后将数据驱动的转换应用到DOM。例如：考虑一个数组数组，您可以使用它来生成一个HTML表，或者您可以使用相同的数据生成交互式条形图或饼图。
官方网站：https：//d3js.org/
Chart.js是一个由社区维护图表库，通过使用它，我们可以为您的网站创建响应式图表。通过使用它，我们可以生成混合图表，并且在现代浏览器中具有很好的渲染能力。Angular Chart建立在Chart.js库之上，对于Angular项目来说，实现Angular图表将非常容易。
官方网站：http：//www.chartjs.org/
n3-charts也是一个开源的JavaScript图表库，它使得Angular开发者的生活变得简单。 n3-chart是建立在D3.js和AngularJS之上的，因此它具有更强大的图表，并且易于实现。
官方网站：http：//n3-charts.github.io/line-chart/#/home
