echarts(雷达图和中国地图)

上一篇我们介绍了echarts的一些 基本用法， 喝简单的条形图和饼状图！ 今天我们 写一下 雷达图（就像我们打lol里面战绩评分的 六芒星图），还有一个 中国地图！！

<div class="warpper"></div>
    <script>
        
        var mychart = echarts.init($('.warpper').get(0));
       
        mychart.setOption({
            backgroundColor : 'black',
            title: {
                text: "英雄分析图",
                textStyle : {
                    color : 'yellow'
                },
                left : 'center'
            },
            tooltip:{

            },
            legend : {
                 left: 'right',
				data: ['霞','vn','mf']
              
            },
            radar : {
                indicator : [
                    {
                        name : '攻击力',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    },
                    {
                        name : '护甲',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    },
                    {
                        name : '魔抗',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    },
                    {
                        name : '法强',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    },
                    {
                        name : '暴击',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    },
                    {
                        name : '攻速',
                        max : 300,
                        color: "rgba(159, 8, 247, 1)"
                    }
                ],
                splitArea: {
                    show: false
                },
                shape:'circle',
                splitLine: {
                    lineStyle: {
                            // 使用深浅的间隔色
                            color: [
                                'rgba(138,43,226,1)',
                                'rgba(72,209,204,1)',
                                'rgba(152,251,152,1)',
                                'rgba(240,230,140,1)',
                                'rgba(123,104,238,1)',
                                'rgba(211,211,211,.2)'
                            ]
                    }
                },
                axisLine : {
                    lineStyle : {
                        color : 'rgba(255,69,0,1)'
                        
                    }
                }
            },
            series: [{
                type: 'radar',
                data : [
                    {
                        value : [100,100,110,145,118,222],
                        name : '霞',
                        symbol: "roundRect",
                        symbolSize : 10,
                        label : {
                            show : true
                        },
                        itemStyle : {
                            color : 'pink',
                            borderWidth : 1,
                            borderColor : 'red'
                        },
                        lineStyle : {
                            color : 'yellow',
                            opacity : 0.7,
                            width : 2
                        },
                        areaStyle : {
                            color : 'red',
                            opacity : 0.1
                        },
                        emphasis : {
                            lineStyle : {
                                opacity : 0.7
                            },
                            areaStyle : {
                                opacity : 0.5
                            }
                        }
                    },
                    {
                        value : [200,90,45,97,118,120],
                        name : 'vn',
                        symbol: "roundRect",
                        label : {
                            show : true
                        },
                        symbolSize : 10,
                        label : {
                            show : true
                        },
                        itemStyle : {
                            color : 'white',
                            borderWidth : 1,
                            borderColor : 'red'
                        },
                        lineStyle : {
                            color : '#921AFF',
                            opacity : 0.7,
                            width : 2
                        },
                        areaStyle : {
                            color : '#0f0',
                            opacity : 0.1
                        },
                        emphasis : {
                            lineStyle : {
                                opacity : 0.7
                            },
                            areaStyle : {
                                opacity : 0.5
                            }
                        }
                    },
                    {
                        value : [200,120,246,250,110,40],
                        name : 'mf',
                        symbol: "roundRect",
                        label : {
                            show : true
                        },
                        symbolSize : 10,
                        label : {
                            show : true
                        },
                        itemStyle : {
                            color : 'white',
                            borderWidth : 1,
                            borderColor : 'red'
                        },
                        lineStyle : {
                            color : '#FF4500',
                            opacity : 0.7,
                            width : 2
                        },
                        areaStyle : {
                            color : '#FF0080',
                            opacity : 0.1
                        },
                        emphasis : {
                            lineStyle : {
                                opacity : 0.7
                            },
                            areaStyle : {
                                opacity : 0.5
                            }
                        }
                    }
                ]
            }]
        });
    </script>

在展示一个中国地图！

<script type="text/javascript" src="js/echarts.js" ></script>
		<script type="text/javascript" src="js/china.js" ></script>
		
		<script type="text/javascript" src="js/jquery.js" ></script>
	<div class="box">
		</div>
		
		
		<script>
			
			function random(){
				return Math.floor(Math.random()*1000);
			}
			
				var mycharts = echarts.init($('.box').get(0));
				
					mycharts.setOption({
						visualMap:{
							type:'continuous',
							min : 0,
							max :1000,
							range: [300,800],
							show :true,
							orient:'vertical',
							text:['height','low'],
							hoverLink:true,
						},
				
					series:[
						{
							  type: 'map',
				               mapType:'china',
						  data: [
			                   { name: '北京', value: random() },
								{ name: '天津', value: random() },
								{ name: '上海', value: random() },
								{ name: '重庆', value: random() },
								{ name: '河北', value: random() },
								{ name: '河南', value: random() },
								{ name: '云南', value: random() },
								{ name: '辽宁', value: random() },
								{ name: '黑龙江', value: random() },
								{ name: '湖南', value: random() },
								{ name: '安徽', value: random() },
								{ name: '山东', value: random() },
								{ name: '新疆', value: random() },
								{ name: '江苏', value: random() },
								{ name: '浙江', value: random() },
								{ name: '江西', value: random() },
								{ name: '湖北', value: random() },
								{ name: '广西', value: random() },
								{ name: '甘肃', value: random() },
								{ name: '山西', value: random() },
								{ name: '内蒙古', value: random() },
								{ name: '陕西', value: random() },
								{ name: '吉林', value: random() },
								{ name: '福建', value: random() },
								{ name: '贵州', value: random() },
								{ name: '广东', value: random() },
								{ name: '青海', value: random() },
								{ name: '西藏', value: random() },
								{ name: '四川', value: random() },
								{ name: '宁夏', value: random() },
								{ name: '海南', value: random() },
								{ name: '台湾', value: random() },
								{ name: '香港', value: random() },
								{ name: '澳门', value: random() }
              					  ],
              			},
					]
				
			});
				
		</script>

细心地朋友可以看见 我们导入的包的顺序 china的包 一定要在 echarts的下方，因为 js 是单线程！