精华内容
参与话题
问答
  • echarts内通过zrender添加文字,图形等

    万次阅读 热门讨论 2017-05-31 19:30:10
    ... 需求概述:在环形饼状图中间添加一个固定的文字显示。...最开始的思路还是通过echarts提供现有的图表实现,其实就是在饼状图的中间添加一个单项data的饼图,效果就是一个实心圆型图,然后把label的位置设置...

    https://my.oschina.net/u/2609444/blog/708387


     需求概述:在环形饼状图中间添加一个固定的文字显示。

    最开始的思路还是通过echarts提供现有的图表实现,其实就是在饼状图的中间添加一个单项data的饼图,效果就是一个实心圆型图,然后把label的位置设置成inner,效果如下:

    这样实现的代码如下(option代码):

    option = {
          legend: {
              orient: 'vertical',
              x: 'left',
              data:['政治风险','廉政风险','渎职风险','绩效风险']
          },
          series: [
              {
                  name:'风险预警',
                  type:'pie',
                  selectedMode: 'single',
                  radius: [0, '30%'],

                  label: {
                      normal: {
                        position : 'inner',
                        distance : 0.1
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
                  data:[
                      {value:25, name:'集团重大风险'}
                  ]
              },
              {
                  name:'访问来源',
                  type:'pie',
                  radius: ['30%', '55%'],
                 
                  data:[
                      {value:25, name:'政治风险'},
                      {value:25, name:'廉政风险'},
                      {value:25, name:'渎职风险'},
                      {value:25, name:'绩效风险'}
                  ]
              }
          ]
      };

    但这样实现有很多问题,中间是一个饼图还是感觉很怪,而且标签的位置没办法调,文档中有记录distance属性是标签到圆心的距离和半径的比,但我怎么改都不起作用。

    于是还要另想办法,在网上看到一个相关类似的问题,解决思路是用zrender添加shape图形。

    所以第一步想如何获取zrender对象:

    在网上看有这样的代码

    var myChart = echarts.init(document.getElementById('riskInfo'));

    var _zr = myChart.getZrender();

    自己试了试发现不好用,原来echarts3已经改成了myChart.getZr();

    改下自己的代码果然好用了,获取到了zrender对象。

    第二步如何通过zrender添加图形呢:

    同样在网上搜到了addShape这个方法,但仍然还是不好用,一定是echarts3又有改动

    所以我们还是要先了解一下这个对象,用下面的代码来看看这个对象都提供了哪些方法

    function ShowObjProperty(Obj)
    {
    var PropertyList='';
    var PropertyCount=0;
    for(i in Obj){
    if(Obj.i !=null)
    PropertyList=PropertyList+i+'属性:'+Obj.i+'\r\n';
    else
    PropertyList=PropertyList+i+'方法\r\n';
    }
    alert(PropertyList);
    }

    其中参数obj就是我们要查看的对象,也就是把zrender对象传进来就可以了,跑起来输出如下图:

    可以看到还是有很多方法的,其中的确没有addShape,但是有个add,所以猜测一定是这个add方法。

    这个add方法要如何用呢,没办法还是看看源码吧:

    /**
              * 添加元素
              * @param  {module:zrender/Element} el
              */
             add: function (el) {
                 this.storage.addRoot(el);
                 this._needsRefresh = true;
             }

    cover.add(new graphic.Rect({
                 name: 'main',
                 style: makeStyle(brushOption),
                 silent: true,
                 draggable: true,
                 cursor: 'move',
                 drift: curry(doDrift, controller, cover, 'nswe'),
                 ondragend: curry(trigger, controller, {isEnd: true})
             }));

    这两段代码差不多就是add的定义和应用,参数传入大概就是zrender的图形,正和我们的需求一致,所以仿照源码,改一下我们的代码,这里再说一下其中的graphic,在源码中我们可以找到它的定义,echarts引入了很多内容,其中就有这两项

    var graphic = __webpack_require__(43);

    var zrender = __webpack_require__(81);

    不管是怎么引入的,我们现在可以确定通过graphic可以创建一个可添加的图形,echarts3中不再需要require方式去使用这些库,标签方式引入echarts后,可以直接通过命名空间来使用,所以我们的代码做如下调整:

    var myChart = echarts.init(document.getElementById('riskInfo'));
     var _zr = myChart.getZr();
     ShowObjProperty(_zr);
        _zr.add(new echarts.graphic.Text({
         style: {            
       x: _zr.getWidth() / 2,
       y: _zr.getHeight() / 2,
       color: '#666', 
       text: '集团重大风险',
       textAlign: 'center', 
       textFont : 'bold 20px verdana'
       }}  
        ));
     option = {
          legend: {
              orient: 'vertical',
              x: 'left',
              data:['政治风险','廉政风险','渎职风险','绩效风险']
          },
          series: [
              {
                  name:'访问来源',
                  type:'pie',
                  radius: ['30%', '55%'],
                 
                  data:[
                      {value:25, name:'政治风险'},
                      {value:25, name:'廉政风险'},
                      {value:25, name:'渎职风险'},
                      {value:25, name:'绩效风险'}
                  ]
              }
          ]
      };
     myChart.setOption(option);

    运行后效果如图:

    啊……终于成功了,程序猿的欣喜,,,,你懂的


    展开全文
  • Echarts设置点击事件

    万次阅读 2018-09-15 11:21:25
    通常在使用Echarts画图之后会碰到一个需求,通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转,当我遇到这个需求第一就想到了用on... 代码如下: myChart.on('click',function(params){ con...

    通常在使用Echarts画图之后会碰到一个需求,通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转,当我遇到这个需求第一就想到了用on绑定点击事件的方法,然后就在代码上进行尝试,果然可以实现这个功能,我在这块展示的是一个柱状图,通过点击事件输出一下获取的参数可以得到什么结果呢?
    代码如下:

    myChart.on('click',function(params){
    	console.log(params);
    });
    

    我们通过点击柱状图的每一项可以看到输出了如下对应项的详细信息:
    这里写图片描述
    在这块我点击了8月份降水量,可以看到这块输出了,这一栏所对应的信息,包括名称seriesName:降水量,以及data值182.2,还以一些其他的信息,同样点击其他的也可以输出对应信息,这样我们就可以进行点击跳转并且传递对应的参数就ok了,这也是我首先想到的方法。


    但是这个方法有一个不友好的地方就是只有用户点击到柱状图上它才会触发到这个点击事件,比如图中的一月份对应的数值就特别小,点击那一列的其他位置是没有作用的,只有点击阴影部分才触发,只一点对于用户来说就非常不友好,因此我找到了另外一种方法实现这个需求,通过点击所在值的这一列就会触发,实现代码如下:

    myChart.getZr().on('click',function(params){
    	let point=[params.offsetX,params.offsetY];
    	if(myChart.containPixel('grid',point)){
    		let xIndex=myChart.convertFromPixel({seriesIndex:0},
                  point)[1];
    	    let op=myChart.getOption();
    	    let name=op.xAxis[0].data[xIndex];
    	}
    })
    

    这部分的代码可以实现点击某一列就能触发这个事件,主要的信息集中在op这个变量中,name变量是点击某一列对应的名称,使用时可以将这个变量打印出来然后选择所需要传递的参数,其实这个代码是通过鼠标点击图形的坐标来进行判断点击的位置属于哪一列,从而实现这个需求,在这块我在写的时候碰到一个问题,有一个图形点击一次总是触发两次这个函数,如果你也出现了这个问题可以通过在绑定事件之前加上一句代码。

    myChart.getZr().off('click');
    
    展开全文
  • 1. JPBC简介 Java Pairing-Based Cryptography Library 对PBC库(C语言)的Java封装 常用于基于配对的密码学算法仿真(身份基加密、属性基加密等) 2. JPBC环境 JPBC: ...IntelliJ IDEA: h

    视频地址:https://www.bilibili.com/video/BV1o5411Y77r/

    1. JPBC简介

    Java Pairing-Based Cryptography Library
    对PBC库(C语言)的Java封装
    常用于基于配对的密码学算法仿真(身份基加密、属性基加密等)

    2. JPBC环境

    JPBC: http://gas.dia.unisa.it/projects/jpbc/download.html
    JDK: https://www.oracle.com/java/technologies/javase-jdk14-downloads.html
    IntelliJ IDEA: https://www.jetbrains.com/idea/download/#section=windows

    Eclipse: https://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/2020-06/R/eclipse-java-2020-06-R-win32-x86_64.zip

    3. JPBC使用

    3.1 基本使用

    • 创建项目,添加jar包依赖
    • 引用库 (import,部分IDE支持自动导入)
    • 生成Ppairing实例(从文件导入或者自选参数生成)
    • 验证双线性 e(ga,gb)=e(g,g)abe(g^a,g^b) = e(g,g)^{ab}

    测试代码

        // 一、基于特定椭圆曲线类型生成Pairing实例
        // 1.从文件导入椭圆曲线参数
        Pairing bp = PairingFactory.getPairing("a.properties");
    
        // 2.自定义曲线参数
        // int rBits = 160;
        // int qBits = 512;
        // TypeACurveGenerator pg = new TypeACurveGenerator(rBits, qBits);
        // PairingParameters pp = pg.generate();
        // Pairing bp = PairingFactory.getPairing(pp);
    
        // 二、选择群上的元素
        Field G1 = bp.getG1();
        Field Zr = bp.getZr();
        Element g = G1.newRandomElement().getImmutable();
        Element a = Zr.newRandomElement().getImmutable();
        Element b = Zr.newRandomElement().getImmutable();
    
        // 三、计算等式左半部分
        Element ga = g.powZn(a);
        Element gb = g.powZn(b);
        Element egg_ab = bp.pairing(ga,gb);
    
        // 四、计算等式右半部分
        Element egg = bp.pairing(g,g).getImmutable();
        Element ab = a.mul(b);
        Element egg_ab_p = egg.powZn(ab);
    
        if (egg_ab.isEqual(egg_ab_p)) {
            System.out.println("yes");
        }
        else {
            System.out.println("No");
        }
    

    3.2 避坑指南(重要)

    getImmutable()duplicate()

    典型错误示例

        Pairing pairing = PairingFactory.getPairing("a.properties");
        Element g = pairing.getG1().newRandomElement();
        Element a = pairing.getZr().newRandomElement();
        System.out.println("g: " + g);
        Element ga = g.powZn(a); //the value "g" will also be changed to ga
        System.out.println("g: " + g);
        System.out.println("ga: " + ga);
    

    避免方法

    • 定义g的时候使用 getImmutable() 方法
        Element g = pairing.getG1().newRandomElement().getImmutable();
    
    • 或者使用g的时候使用 duplicate() 方法
        Element ga = g.duplicate().powZn(a);
    
    展开全文
  • ​ 需求背景:点击Echarts区域跳转页面,跳转的区域不包括grid的坐标及标签,...通过百度和查看github issue后多用Echarts实例的getZr()方法监听到整个画布的 click 事件。 ​ 使用echartsInstance.getZr().on('clic...

    需求背景:点击Echarts区域跳转页面,跳转的区域不包括grid的坐标及标签,翻看了Echarts官网,实现触发事件之的on方法,但是此方法只能在鼠标点击某个图形上会触发,这样并不能实现需求。通过百度和查看github issue后多用Echarts实例的getZr()方法监听到整个画布的 click 事件。

    ​ 使用echartsInstance.getZr().on('click' , params => {})监听画布,配合echartsInstance.containPixel('grid', pointInPixel) 方法判断点击位置是否在坐标系里面,从而解决需求问题。

    ​ 但是getZr()官方文档并没解释。所以下面将分享两个点击事件的场景,一:点击某个图形触发点击事件,二:点击任意位置触发点击事件并且知道自己点击的位置,处理折线不易点击的情况。

    一. 场景一 : 点击图形触发点击事件

    1.echartsInstance.on()

    ​ 鼠标点击某个图形上会触发点击事件使用on方法

    ​ 图形为折线上的折点,柱状图的柱子等等。折线,坐标轴的标签,坐标轴内的空白位置是不会触发点击事件。

    1633923-20190926155123886-863092218.png

    ​ 可选参数有:

    ​ 参数一:事件名称 eventName

    eventName: string,//事件名称,全小写,例如'click','mousemove', 'legendselected'

    ​ 参数二:过滤条件 query

    query: string|Object,//可选的过滤条件,能够只在指定的组件或者元素上进行响应。可为 string 或者 Object。

    如果为 string 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:

      chart.on('click', 'series', function () {...});
      chart.on('click', 'series.line', function () {...});
      chart.on('click', 'dataZoom', function () {...});
      chart.on('click', 'xAxis.category', function () {...});

    如果为 Object,可以包含以下一个或多个属性,每个属性都是可选的:

      {
          <mainType>Index: number // 组件 index
          <mainType>Name: string // 组件 name
          <mainType>Id: string // 组件 id
          dataIndex: number // 数据项 index
          name: string // 数据项 name
          dataType: string // 数据项 type,如关系图中的 'node', 'edge'
          element: string // 自定义系列中的 el 的 name
      }

    例如:更多案例移步官网

      chart.setOption({
          // ...
          series: [{
              name: 'uuu'
              // ...
          }]
      });
      chart.on('mouseover', {seriesName: 'uuu'}, function () {
          // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。
      });

    ​ 参数三:事件处理函数 handler

    handler: Function,//(params)=>{}

    ​ 参数四: context

    可选。回调函数内部的context,即this的指向。

    2.鼠标事件参数:

    通过参数获取点击位置的数据

    ​ 鼠标事件的事件参数是 事件对象的数据 的各个属性,通过参数获取点击位置的数据,对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。例如饼图会有percent属性表示百分比,具体见各个图表类型的 label formatter 回调函数的 params

    {
        // 当前点击的图形元素所属的组件名称,
        // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
        componentType: string,
        // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
        seriesType: string,
        // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
        seriesIndex: number,
        // 系列名称。当 componentType 为 'series' 时有意义。
        seriesName: string,
        // 数据名,类目名
        name: string,
        // 数据在传入的 data 数组中的 index
        dataIndex: number,
        // 传入的原始数据项
        data: Object,
        // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
        // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
        // 其他大部分图表中只有一种 data,dataType 无意义。
        dataType: string,
        // 传入的数据值
        value: number|Array,
        // 数据图形的颜色。当 componentType 为 'series' 时有意义。
        color: string,
        // 用户自定义的数据。只在 graphic component 和自定义系列(custom series)
        // 中生效,如果节点定义上设置了如:{type: 'circle', info: {some: 123}}。
        info: *
    }

    场景二 . 任意位置触发点击事件:

    ​ echartsInstance.getZr().on('click' , params => {})监听整个画布的点击事件。

    ​ 参数params如下:

    注意,不同版本的echarts参数不一样,本次使用的是echarts@4.2.1

    1633923-20190926155148357-1375395961.png

    1.使用参数,知道点击位置

    • ​ 通过参数对象中的target属性和topTarget属性进行定位位置
    • ​ 当点击某个图形元素:target对象中有dataIndex,seriesIndex属性,即可知道点击那个图形元素。
    • ​ 当点击grid内的空白位置:target对象为undefined,topTarget不为undefined。
    • ​ 当点击坐标轴标签:topTarget对象的anid值为"label_xx", xx为坐标值。
    • ​ 当点击坐标轴外的空白位置:target对象和topTarget多为undefined。

    因为官方并没对getZr()方法进行解释,所以只能观察参数的差异去实现点击的位置的获取。

    2.getZr()配合containPixel()方法判断给定点的位置

    echartsInstance.containPixel() 判断给定的点是否在指定的坐标系或者系列上。

    语法如下:

    (
        // finder 用于指示『在哪个坐标系或者系列上判断』。
        // 通常地,可以使用 index 或者 id 或者 name 来定位。
        finder: {
            seriesIndex?: number,
            seriesId?: string,
            seriesName?: string,
            geoIndex?: number,
            geoId?: string,
            geoName?: string,
            xAxisIndex?: number,
            xAxisId?: string,
            xAxisName?: string,
            yAxisIndex?: number,
            yAxisId?: string,
            yAxisName?: string,
            gridIndex?: number,
            gridId?: string
            gridName?: string
        },
        // 要被判断的点,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
        value: Array
    ) => boolean

    目前支持在这些坐标系和系列上进行判断:grid, polar, geo, series-map, series-graph, series-pie

    例:

    // 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。
    chart.containPixel('geo', [23, 44]); // 'geo' 等同于 {geoIndex: 0}
    // 判断 [23, 44] 点是否在 gridId 为 'z' 的 grid 上。
    chart.containPixel({gridId: 'z'}, [23, 44]);
    // 判断 [23, 44] 点是否在 index 为 1,4,5 的系列上。
    chart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);
    // 判断 [23, 44] 点是否在 index 为 1,4,5 的系列或者 gridName 为 'a' 的 grid 上。
    chart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);
    

    getZr()配合containPixel()例子:

    判断点击位置是否在grid中:(this.line为echartsInstance)

    this.line.getZr().on('click', params => {
    
        let pointInPixel = [params.offsetX, params.offsetY]
    
        console.log(this.line.containPixel('grid', pointInPixel))
    
      })
    

    3.处理折线不易点击的情况:

    折现图设置点击事件时,只能点击折点,有时并不容易点击,可以配合axisPointer的shadow指示器方便点击。

    1633923-20190926155102256-654441950.png

    this.line.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY]
          // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值,借助于索引值的获取到其它的信息
          let pointInGrid = this.line.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
    
          // x轴数据的索引值
          let xIndex = pointInGrid[0]
    
          // 使用getOption() 获取图表的option
          let op = this.line.getOption()
    
          // 获取当前点击位置要的数据
          var xData = op.series[0].data[xIndex]
        })
    

    注:

    echartsInstance.convertFromPixel()方法:链接

    echartsInstance.getOption()方法:链接

    转载于:https://www.cnblogs.com/liangsf/p/11592283.html

    展开全文
  • 双线性映射(密码学常用算法)

    万次阅读 多人点赞 2016-03-29 16:06:54
    背景介绍 技术博客已经好久没更新了。倒不是因为没得写,是因为实在是太忙了,而且研究也到了一个瓶颈期,需要大量阅读文献。 本来打算很长一段时间都不更新博客了,甚至打算等我毕业工作后再更新一些有价值的...
  • chart.getZr().off() chart.getZr().on('click',params=>{ let pointInPixel = [params.offsetX, params.offsetY] console.log(chart.containPixel('grid', pointInPixel)) let pointInGrid = chart....
  • chart.getZr().on('click', async (params) => { const pointInPixel = [params.offsetX, params.offsetY] if (chart.containPixel('grid', pointInPixel)) { let index = chart.convertFromPixel({ series...
  • 不要写onClick事件,用以下...myChart.getZr().on('click',function (params) { var pointInPixel= [params.offsetX, params.offsetY]; if (myChart.containPixel('grid',pointInPixel)) { /*此处添加具体执行...
  • chart.getZr().on('click', function() { // 如何根据arguments 判断我点了什么 console.log(arguments); }); </code></pre>该提问来源于开源项目:ecomfe/echarts-liquidfill</p></div>
  • Java密码学原型算法实现——第三部分:双线性对

    千次阅读 多人点赞 2015-04-16 22:37:35
    最近在CSDN私信上和知乎上经常收到求救帖子,希望我能写一个jPBC使用方法的博客。甚至实验室的硕士生们也在各种咨询我相关的问题。于是,我打算一劳永逸,写一篇有关jPBC使用的博客。希望这个博客出来后能帮助大家...
  • 在涉及到图标的开发中,相信大家经常会用到echarts,echarts中可以通过on方法添加事件处理函数,可以很方便的实现一些交互。但是直接添加的click事件,只有点击在图形元素上才会触发事件...本文总结了三种实现方法。
  • 双线性群简介与基本运算

    千次阅读 2020-03-18 15:24:55
    现在密码学实现基本只使用Type A和Type A1的。前者为对称质数阶双线性群,后者为合数阶对称双线性群。本博客也只在这两类曲线上实验。其他类曲线的实现类似
  • 老板让我搞一下3D地图 我便去瞧一瞧 看一看 ~~~~ 1.因为之前的项目都是基于echarts的刚好echarts-gl页支持3D于是我便选择echarts-gl作为我的练手项目 2.所有我选择的技术栈是: vue echarts echarts-gl ...
  • 主题:使用echarts绘制图表并,点击曲线上的点时跳转到指定链接,点击绘图区域空白处时... 本文中使用的是按需加载的方式引入 echart,若需要使用标线功能,请至少require(“echarts/lib/component/markLine”); ...
  • var _ZR = myChart.getZr(); var color = ['#61a0a8', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#fd9c35', '#cd4870'] _zr.add(new echarts.graphic.Sector ({ shape: { cx: 330, ...
  • myChart.getZr().on('mousemove', param => { var pointInPixel= [param.offsetX, param.offsetY]; if (myChart.containPixel('grid',pointInPixel)) {//若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手 ...
  • echarts geo3d地图点击事件获取地名成果展示踩坑描述解决方法step1:监听整块地图面板step2:在emphasis中label的formatter中获取地名信息step3:onClick后再将area中的值set到state中step4:通过判断当前鼠标当前样式...
  • 最近开发项目用到echarts图表展示数据信息,需要调用后台接口,写一篇博客来记录一下实现过程,末尾附源码 首先准备一个json文件echarts.json(名字无所谓),用来模拟从后台获取数据 ...然后在页面直接引用...
  • echarts 初始化的时候需要给固定的宽高,但是想要自适应在各种尺寸屏幕上。 api中的resize()这个时候并不适用(这个方法主要用在改变屏幕大小上),要实现直接自适应屏幕(不使用window.onresize)需要在setOption...
  • 用echarts 实现了柱状图, series : [ { "name":"任务进展状况", "type":"bar", "data":values } ] myChart.on('click', function (param) { alert(param.value) alert(param.name) ...

空空如也

1 2 3 4 5 ... 11
收藏数 220
精华内容 88
关键字:

getzr