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 地图统计相关推荐

  1. 微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况...

    /** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 *  作者:杨浩瑞  QQ:1420213383  独立博客:http://www. ...

  2. 地图统计_博客 城市访问量统计并且通过Echarts+百度地图展示

    本篇讲解一下 如何在Vue 中使用 Echarts + 百度地图 统计 博客访问量 并且通过QQWry 解析 ip 地址 利用Echarts 展示出来 效果图如下: 1.纯真Ip地址库 QQWry 这 ...

  3. echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...

  4. Vue 使用echarts 地图自定义图标和修改图标样式,点击切换图标

    效果图:如下 注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...

  5. echarts 地图_地图 json 免费下载_自定义icon

    Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...

  6. Echarts地图初体验

    根据黑马pink老师的视频制作的echarts地图 最近沉迷P社的钢4,断断续续几天才做好 效果预览 echart拿来做这种动态图还是不错的 官网百度的echarts 仓库地址 链接: link. h ...

  7. mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据,含世界地图

    [实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │   ├── anhu ...

  8. Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档

    Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载

  9. echarts 地图常见效果

    echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...

最新文章

  1. 【汇总】ElementUI中高频次使用代码片段
  2. matlab消去前一个图,各位matlab高手,如何从2个3元方程中消去一个变量,然后做3维图形~...
  3. centos下载速度很慢解决办法
  4. python_ 学习笔记(hello world)
  5. 成功解决OSError: [Errno 28] No space left on device
  6. oracle安装及使用常见错误
  7. c# SerialPort会出现“已关闭 Safe handle”的错误
  8. 解决安装SQL Server 2005开发版时,出现“SQL Server 服务无法启动 ”点击重试或取消的解决方法
  9. python求正整数的百位部分_Python程序设计课后习题答案
  10. 基于JAVA+SpringMVC+MYSQL的在线招标管理系统
  11. [Ariticle]番禺绿地和我小时候的故事
  12. JetBrains系列WebStorm等中文输入法无法跟随光标的问题的解决办法
  13. linux下打开Mongodb命令行窗口,Linux系统下MongoDB的安装与基本操作
  14. iOS 多线程的使用
  15. 【图像去噪】基于matlab全变分算法图像去噪【含Matlab源码 1324期】
  16. 合并传闻是真是假?ofo摩拜之争是否继续?(产品)
  17. 简单屏幕录制截屏工具
  18. 解决64位虚拟机安装和键盘FN快捷键问题
  19. #今日论文推荐#CVPR 2022 | 道高一尺,魔高一丈,ConvNet还是ViT?
  20. 2人同步听歌软件_打包走!全网无损音乐任意下,支持4大主流音乐平台同步歌单!...

热门文章

  1. PHP中json_encode与json_decode用法
  2. Aircrack-ng组件详解
  3. 锁相环(单相+陷波器)入门理解
  4. Object.freeze()--将对象冻结--在const中的应用
  5. 谷歌浏览器第一次开页面很慢...
  6. 50款漂亮的国外婚礼邀请函设计(上篇)
  7. 基于ssm考研信息查询系统(java毕业设计)
  8. (java毕业设计)基于java企业财务管理系统源码
  9. 仿生蛇形机器人02、Dynamixel MX-64AR舵机出现软件故障、无法调节角度
  10. A Modified Particle Swarm Optimizer