关于echarts创建多边形 10C

代码如下,注释为1和2的分别打印了x,为什么每次都是1循环打印完之后才会走进2,求大神帮忙看看
for(var x = 0; x < 3; x++) {
console.log(x) //----------------------------1
var points1 = [];
var name1 = []; //扇区名称
var value1 = [];
var Pts = []; //扇区点组
for(var i = 0; i < data[x].length; i++) {
var arr = [];
points1.push(data[x][i].point);
name1.push(data[x][i].name);
value1.push(data[x][i].value);
jQuery.each(points1[i], function(i, val) {
arr.push(val);
});
Pts.push(arr);
arr = [];
}
option.options.push({
series: {
type: 'custom',
coordinateSystem: 'geo',
renderItem: function(params, api, x) {
console.log(x); //----------------------------2
var CX = new Array;
var color = api.visual('color');
var children = [];
var zoom = myChart.getOption().geo[0].zoom;
for(var j = 0; j < Pts.length; j++) {
var pointss = [];
for(var i = 0; i < Pts[j].length; i++) { //点数组坐标值转换为坐标系上的点
pointss.push(api.coord(Pts[j][i]));
}
CX.push(pointss); //转换后的点组
if(value1[j] < 10) {
CS_fill = "#ffffff";
} else if(value1[j] >= 10 && value1[j] < 20) {
CS_fill = "#f04504";
} else if(value1[j] >= 20 && value1[j] < 30) {
CS_fill = "#49483e";
} else {
CS_fill = "#494a5f";
}
if(zoom > 7) { //判断是否显示扇区名称——显示
var polygon = { //画多边形
type: 'polygon',
name: name[j],
shape: {
points: echarts.graphic.clipPointsByRect(CX[j], {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width + 10000,
height: params.coordSys.height + 10000
})
},
style: api.style({ //多边形样式
fill: CS_fill,
opacity: 0.3,
text: name1[j] + value1[j],
stroke: CS_border

                                    }),
                                }
                            } else { //不显示扇区名称
                                var polygon = { //画多边形
                                    type: 'polygon',
                                    name: name1[j],
                                    shape: {
                                        points: echarts.graphic.clipPointsByRect(CX[j], {
                                            x: params.coordSys.x,
                                            y: params.coordSys.y,
                                            width: params.coordSys.width + 10000,
                                            height: params.coordSys.height + 10000
                                        })
                                    },
                                    style: api.style({ //多边形样式
                                        fill: CS_fill,
                                        text: null,
                                        stroke: CS_border

                                    }),
                                }
                            }
                            children.push(polygon);

                        }
                        return {
                            type: 'group',
                            name: '机场',
                            children: children
                        };
                    },
                    data: [0],
                }
            });

        }
0

1个回答

