echarts 地图统计
X轴数据太多,显示不全设置
xAxis: [{type: 'category',axisLabel:{interval:0,//横轴信息全部显示rotate: -30 //-30度角倾斜显示},
设置Y坐标的最大值和单位
yAxis : [{name: '流量(m^3/s)',type: 'value',max: 500,axisLabel : {show:true,interval: 'auto', // {number}rotate: -45,margin: 18,formatter: '{value} ml' //单位},
数据加个单位:显示相关的label或tooltip都支持formatter,如数值轴你就可以通过axis的axisLabel.formatter做换算控制,支持function
Y轴保留1位小数
yAxis : [{type : 'value',axisLabel: {formatter: function (value, index) {return value.toFixed(1);}}}
],
鼠标悬停数据提示带单位
tooltip: {trigger: 'axis',formatter: "收支统计 : <br/>{b} : {c}万"
},
柱状图数据带上单位
series: [{type: 'bar',itemStyle: {normal: {label: {show: true,position: 'top',formatter: '¥{c}'}}},
柱状图修改颜色
name: '合计工时',
type: 'bar',
itemStyle: {normal: {color: '#00bfff',label : {show: true,position: 'top',textStyle: {color: '#00bfff'}}}
},
中国地图echart3.js
var option = {timeline: {data: ['2002-01-01','2003-01-01','2004-01-01',{value: '2005-01-01',tooltip: {formatter: '{b} GDP达到一个高度'},symbol: 'diamond',symbolSize: 16},'2006-01-01'],label: {formatter: function (s) {var date = new Date(s);var month = date.getMonth() + 1;return date.getFullYear() + "-" + (month > 9 ? month : '0' + month);}},
// autoPlay : true,playInterval: 1000,symbolSize: 15,width: '750'},grid: {bottom: 100 //留位置给日期轴},options: [{tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data: ['累计成交额']},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本,默认为数值文本calculable: true},series: [{name: '累计成交额',type: 'map',mapType: 'china',roam: false,label: {normal: {show: true},emphasis: {show: true}},'data': dataMap.dataGDP['2002']}]},
// {
// series : [
// {'data': dataMap.dataGDP['2003']}
// ]
// }]
};
$.get('__PUBLIC__/js/plugins/visualization/echarts/map/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var myChart = echarts.init(document.getElementById('chart_div'));for (var year = 2003; year <= 2006; year++) {option.options.push({series : [{'data': dataMap.dataGDP[year]}]});}myChart.setOption(option);myChart.on('mapselectchanged',function($params){console.log($params.data.name); //省的名称 });
});
echart2制作中国地图,点击对应的省市链接到该省份的详细介绍
require(['echarts', 'echarts/chart/map'], function (charts) {var myChart = charts.init(document.getElementById('chart_div'));var option = {title: {text: '全国34个省市自治区',subtext: '中国地图(点击切换)'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'right',data: ['随机数据']},dataRange: {min: 0,max: 1000,text: ['高', '低'], // 文本,默认为数值文本calculable: true},series: [{name: '随机数据',type: 'map',mapType: 'china',selectedMode: 'single',roam: true,itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},data: [{name: '北京', value: Math.round(Math.random() * 1000)},{name: '天津', value: Math.round(Math.random() * 1000)},{name: '上海', value: Math.round(Math.random() * 1000)},{name: '重庆', value: Math.round(Math.random() * 1000)},{name: '河北', value: Math.round(Math.random() * 1000)},{name: '河南', value: Math.round(Math.random() * 1000)},{name: '云南', value: Math.round(Math.random() * 1000)},{name: '辽宁', value: Math.round(Math.random() * 1000)},{name: '黑龙江', value: Math.round(Math.random() * 1000)},{name: '湖南', value: Math.round(Math.random() * 1000)},{name: '安徽', value: Math.round(Math.random() * 1000)},{name: '山东', value: Math.round(Math.random() * 1000)},{name: '新疆', value: Math.round(Math.random() * 1000)},{name: '江苏', value: Math.round(Math.random() * 1000)},{name: '浙江', value: Math.round(Math.random() * 1000)},{name: '江西', value: Math.round(Math.random() * 1000)},{name: '湖北', value: Math.round(Math.random() * 1000)},{name: '广西', value: Math.round(Math.random() * 1000)},{name: '甘肃', value: Math.round(Math.random() * 1000)},{name: '山西', value: Math.round(Math.random() * 1000)},{name: '内蒙古', value: Math.round(Math.random() * 1000)},{name: '陕西', value: Math.round(Math.random() * 1000)},{name: '吉林', value: Math.round(Math.random() * 1000)},{name: '福建', value: Math.round(Math.random() * 1000)},{name: '贵州', value: Math.round(Math.random() * 1000)},{name: '广东', value: Math.round(Math.random() * 1000)},{name: '青海', value: Math.round(Math.random() * 1000)},{name: '西藏', value: Math.round(Math.random() * 1000)},{name: '四川', value: Math.round(Math.random() * 1000)},{name: '宁夏', value: Math.round(Math.random() * 1000)},{name: '海南', value: Math.round(Math.random() * 1000)},{name: '台湾', value: Math.round(Math.random() * 1000)},{name: '香港', value: Math.round(Math.random() * 1000)},{name: '澳门', value: Math.round(Math.random() * 1000)}]}]};myChart.setOption(option);var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {var selected = param.selected;var selectedProvince;var name;for (var i = 0, l = option.series[0].data.length; i < l; i++) {name = option.series[0].data[i].name;option.series[0].data[i].selected = selected[name];if (selected[name]) {selectedProvince = name;}}if (typeof selectedProvince == 'undefined') { //城市点击后option.series[0].mapType = 'china';option.title.subtext = '中国地图(点击切换)';myChart.setOption(option, true);return;}option.series[0].mapType = selectedProvince;//根据省取动态数据option.series[0].data.push({name: '荆门市', value: Math.round(Math.random() * 1000)},{name: '咸宁市', value: Math.round(Math.random() * 1000)},{name: '随州市', value: Math.round(Math.random() * 1000)},{name: '孝感市', value: Math.round(Math.random() * 1000)},{name: '武汉市', value: Math.round(Math.random() * 1000)},{name: '黄石市', value: Math.round(Math.random() * 1000)},{name: '神农架林区', value: Math.round(Math.random() * 1000)},{name: '天门市', value: Math.round(Math.random() * 1000)},{name: '仙桃市', value: Math.round(Math.random() * 1000)},{name: '潜江市', value: Math.round(Math.random() * 1000)},{name: '鄂州市', value: Math.round(Math.random() * 1000)},{name: '宜昌市', value: Math.round(Math.random() * 1000)});option.title.subtext = selectedProvince + ' (点击切换)';myChart.setOption(option, true);});
});
echarts 地图统计相关推荐
- 微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况...
/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 * 作者:杨浩瑞 QQ:1420213383 独立博客:http://www. ...
- 地图统计_博客 城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下 如何在Vue 中使用 Echarts + 百度地图 统计 博客访问量 并且通过QQWry 解析 ip 地址 利用Echarts 展示出来 效果图如下: 1.纯真Ip地址库 QQWry 这 ...
- echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
- Vue 使用echarts 地图自定义图标和修改图标样式,点击切换图标
效果图:如下 注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
- echarts 地图_地图 json 免费下载_自定义icon
Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
- Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图 最近沉迷P社的钢4,断断续续几天才做好 效果预览 echart拿来做这种动态图还是不错的 官网百度的echarts 仓库地址 链接: link. h ...
- mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据,含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
- Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
- echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
最新文章
- 【汇总】ElementUI中高频次使用代码片段
- matlab消去前一个图,各位matlab高手,如何从2个3元方程中消去一个变量,然后做3维图形~...
- centos下载速度很慢解决办法
- python_ 学习笔记(hello world)
- 成功解决OSError: [Errno 28] No space left on device
- oracle安装及使用常见错误
- c# SerialPort会出现“已关闭 Safe handle”的错误
- 解决安装SQL Server 2005开发版时,出现“SQL Server 服务无法启动 ”点击重试或取消的解决方法
- python求正整数的百位部分_Python程序设计课后习题答案
- 基于JAVA+SpringMVC+MYSQL的在线招标管理系统
- [Ariticle]番禺绿地和我小时候的故事
- JetBrains系列WebStorm等中文输入法无法跟随光标的问题的解决办法
- linux下打开Mongodb命令行窗口,Linux系统下MongoDB的安装与基本操作
- iOS 多线程的使用
- 【图像去噪】基于matlab全变分算法图像去噪【含Matlab源码 1324期】
- 合并传闻是真是假?ofo摩拜之争是否继续?(产品)
- 简单屏幕录制截屏工具
- 解决64位虚拟机安装和键盘FN快捷键问题
- #今日论文推荐#CVPR 2022 | 道高一尺,魔高一丈,ConvNet还是ViT?
- 2人同步听歌软件_打包走!全网无损音乐任意下,支持4大主流音乐平台同步歌单!...
热门文章
- PHP中json_encode与json_decode用法
- Aircrack-ng组件详解
- 锁相环(单相+陷波器)入门理解
- Object.freeze()--将对象冻结--在const中的应用
- 谷歌浏览器第一次开页面很慢...
- 50款漂亮的国外婚礼邀请函设计(上篇)
- 基于ssm考研信息查询系统(java毕业设计)
- (java毕业设计)基于java企业财务管理系统源码
- 仿生蛇形机器人02、Dynamixel MX-64AR舵机出现软件故障、无法调节角度
- A Modified Particle Swarm Optimizer