关于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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何利用echarts3绘制梯形波图
一、需求分析 每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库。不过由于需要,这次的需要实现的效果如下: 1.实现一个梯形图(每个数据组对应一个梯形); 2.自定义echarts的右键功能,增加选项可以直接对数据项进行额外的操作; 二、思路及实现 2.1 自定义echarts的鼠标右键事件 我们知道一般在浏览器中鼠标右键点击都有自定义的事件 那么...
echarts自定义地图(想怎么画就怎么画)
echarts自定义地图,各区地图,街道地图,区县地图,详细地图,省市地图
用echarts在百度地图bmap自定义形状
用echarts在百度地图bmap自定义形状 创建html文件 引入百度地图API、Echarts、以及echarts的百度地图插件BMap echarts和bmap可以到官网去下载, 这里的路径是本地的 &amp;lt;script src=&quot;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=g3Ufu6jCRS2TNcCwsn5E3gZP&quot;&amp;gt;&amp;lt;...
echarts-的一些常规图形显示一
前言:echarts的一些常规图形显示 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot
百度地图画多边形代码
百度地图画多边形代码<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
OpenLayers官方示例详解九自定义多边形样式(Custom Polygon Styles)
目录 一、示例简介 二、代码详解 一、示例简介     这个示例演示怎样为多边形要素创建自定义的样式。     在这个示例中,将为多边形创建两种不同的样式: 第一个样式是多边形的整体样式 第二个样式是为多边形的各个顶点创建的样式 二、代码详解 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;m...
(GIS可视化)蜂窝多边形密度图
(GIS可视化)蜂窝多边形密度图
Echarts中BMapAPI地图绘制功能(BMapExt)的实现步骤
Echarts中BMapAPI地图绘制功能(BMapExt)的实现步骤 文章转载于:http://echarts.baidu.com/extension/BMap/doc/doc.html 简介 BMapExt是在Echarts基础上使用百度地图API进行地图绘制,使用的时候除了需要Echarts的相关知识外,还需要对百度地图API(官网)有所了解 实例方法 名称 参数 描述
生成的Polyline这样示例拓扑
//生成的Polyline要这样加点,ITopologicalOperator拓扑操作才正常,如果使用IPointCollection很有可能是COM错误 IPoint pt1 = new PointClass(); pt1.PutCoords(0, 100); IPoint pt2 = new Poi...
自定义echarts图形的提示格式
自定义echarts图形鼠标放上去数据的显示格式,formatter自定义回调函数
特殊的象形柱图echarts
效果图 html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;特殊---柱图&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/css-reset.css"/&gt; &l...
Echarts数据可视化tooltip提示框,开发全解+完美注释
tooltip ={ //提示框组件 trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mous
全国地图geoJson数据,可结合echarts使用,附带使用示例
自己用的echarts 3,需要扩展地图,从其他地方收集来的,然后自定义拓展 包含全国地图,各省各市各县,如果还需要更细,你就需要自己想办法了
全国和世界echarts json数据
全国和世界echarts json数据 bmap.min.js;china.js;countUp.min.js;world.js
cocos2dx 3.15 自动创建精灵多边形钢体
主要用到这两个函数 取精灵的顶点信息 : AutoPolygon::generatePolygon(); 创建多边形钢体 : PhysicsBody::createPolygon();  因为第一个函数取出来的信息不能直接作为第二个函数的参数,所以自己重新创建了Vec2数组,然后把获取的顶点信息里面的 顶点重新赋值给Vec2数组,而且实际测试中物理刚体会偏移,自己
ECharts的geojson地图数据下载(全国地图json、各省、市、区json)有demo
ECharts的geojson地图数据下载(全国地图json、各省、市、区json)有demo
4.Libgdx扩展学习之Box2D_创建多边形刚体和圆角矩形
主要是根据这2篇博客来写的 1. http://bbs.9ria.com/thread-136661-1-1.html 2. http://bbs.9ria.com/thread-136794-1-1.html 前面的博客主要介绍了Box2D的主要概念,让我们熟悉了Box2D的主要框架。但是在现实生活中我们的遇到的物体时各种各样的,需要创造更复杂的刚体。 下面主要介绍
中英文对应世界180多个国家的json数据,我拿来做echarts的世界地图用了
中文和英文户对的json数据,包含180多个国家!希望对您们有用
关于使用echarts心得,及其注意事项
第一步导入jquery、echarts的包 代码如下: &amp;amp;lt;script src=&amp;quot;static/scripts/jquery/echarts.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;static/scripts/jquery/jquery-1.4.4.min.js&amp;quot;&amp;amp;gt;&amp;a
echarts地图全国省份js资源
echarts地图全国省份js文件,可以直接引用,注意,这个是js文件,需要json文件的请下载我上传的其他资源
有关于echarts的一些东西
之前一直想着如何在网页上面显示折线图,知道java有AWT和Swing,但是总觉的用哪种方法比较麻烦,而且我也没有自信自己已有的java只是,能够做到。但是最近做的项目必须得在网页上显示折线图,所以就不得不逼得我往前走。之前或许还有不做的余地,但是最近不信了。 所以就直接在网页上搜索,发现有个Echarts,然后查看了Echarts的主页,找了些例子,在自己的代码里面写,发现出现了很多问题。之后
用echarts绘制地图
用echarts绘制地图需要引入china.js 实例代码如下: drawAdMap(); function drawAdMap() { // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main'))
Echarts数据可视化地理坐标系geo,开发全解+完美注释
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
cocos2dx 3.x版本多边形刚体
//多边形的点: Point verts1[] = { Point(-146.5f, 155.1f), Point(-146.5f, -87.6f), Point(-140.9f, -88.1f), Point(-140.8f, 155.5f), Point(162.8f, 154.6f), Point
Unity3D动态生成多边形
首先在Unity中创建一个物体,并为它添加我们渲染网格需要的组件. MeshFilter组件用于获取网格信息,我们生成的网格就需要添加到MeshFilter.MeshRenderer用于渲染网格,在这里使用默认的材质来演示.要生成一个多边形,我们应该要有多边形的顶点数组.现在开始定义我们的变量 //顶点数组 public Vector3[] Vertexes; //网格过滤器
opencv从多边形创建mask
经常需要对图像的某一部分进行操作,这就牵涉到怎么遍历这一部分,最直接的方法就是创建一个mask图像,目标区域为255,非目标区域为0。这里主要介绍一种从多边形创建mask的方法。下面上代码: /* * create_mask.cpp * * Author: * Siddharth Kherada * * This tutorial demonstrates how to make ma
echarts-amap.min.js
echarts针对高德地图所使用的amap方法,用于echarts地图创建
echarts-amap.min.js echarts针对高德地图的amap方法
echarts针对高德地图所使用的amap方法,用于echarts的地图创建
多边形的区域填充
有多边形的绘制,还有鼠标命令,有关于多边形的区域填充。
创建多边形
<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>
servlet创建增删该查和servlet实现echarts多条折线图
servlet创建增删该查和servlet实现echarts多条折线图 servlet echarts。
计算机图形学
关于多边形的裁剪的算法
高德地图添加多边形围栏
// 定义多边形的5个点点坐标 LatLng latLng1 = new LatLng(28.234259,112.879588); LatLng latLng2 = new LatLng(28.226905,112.879266); LatLng latLng3 = new LatLng(28.226735,112.883751); ...
百度echarts折线图美化 填充颜色,电波~,分类圆点
 &amp;lt;!-- 为ECharts准备一个具备大小(宽高)的Dom --&amp;gt;     &amp;lt;div id=&quot;main&quot;&amp;gt;&amp;lt;/div&amp;gt;     &amp;lt;!-- 引入 ECharts 文件 --&amp;gt;     &amp;lt;script src=&quot;plug-in/eCharts/echarts.js&quot;&amp;gt;&amp;lt;/script&amp;gt;     &am
echarts地图扩展案例(云南地图面积)
echarts地图扩展案例,根据echarts官网上面香港人口地图扩展做参考做的,地图json数据已经上传
echarts世界各个国家多边形json
此资源是echarts展示国家地图的多边形文件,该文件包括世界各个国家的json文件,只要在官网上下载echarts的例子,将地图的json文件引入进去,既可展示想要展示的国家地图。
echarts的简单使用案例-柱形图
ECharts官方网站:http://echarts.baidu.com/ 1.首先下载echarts工具包,可以在官网下载,图中为下载后的echarts工具包的目录结构。 2.测试echarts,新建文件夹test,将echarts-1.4.1\doc\example\www\下的js拷贝到test下,并新建test.html文件。 3.编辑test.html文件。首先导入ec
echarts中自定义legend图例文字
https://blog.csdn.net/ypjmfc/article/details/78979319 代码是在参考文章基础上修改的: var data = [ {value:40, name:'货币'}, {value:20, name:'股票'}, {value:40, name:'债券'} ...
关于使用ECharts时注意的问题
在ie8运行echarts时会报错导致图表,无法显示。但切换到ie11或者谷歌火狐的时候又是正常的。真正的原因还是自己不够严谨。例如在这里去掉多余,即可。
最新整理echarts全国地图(包含省、市、县区),亲测可用。
将文件解压,直接放入到tomcat下,启动tomcat,可以在浏览器中访问,自带展示效果。