Echarts
Dr.Zhu
keep calm and carry on
展开
-
echart之全国地图切换省级地图
做完之后的效果如下:这是在基础地图地图的基础上结合echarts2的改进版本,echarts2中的版本只有左上角的全国地图的比较简单的实例代码。现在的比较完善(点击全国地图上的省显示对应省内各市的热力分布,对应的全国地图和省级地图的位置大小都会相应的变化,然后再点击右上角的返回全国按钮的时候,隐藏省级地图,全国地图回复原来的大小的位置。)首先定义几个数据变量:province_da原创 2016-11-28 15:26:27 · 10338 阅读 · 2 评论 -
Echarts之map地图隐藏港澳台等区域
只是提供一种思路: china.js中找到echarts.registerMap(‘china’, {中的”features”KEY值 形如:{ "id": "710000", "geometry": { "type": "MultiPolygon", "coordinates": [原创 2017-05-18 15:05:08 · 9380 阅读 · 1 评论 -
Echarts之柱状图获取点击柱子事件&自定义柱子颜色&类目轴纵向排列
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 90%"></div>原创 2017-05-18 11:58:33 · 15706 阅读 · 0 评论 -
Echarts之地图自定义lable文本标签&去掉小点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省名称居中显示</title> </head> <body> <div id="map" style="width: 600px;height: 500px; float: left;"> </di原创 2017-05-18 14:05:40 · 12331 阅读 · 1 评论 -
Echarts之Chrome不兼容fontSize小于12的字体大小设置&解决办法
Echarts在Chrome和搜狗浏览器下对于地图Map的字体设置如果小于12的话就会按照12显示。textStyle : { fontSize : 9, },但是在火狐浏览器则会正常显示。 原因是在Chrome浏览器内将-webkit-text-size-adjust属性给禁用了。 解决办法: ①在浏览器高级设置里面将最小字体改为需要的值,但是原创 2017-05-23 16:03:26 · 6871 阅读 · 0 评论 -
Echarts之自定义Map热力图比例尺(视觉映射组件)
形如: visualMap组件有两种展现形式,默认是continuous(连续型),要想实现图片的形式,需要将type设置为piecewise(分段型) 自定义显示lable:pieces: [ {min: 0, max: avg,label: '低于于国家复合指标'}, {min: avg, max: max, label: '高于国家复合指标'},原创 2017-05-23 15:53:45 · 4295 阅读 · 0 评论 -
Echarts3之修复全国地图省名称显示不居中的问题
修改前后对照在Echarts官网下载全国地图的插件,显示的位置可能会有点偏差,透过现象看本质,显示名称的定位本质上是取的地理坐标的经纬度。 我们打开china.js文件前面的匿名函数在加载的时候进行类型和加载参数的判断。验证成功之后执行关键的注册地图代码 echarts.registerMap(‘china’,’…’);然后再看传递进去的全国地图的json数据。 格式化之后代码: {原创 2017-04-05 10:19:07 · 18486 阅读 · 16 评论 -
echarts之bootstrap选项卡不能显示其他标签echarts图表
在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 解决办法:在scripts中:var Echart_01 = echarts.init(document.getElementById("chart"));$('a[data-toggle="tab"]').on('show原创 2017-03-22 10:57:34 · 4099 阅读 · 6 评论 -
Echarts3之html2canvas下载图表(后续生成PDF)
Echarts提供了下载图表的功能,但是仅仅满足客户端下载到本地,不经过项目本身的后台,对于高度自定义是不能满足的。 首先页面引入html2canvas插件。<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>然后引入Echarts。对应自己的echarts.js路径<script src=原创 2017-03-13 16:40:28 · 6179 阅读 · 0 评论 -
Echarts3之字符云按照给定形状显示
上篇说到Echarts引入字符云,但是只是单独的显示随机的排列图形。下面又找了一个可以自定义字符云整体显示的操作。首先你需要一张想要显示的矢量图。然后代码方面:function world_cloud(cloud,maskImage) { var option = { tooltip : {}, series : [ { type : 'wordCloud',原创 2017-01-13 12:20:15 · 10613 阅读 · 2 评论 -
Echarts3之字符云WorldCloud
字符云功能现在已经不在Echarts的官方示例中了。通过官网里面也找不到对应的API和具体介绍。如果需要进行开发的话需要单独引用专门的js文件。下面是下载的百度云链接:worldcloud.jshttps://pan.baidu.com/s/1o8JJzcA正常的Echarts的js文件也是需要引入的。然后是代码部分:function world_cloud(cloud原创 2017-01-13 10:18:49 · 25282 阅读 · 5 评论 -
Echarts扩展之ajax异步加载tooltip数据
最近做大数据可视化视图展现,随着业务的加深,正常的简单的echars里面的实例已经满足不了现有的需求;所以就需要对echarts进行更深一步的了解;因为接触echars比较早,所以现在使用的是echarts的2.*版本;最新的echarts3添加了非常多的人性化的设计;非常好,但是还没来得及深入研究;废话不多说;直角系视图包括折线图、柱状图 加载完页面之后点击数据的点会弹出相应的数据信息;原创 2016-04-10 19:20:11 · 6109 阅读 · 1 评论 -
Echarts3之全国地图和省市地图二合一整合
没图说个ji 先上图开始接触时是echarts 2 ,echarts升级至echarts 3 之后没怎么接触,通过介绍了解到,echarts3变得更加人性化,将一些底层的方法开放出来,增加的echarts的扩展性。很遗憾echarts3并没有提供市级的地图的demo。于是将echarts2中的demo直接拿来改下面是代码:希望能帮助到你 ECharts原创 2016-09-20 10:07:15 · 9671 阅读 · 9 评论 -
Echarts图表之插件生成PDF下载
需要用到的插件:<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jspdf.min.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts3.js"原创 2017-05-11 10:30:52 · 7153 阅读 · 6 评论