代码如下,注释为1和2的分别打印了x,为什么每次都是1循环打印完之后才会走进2,求大神帮忙看看
for(var x = 0; x < 3; x++) {
console.log(x) //----------------------------1
var points1 = [];
var name1 = []; //扇区名称
var value1 = [];
var Pts = []; //扇区点组
for(var i = 0; i < data[x].length; i++) {
var arr = [];
points1.push(data[x][i].point);
name1.push(data[x][i].name);
value1.push(data[x][i].value);
jQuery.each(points1[i], function(i, val) {
arr.push(val);
});
Pts.push(arr);
arr = [];
}
option.options.push({
series: {
type: 'custom',
coordinateSystem: 'geo',
renderItem: function(params, api, x) {
console.log(x); //----------------------------2
var CX = new Array;
var color = api.visual('color');
var children = [];
var zoom = myChart.getOption().geo[0].zoom;
for(var j = 0; j < Pts.length; j++) {
var pointss = [];
for(var i = 0; i < Pts[j].length; i++) { //点数组坐标值转换为坐标系上的点
pointss.push(api.coord(Pts[j][i]));
}
CX.push(pointss); //转换后的点组
if(value1[j] < 10) {
CS_fill = "#ffffff";
} else if(value1[j] >= 10 && value1[j] < 20) {
CS_fill = "#f04504";
} else if(value1[j] >= 20 && value1[j] < 30) {
CS_fill = "#49483e";
} else {
CS_fill = "#494a5f";
}
if(zoom > 7) { //判断是否显示扇区名称——显示
var polygon = { //画多边形
type: 'polygon',
name: name[j],
shape: {
points: echarts.graphic.clipPointsByRect(CX[j], {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width + 10000,
height: params.coordSys.height + 10000
})
},
style: api.style({ //多边形样式
fill: CS_fill,
opacity: 0.3,
text: name1[j] + value1[j],
stroke: CS_border

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts自定义地图(想怎么画就怎么画)
echarts自定义地图,各区地图,街道地图,区县地图,详细地图,省市地图
如何利用echarts3绘制梯形波图
一、需求分析nn每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库。不过由于需要,这次的需要实现的效果如下: n1.实现一个梯形图(每个数据组对应一个梯形); n2.自定义echarts的右键功能,增加选项可以直接对数据项进行额外的操作;nnnn二、思路及实现nn2.1 自定义echarts的鼠标右键事件nn我们知道一般在浏览器中鼠标右键点击都有自定义的事件 nnn那么...
用echarts在百度地图bmap自定义形状
用echarts在百度地图bmap自定义形状nn创建html文件n引入百度地图API、Echarts、以及echarts的百度地图插件BMapnnecharts和bmap可以到官网去下载, 这里的路径是本地的n &amp;lt;script src=&quot;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=g3Ufu6jCRS2TNcCwsn5E3gZP&quot;&amp;gt;&amp;lt;...
生成的Polyline这样示例拓扑
//生成的Polyline要这样加点,ITopologicalOperator拓扑操作才正常,如果使用IPointCollection很有可能是COM错误n IPoint pt1 = new PointClass();n pt1.PutCoords(0, 100);n IPoint pt2 = new Poi...
echarts-的一些常规图形显示一
前言:echarts的一些常规图形显示nnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html lang=&quot;zh&quot;&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt;n &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;n &amp;lt;style type=&quot;text/css&quot
百度地图画多边形代码
百度地图画多边形代码<!DOCTYPE html> n<html> n<head> n <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> n <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
OpenLayers官方示例详解九自定义多边形样式(Custom Polygon Styles)
目录nn一、示例简介nn二、代码详解nn一、示例简介nn    这个示例演示怎样为多边形要素创建自定义的样式。nn    在这个示例中,将为多边形创建两种不同的样式:nn第一个样式是多边形的整体样式n 第二个样式是为多边形的各个顶点创建的样式nnn二、代码详解nnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html lang=&quot;en&quot;&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;m...
(GIS可视化)蜂窝多边形密度图
(GIS可视化)蜂窝多边形密度图
自定义echarts图形的提示格式
自定义echarts图形鼠标放上去数据的显示格式,formatter自定义回调函数
全国地图geoJson数据,可结合echarts使用,附带使用示例
自己用的echarts 3,需要扩展地图,从其他地方收集来的,然后自定义拓展 包含全国地图,各省各市各县,如果还需要更细,你就需要自己想办法了
echarts地图扩展案例(云南地图面积)
echarts地图扩展案例,根据echarts官网上面香港人口地图扩展做参考做的,地图json数据已经上传
全国和世界echarts json数据
全国和世界echarts json数据 bmap.min.js;china.js;countUp.min.js;world.js
ECharts的geojson地图数据下载(全国地图json、各省、市、区json)有demo
ECharts的geojson地图数据下载(全国地图json、各省、市、区json)有demo
3dmax入门到精通之可编辑多边形抓形塑形小技巧
n n n n3dmax入门到精通之可编辑多边形抓形塑形小技巧n n n nn n nn
cocos2dx 3.15 自动创建精灵多边形钢体
主要用到这两个函数rnrnrnrn取精灵的顶点信息 : AutoPolygon::generatePolygon();rnrnrn创建多边形钢体 : PhysicsBody::createPolygon();rnrnrn 因为第一个函数取出来的信息不能直接作为第二个函数的参数,所以自己重新创建了Vec2数组,然后把获取的顶点信息里面的 顶点重新赋值给Vec2数组,而且实际测试中物理刚体会偏移,自己
特殊的象形柱图echarts
效果图nnhtmln&lt;!DOCTYPE html&gt;n&lt;html&gt;n&lt;head&gt;n &lt;meta charset="UTF-8"&gt;n &lt;title&gt;特殊---柱图&lt;/title&gt;n &lt;link rel="stylesheet" type="text/css" href="css/css-reset.css"/&gt;n &l...
4.Libgdx扩展学习之Box2D_创建多边形刚体和圆角矩形
主要是根据这2篇博客来写的 n 1. http://bbs.9ria.com/thread-136661-1-1.html n 2. http://bbs.9ria.com/thread-136794-1-1.htmln前面的博客主要介绍了Box2D的主要概念,让我们熟悉了Box2D的主要框架。但是在现实生活中我们的遇到的物体时各种各样的,需要创造更复杂的刚体。 n下面主要介绍
关于使用echarts心得,及其注意事项
rn第一步导入jquery、echarts的包rn代码如下:rnrn&amp;amp;lt;script src=&amp;quot;static/scripts/jquery/echarts.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;rn&amp;amp;lt;script src=&amp;quot;static/scripts/jquery/jquery-1.4.4.min.js&amp;quot;&amp;amp;gt;&amp;a
中英文对应世界180多个国家的json数据,我拿来做echarts的世界地图用了
中文和英文户对的json数据,包含180多个国家!希望对您们有用
echarts地图全国省份js资源
echarts地图全国省份js文件,可以直接引用,注意,这个是js文件,需要json文件的请下载我上传的其他资源
ECharts雷达图(详细示例——附有具体注释)
雷达图图表效果如下:具体代码如下:&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html&amp;gt;n &amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;n &amp;lt;title&amp;gt;雷达图案例&amp;lt;/title&amp;gt;n &amp;lt;!-- 引入 ECharts 文件 --&amp;gt;n &amp;lt;script src=&quot;
多边形的区域填充
有多边形的绘制,还有鼠标命令,有关于多边形的区域填充。
湖南区县GEOJSON文件。部分地市的市区已合并。方便县和市做展示
湖南区县GEOJSON文件。部分地市的市区已合并。方便县和市做展示
Echarts数据可视化tooltip提示框,开发全解+完美注释
tooltip ={ //提示框组件n trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。n triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mous
echarts折线图例子
&amp;amp;lt;template&amp;amp;gt;n &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt;n &amp;amp;lt;div ref=&amp;quot;myChart&amp;quot; class=&amp;quot;classChart&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;n &amp;amp;lt;/div&amp;amp;gt;
计算机图形学
关于多边形的裁剪的算法
创建多边形
<p>n <span style="font-size:16px;">本课程详细讲述Maya的日常用法。让你能够快速上手,制作出自己想要的模型。</span>n</p>n<p>n <span style="font-size:16px;">每个课程都有配套实操案例。</span>n</p>n<p>n <span style="font-size:16px;">让学员花最少的时间学习到最实在的干货。</span>n</p>
cocos2dx 3.x版本多边形刚体
//多边形的点:nPoint verts1[] = {n Point(-146.5f, 155.1f),n Point(-146.5f, -87.6f),n Point(-140.9f, -88.1f),n Point(-140.8f, 155.5f),n Point(162.8f, 154.6f),n Point
echarts-amap.min.js echarts针对高德地图的amap方法
echarts针对高德地图所使用的amap方法,用于echarts的地图创建
Echarts中BMapAPI地图绘制功能(BMapExt)的实现步骤
Echarts中BMapAPI地图绘制功能(BMapExt)的实现步骤nn文章转载于:http://echarts.baidu.com/extension/BMap/doc/doc.htmlnn简介nnBMapExt是在Echarts基础上使用百度地图API进行地图绘制,使用的时候除了需要Echarts的相关知识外,还需要对百度地图API(官网)有所了解nn实例方法nnnnn名称nn参数nn描述
js调用百度地图接口绘制任意多边形并获取每个点的经纬度
都是一些百度地图的API接口,没有什么特殊说明的直接上代码,这个页面全部贴出来,如果需要测试,可以全部copy,然后研究。主要有一些js文件是联网下载,所以必须在有网了的情况下再去运行nnnnnn n n n body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}n #allmap {width: 100%; hei
Arcgis---绘制多边形
以三角形为例 // azimuth:方位角n // circRadius:半径n // x, y:圆心n public void DrawTriangle(double azimuth, double circRadius, double x, double y)n {n double Direction =
servlet创建增删该查和servlet实现echarts多条折线图
servlet创建增删该查和servlet实现echarts多条折线图 servlet echarts。
关于使用ECharts时注意的问题
在ie8运行echarts时会报错导致图表,无法显示。但切换到ie11或者谷歌火狐的时候又是正常的。真正的原因还是自己不够严谨。例如在这里去掉多余,即可。
opencv从多边形创建mask
经常需要对图像的某一部分进行操作,这就牵涉到怎么遍历这一部分,最直接的方法就是创建一个mask图像,目标区域为255,非目标区域为0。这里主要介绍一种从多边形创建mask的方法。下面上代码:rnrnrn/*n* create_mask.cppn*n* Author:n* Siddharth Kherada n*n* This tutorial demonstrates how to make ma
Unity3D动态生成多边形
首先在Unity中创建一个物体,并为它添加我们渲染网格需要的组件.nMeshFilter组件用于获取网格信息,我们生成的网格就需要添加到MeshFilter.MeshRenderer用于渲染网格,在这里使用默认的材质来演示.要生成一个多边形,我们应该要有多边形的顶点数组.现在开始定义我们的变量n //顶点数组n public Vector3[] Vertexes;n //网格过滤器
PostGIS教程十四:几何图形创建函数
目录nn一、ST_Centroid / ST_PointOnSurfacenn二、ST_Buffernn三、ST_Intersectionnn四、ST_Unionnn五、函数列表nn 目前我们看到的所有函数都可以处理已有的几何图形并返回结果:nn分析几何图形(ST_Length(geometry), ST_Area(geometry))n 几何图形的序列化(ST_AsText(geometr...
利用Echarts制作地图(一)
从本篇开始,将用三篇文章说明如何利用Echarts制作自定义区域的单图例、多图例及动态加载地图所需数据。n文本作为开篇,将简单介绍如何利用echarts制作地图。
DispatchAction实例
struts中的DispatchAction应用实例
echarts世界各个国家多边形json
此资源是echarts展示国家地图的多边形文件,该文件包括世界各个国家的json文件,只要在官网上下载echarts的例子,将地图的json文件引入进去,既可展示想要展示的国家地图。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 关于大数据培训 关于云计算