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 是单线程！

echarts(雷达图和中国地图)相关推荐

地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...
【ECharts学习】—实现中国地图
[ECharts学习]-实现中国地图使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取点我跳转到百度网盘提取码:clby <!DOCT ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
echarts混合图、省份地图、中国地图、环形图
最近工作上用到的几种echarts图表样例,在此记录下: <!DOCTYPE html> <html lang="en"> <head> ...
echarts绘制完整的中国地图
echarts完整的中国地图效果图 html部分 js部分效果图 html部分给一个盒子必须给宽高<template><div class="home" ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...
ECharts 雷达图在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...

echarts(雷达图和中国地图)

echarts(雷达图和中国地图)相关推荐

最新文章

热门文章