echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: '郑州', value: 100 //扩散的大小 }, { name: '北京', value: 100 }, { name: '香港', value: 100 }, { name: '上海', value: 100 }, ]; var geoCoordMap = { '郑州': [113.64963

效果图如下: 实现大致思路: 引入echarts最新版本,还有china.json,以及地级市坐标,(因为产品需求中不考虑省份,只考虑各个地级市),echarts官网已经不让下载地图了,网上很多地级市坐标不全,格式又不是想要的,没办法只能自己整理了:地级市坐标会放在下一篇文章中: var bg_echarts_map = echarts.init(document.getElementById('bg_echarts_map')); //地图 //获取地图相关数据 function getMap

echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数据 手动注册:引入json数据,使用 echarts.registerMap('china', chinaJSON);就可以绘制中国地图了 由于echarts提供的geoJSON数据过少,当我们想绘制中国城市甚至是城市的每个区的时候,我们就需要自定义geoJSON数据 提供geoJSON数据的网站:

本文目录 1. 摘要 2.引入ECharts以及地图相关json 3. 界面布局 4. js实现图形布局 5.定时循环jquery实现 6. 总结 1.  摘要 最近做项目遇到个统计相关需求,一个页面中大概四个或更多图形统计,百度地图.饼图.柱状图.线型图.百度地图上显示所有店面在全国各地大概位置,目前暂定每省一个,在地图上显示散点.如默认显示郑州散点闪动,其他图形显示郑州相关数据:5秒切换下一个区域点,其他的图表数据对应改变.先上个图,各位有需要的可以再接着往下 2.  引入ECharts以及

1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示这个元素的一些属性,一开始我想的是使用原生 javascript 的click事件来操作,但是这个方法是不可行的,因为我们的图表是在 canvas 中的显示的,所以我们每个散点不是能够我们通过 DOM 操作 来获取的,这里我们可以使用 ECharts 中的一个方法:使用下面的方法我们就可以为图表中的

在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候,没有显示从后台拿过来的数据,今天一看,原来是忘记写代码了,没有写返回数据,又怎么会返回需要的信息并且展示在前端界面? 紧跟着上一篇进行完善,本篇文章主要是解决echarts散点图鼠标划过散点显示信息的问题,篇幅较短,大约需要两分钟读完. 只需要在option里面写上返回需要的信息代码. toolt

在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了

一.背景 最近产品叫我做一些集团系列的统计图,包括集团组织.协作.销售.采购等方面的.作为一名后端程序员,于是趁此机会来研究研究这个库. 如果你仅仅停留在用的层面,那还是蛮简单的. 二.介绍 ECharts,缩写来自Enterprise Charts,商业级数据图表,它最初是为了满足公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表需求.以前这些系统的图表需求我们都是使用flash去实现的,百度分工很细,有专门的flash组同学去做这个事情,这就不可避免多了一个沟通环节,作为前端工程师无法

Demo 安装依赖 vue中安装echarts npm install echarts -S 在main.js中引用 import echarts from 'echarts'Vue.prototype.$echarts = echarts 默认情况下,使用map事,因为事china地图,所以展示出来或者匹配的城市名称,只有声,城市是不参与的(北京.上海...这些独立市是例外) 所以,想要正常展示出你的城市数据,需要引入echarts的城市js或json 引入城市json 为了防止echarts

0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地图容器 <div id="ID_L2H1Map" style="width: 600px;height:400px;"></div> 2.调用echarts绘制地图 createEchart_2L1H1G (data) { data = [ {

每个系列通过 type 决定自己的图表类型: type: 'bar':柱状/条形图 type: 'line':折线/面积图 type: 'pie':饼图 type: 'scatter':散点(气泡)图 type: 'effectScatter':带有涟漪特效动画的散点(气泡) type: 'radar':雷达图 type: 'tree':树型图 type: 'treemap':树型图 type: 'sunburst':旭日图 type: 'boxplot':箱形图 type: 'candlest

一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数据在箱体中,上下边界之外的就是异常数据了. 上下边界的计算公式是: UpperLimit=Q3+1.5IQR=75%分位数+(75%分位数-25%分位数)1.5 LowerLimit=Q1-1.5IQR=25%分位数-(75%分位数-25%分位数)1.5 参数说明: 1.Q1表示下四分位数,即25%

前言 从昨天开始给项目里添加一些图表对比功能,上一个项目里使用的是Highcharts,本打算继续用Highcharts做的,昨天试了下做出来的效果不太好,主要也是因为看的多了没什么新鲜感了,于是便尝试下百度做的ECharts, 总体效果还是不错的. 先来几张效果图体验下 其中第6张.第七张的效果可以说是在HTML环境下将Canvas发挥到极致,虽然我目前还没接触到HTML5和CSS3,深深感到和社会脱节啊,一直做信息化系统开发,整天跟随业务而变化,有时甚感无聊[随意吐槽下]. 优势 1.颜色对

ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.兼容大多数浏览器,包括IE6/7/8/9+, Chrome, Firefox, Safari 以及 Opera. 在线演示      源码下载 特色功能 混搭 混搭的图表会更具表现力也更有趣味,ECharts提供的图表(共9类14种)支持任意混搭: 折线图(区域图).柱状图

前言: 2012年从长沙跑到深圳,2016年又从深圳回到长沙,兜兜转转一圈,又回到了原点．4年在深圳就呆了一家公司,回长沙也是因为深圳公司无力为继,长沙股东老板挽留,想想自己年纪也不小了．就回来了,在长沙工作几月,也没什么太多的不适应．不用赶着项目上线,不用加班,想想其实也不错. 从12年在长沙就想写点开源的东西,不过实在不敢献丑．这次机缘巧合,有个朋友一个项目需要用到大量报表,我找到百度的开源echarts项目(感谢开源,4年工作以来用到很多很好的开源项目,对工作助力颇多),看着就挺舒服的,又

Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图).柱状图(条状图).散点图(气泡图).K线图.饼图(环形图).地图.力导向布局图,同时支持任意维度的堆积和多图表混合展现. (IE8- supported by excanvas ) 特色 我们诚挚邀请你翻阅这份在线文档 < Why ECharts ? > 你可以从中更直观的体

最近在玩ECharts,感觉真心不错,在这里把官方的资料收集收集,给大家推荐一下下~ Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. 支持IE6/7/8/9+,chrome.f

开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可以参考下面两个网址:ECharts官方网址:http://ecomfe.github.io/echarts/index.html,Why ECHarts:http://ecomfe.github.io/echarts/doc/slide/whyEcharts.html#/,官网有示例及各种帮助文档等

1. 取消echarts的默认动画 : series:[{ animation:false }] 2. 控制散点图里散点的大小: series:[{ symbolSize:5 }] 3. 去除内部网格线: splitLine: { show: false }, 4. 可以改变整个图表的大小及位置 grid:{    top:10,    left:50,    height:'85%',    width:'90%' }, 5. 饼图: series: [ { type:'pie', selec

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.—— 大数据时代,重新定义数据图表的时候到了 Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础