关于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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
创建多边形
<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>
echarts世界各个国家多边形json
此资源是echarts展示国家地图的多边形文件,该文件包括世界各个国家的json文件,只要在官网上下载echarts的例子,将地图的json文件引入进去,既可展示想要展示的国家地图。
3.2.5-创建多边形
初级学习Ai设计软件,重点讲解Ai常用工具的使用方法和知识要点。
iOS多边形按键的创建
前几天项目需要,要做一个楼盘或者户型图的原生交互页面, 不清楚有没有更简单直白又高级的方法,我第一个想到的是创建一堆 多边形按钮。 所以我们就需要一个抽象的类,可以由贝赛尔曲线创建按键,是UIButton的子类 内容如下,如果大家有好的方案,请不吝赐教:  按键抽象类头文件: 按键抽象类实现文件 在viewController中创建并使用这个按键类: 按键的大小,根据创
Echarts创建动态图表
   偶然的机会,发现echarts可以制作比较精美的图表,进而小小学习了一下,也算知道了一些基本的常识,现与大家进行分享。         ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生...
echarts饼状图的创建
1、先上代码 第一步,使用echarts对div进行初始化。 var hydrangeaClick = echarts.init(document.getElementById('hydrangeaClick')); 第二步,设置标题,图例 hydrangeaClick.setOption({ title:{ text:'点击抛绣球次数'//标题 }, t
关于echarts
从后台传值过来list,用来显示xy轴的值,但是它是这样显示的[img=https://img-bbs.csdn.net/upload/201610/25/1477378269_761101.png][/img]数据视图是这样的[img=https://img-bbs.csdn.net/upload/201610/25/1477378298_231954.png][/img] 怎么办啊,急急急!!!!!!!!
创建一个多边形Active控件
一、 课程设计目的 1、 了解Windows编程的基础知识,掌握控件的基础知识。 2、 控件是对数据和方法的封装,通过课程设计了解控件的应用及创建. 3、 掌握VC++开发应用程序的一般步骤和方法。 4、 通过课程设计,实际掌握面对对象的程序设计方法,了解C++面向对象的设计方法和技巧,有效地、深刻地理解课程设计内容,体会理论、方法和设计的原则;培养分析实际问题和解决问题的能力,具备使用面向对象程序设计开发工具设计实际系统的能力 二、 课程设计内容与要求 创建一个多边形ActiveX控件(并设计一个使用该控件的应用程序)。 实现了一个ActiveX控件,它在一个圆内部有个正多边形,当用户在多变形内部单击将会使多边形的边数在当前的基础上+1,在多变形外部单击将会使多边形的边数在当前的基础上-1,并能改变多边形的颜色,还可以输入边数来改变多边形的边数,并编辑了一个程序,是控件可以在应用程序中使用。 三、 系统分析与设计 1、系统分析 Active控件是由 Microsoft 基础类库 (MFC) 提供的其他控件类(以前称为 OLE 控件),可以在 Windows 应用程序的对话框中使用,或在万维网的 HTML 页中使用,本次创建的Active控件主要是在其上显示一个圆其内部有多边形,并通过一系列操作更改其边数和颜色。 为控件添加属性并为应用此控件添加方法,使其觉有相对的稳定性,便于移植。 (1)信息:计算并记录鼠标输入的坐标,判断其属于圆内还是圆外,并做出相应的动作,更改多边形的边数及颜色。 (2)行为:当用户在多变形内部单击将会使多边形的边数在当前的基础上+1,在多变形外部单击将会使多边形的边数在当前的基础上-1,并能改变多边形的颜色 (3)表示: IPolyCtl是包含定制的方法和属性的接口,_IPolyCtlEvents接口是一个内部接口,建立各变量与接口之间的连接。
opencv从多边形创建mask
经常需要对图像的某一部分进行操作,这就牵涉到怎么遍历这一部分,最直接的方法就是创建一个mask图像,目标区域为255,非目标区域为0。这里主要介绍一种从多边形创建mask的方法。下面上代码: /* * create_mask.cpp * * Author: * Siddharth Kherada * * This tutorial demonstrates how to make ma
canvaspolygon使用CanvasAPI创建多边形
canvas-polygon 使用Canvas API创建多边形
Echarts java自定义标签创建图表
  GitHub地址:https://git.oschina.net/duhongming/echarts2javatag 为了让图表创建的更加简单,更加符合java的语义,开发了一套自定义标签来快速开发图表,该图表已经用到本公司的很多项目中。 1. 引用jar包说明   1)静态图表只依赖下面两个包,Echarts2.2.7是Echarts2的最终版本,也是最好用的。Echart...
echarts框架创建各种图表
主要是设置各种样式 normal为正常显示,emphasis为高亮状态下的显示 label是显示的文字等信息 labelline是连接提示框的飞线 color用来设置颜色,对于字体可以在label里面的textStyle中单独设置 var showValueStyle = { normal: {
vue-cli 使用echarts创建图表
1.安装echarts依赖 npm install echarts -S 2.全局引入—(在main.js中) import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.xxx.vue  &amp;lt;div id=&quot;myChart&quot; :style=&quot;{width: '300px', height: '300px...
关于多边形填充的问题
在做一个矢量图绘制的工作,环境vc6.0 +单文档。遇到如下图所示的一个图形。rn[img=http://hi.csdn.net/attachment/201012/16/7745_12924678649lOq.jpg][/img]rn已知的参数有大圆的圆心和半径,中空矩形的四个顶点,小圆的圆心和半径。如何构成图中红色部分的多边形并进行有效填充?
关于多边形填充问题
在一幅图上怎样作才能将一个凸多边形以外的部分填充绿色,而显示多边形内部的图像呢?
OpenGL-入门-关于多边形
在二维的面,从三维的角度来看,是具有两个面的。一般约定为“顶点以逆时针顺序出现在屏幕上的面”为“正面”,另一个面即成为“反面”。 每一个面都可以设置不同的绘制方式:填充、只绘制边缘轮廓线、只绘制顶点 , 其中“填充”是默认的方式。可以为两个面分别设置不同的方式。 glPolygonMode(GL_FRONT, GL_FILL); // 设置正面为填充方式 glPolygonMo...
关于多边形的分解
给定一个任意顺序(顺或者逆时针)且不自相交的多边形的点序列,怎么样判断他是顺时针的还是逆时针的?怎么样把它分解为独立的三角形(最好不要加增顶点)。哪位高手懂。
关于给多边形填色
我在picturebox控件中作了一个坐标系,并在里面画了一曲线,再用平行于X轴的直线在它上面划出若干封闭区域,现在要给这些封闭区域填上颜色,我用了一些函数,可是函数中的坐标是由左上为原点的,而且参数是LONG型的,而我的坐标系是自己定义的,曲线的数据有SINGLE型的,所以不能完成填充.望各位大虾赐教!!!!!! 另外,请各位留下联系方法,好实时请教!1rn
关于多边形分割的算法
给定一个多边形,然後任意画一条线,用这条线段来分割多边形,并且将分割后较大的部分(面积较大)的保留,其余部分删除,此后可以再画别的线段对剩下的部分来进行分割,请教算法。最好能给出实例代码,多谢!rn
关于填充多边形
有谁有Nokia库com/nokia/mid/ui/DirectGraphics中rnfillPolygon(int[] intArray, int int1, int[] intArray2, int int3, int int4, int int5)方法?rn我尝试到库中反编译,发现库中的是一个抽象方法:(找不到代码rn有哪位达人知道的,指点下
关于多边形的命令
不知道AutoCAD里面有没有函数判断多边形是否交叉?rn就是那种特别不规则的多边形rnrn------rn\ /rn \ /rn \/rn /\rn / \rn/____\ rnrn如图rnrnrn如果没有,各位怎样判断所绘多边形是否交叉呢?rnrn谢谢
关于拆分多边形
如何将一个多边形(凹多边形或凸多边形)拆成多个三角型,计算其面积阿?
关于多边形填充的问题!!!
我现在完成了对一幅图象轮廓的提取,轮廓是用Polygon函数描绘的,现在我想rn把这个多边形的内部用绿色填充,这幅图象是256色的BMP图象,应该怎么样办呢?请大虾指教!!!
多边形关于直线对称
用MFC画多边形关于直线对称,计算机图形学里的实验
关于画多边形的虚线框
画矩形的虚线框可以用DrawFocusRect,多边形改怎么办?
关于画多边形的问题?
手动试过用move to (x,y),line to(x1,y1)...lineto(xn,yn)的方法画出的封闭多边形,发现不能够填充,是不是这样啊?察看msn用:BOOL CreatePolygonRgn( LPPOINT lpPoints, int nCount, int nMode )可来画多边形,哪位有编制任意多边形(填充)的经验?可不可以说说用法?pls help!
关于box2D多边形形状
用过cocos2d的朋友大家一定都知道box2D这么一个物理引擎。用过box2D的同学也一定知道box2D中有一个物体形状的东西。下边大家听我说一下这个box2D中形状相关的一点东西吧。 麻烦想转载的朋友注明一下转载的出处:http://fengmm521.blog.163.com/blog/static/25091358201322445347106/ box2D在使用之前都要先建一个世界对
多边形填充多边形填充
计算机图形学的经典 学图形学的必看 不然后悔
多边形问题~~~~~~~~~~~~~~多边形问题~~~~~~~~~~~~~~~~~~
只给出多边形的边数rn然后让程序自动划出正多边形rn请帮忙写出程序或点名思路~!rn
多边形扫描线填充多边形
计算机图形学基础程序,绘制多边形扫描线填充
点与多边形的关系(在多边形内,在多边形上,在多边形外)
C语言写的画多边形的程序,及判断点在多边形内外的代码(在多边形内,在多边形上,在多边形外)。 调用了图形驱动程序画图。
mui 关于echarts 的使用
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;ECahrt 示例&amp;lt;/title&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, ini
关于Echarts,急急急!
[img=https://img-bbs.csdn.net/upload/201612/15/1481791292_921785.png][/img]怎么实现图例旁边统计个数啊?
关于echarts 图标的 demo
eCharts个人感觉是个不错的报表插件,前几天公司需要然后我就看了下,由
Echarts关于仪表盘
Echarts关于仪表盘 先来无事,特制作不一样的图标一发,把仪表盘做成百分条,我也是醉了 <div id="main" style="width: 400px;height: 300px;"></div> <script> var myChart = echarts.init(document.getElementById("main"));
关于Echarts的操作
1,首先声明,一下的操作基本上都是基于3.0以上的版本 2,去Echarts官网上下载所需要的原材料:Echarts的js文件,以及可能会用的Map的js或json文件,然后放入项目中,在对应的jsp或html中引入 然后需要创建一个div,用于承载将来的报表图片 例如: 3,对于非地图一类的报表文件操作基本如下 var mychar = echarts.init(document.ge
关于echarts的dataZoom组装
dataZoom: [ { type: 'slider', show: true, xAxisIndex: [0], handleSize: 20,//滑动条的 左右2个滑动条的大小 height: 8,//组件高度
关于echarts学习
echarts学习
关于echarts使用
如何改变echarts的视图达到自己想要的效果! 1.改变折线弧度 2.改变折点处图形展示 3.改变视图X Y轴宽度 4.改变折线区间背景渐变色 5.............................. code如下-----------------------------------------------------------------------------------
关于echarts折线图
最近在写一个关于折线图的问题,后台和前端写出来以后一直调用不到,找错误也没发现问题出在哪了,各位大大帮忙看一下rn这是action层调的servicern[code=java]rnpublic String showOracleLine(Oracle oracle)rn rn int length=oracleService.getOracleNumList().size();rn Map id = oracleService.getOracleInfo(oracle.getOracleId());rn Map state = oracleService.getOracleInfo(oracle.getState());rn System.out.println(oracle.getOracleId());rn JSONArray json = JSONArray.fromObject(id);rn json.add(state);rn json.add(length);rnrn result = json.toString();rn return SUCCESS;rn rn[/code]rnStruts配置文件rn[code=java]rnrn rn resultrn rn rn[/code]rn前端写了一个divrn[code=java]rn rn rn rn rn rn rn rn rn[/code]rnjsrn[code=javascript]rnrnfunction showLine() rn var action = "$pageContext.request.contextPath/json_oracle_showOracleLine.action";rn var loadAChart = echarts.init(document.getElementById("showLine"));rn var option = rn title : rn text : '数据库信息'rn ,rn // 鼠标悬停信息rn tooltip : rn trigger : 'axis'rn ,rn // 工具箱rn toolbox : rn left : 'right',rn restore : ,rn ,rn // 图例rn legend : rn data : [],rn textStyle : rn fontSize : 14,rn fontWeight : 'bolder',rn color : '#fff'rn rn ,rn // 直角坐标系内绘网格rn grid : rn containLabel : true,rn right : 20,rn left : 20rn ,rn xAxis : rn type : 'category',rn splitLine : rn show : falsern ,rn data : [],rn // 坐标轴轴线设置rn axisLine : rn lineStyle : rn color : 'white',rn type : 'solid',rn width : 1rn rn ,rn // 坐标轴刻度rn axisTick : rn show : true,rn interval : 'auto',rn length : 5,rn lineStyle : rn color : 'white',rn width : 2,rn rn ,rn ,rn yAxis : rn type : 'value',rn splitNumber : 2,rn // 坐标轴轴线设置rn axisLine : rn show : false,rn lineStyle : rn color : 'white',rn type : 'solid',rn width : 1rn rn ,rn // 坐标轴文本标签rn axisLabel : rn textStyle : rn color : "white",rn fontSize : 12rn rn ,rn ,rn// series : rn// type : 'line'rn// ,rn ;rn loadAChart.showLoading();rn loadAChart.setOption(option);rn loadAChart.resize();rn $.ajax(rn type: "POST",rn url: action,rn contentType: "application/x-www-form-urlencoded; charset=utf-8",rn data: $('#lineForm').serialize(),rn dataType : "json",rn success: function(data)rn var ret = eval('(' + data + ')');rn $("#showLine").show();rn var option = rn xAxis : rn type : 'category',rn data : ret.id,rn boundaryGap:falsern ,rn yAxis : rn type : 'category',rn data : ret.state,rn boundaryGap:falsern ,rn series : [rn rn name : '数据库信息',rn type : 'line',rn data : ret.data,rn smooth: true,rn lineStyle:rn normal:rn color:'#fb6f51'rn rn rn rn ]rn ;rn loadAChart.hideLoading();rn loadAChart.setOption(option);rn loadAChart.resize();rn rn )rnrn[/code]
相关热词 c# 线程顺序 c#昨天当前时间 c# 多进程 锁 c#mysql图片存取 c# ocx 委托事件 c# 读取类的属性和值 c# out 使用限制 c#获取url的id c#怎么进行分页查询 c# update 集合