qq_33997249 2018-03-12 08:50 采纳率: 14.3%
浏览 4851
已结题

Echart中的trigger中添加二个事件?

1:默认使用时用的是 tooltip : {
{ trigger: 'axis',
},
效果则是出现悬浮框显示XY轴及name值。

2:由于需要在视图上点击,并处数据。考虑到有空值数据时,视图不显示,点击事件无法触发,我于是用该方式实现了
tooltip : {
{ trigger: 'axis',
triggerOn:"dblclick",
formatter: function (params,ticket,callback) {
var id = params[0].data.id;//id數值
editById(id);//編輯數據

            }
            }
        },  

但是,显示信息事件则没了!!!

3:如何在tooltip可写入多个事件?(或者用其他方式解决空值可执行事件?)

  • 写回答

2条回答 默认 最新

  • weixin_38933880 2018-03-12 19:39
    关注

    // 路径配置

    require.config({

    paths : {

    echarts : 'jquery/echarts-2.2.7/build/dist'

    }

    });

    // 使用EChart.js画图

    function drawChart() {

    require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块,按需加载

    ], function(ec) {

    // 基于准备好的dom,初始化echarts图表

    var myChart = ec.init(document.getElementById('myChart'));

    // 添加点击事件

    var ecConfig = require('echarts/config');

    myChart.on(ecConfig.EVENT.CLICK, eConsole);

    var option = {

    tooltip : {

    show : false,

    trigger : 'item',

    formatter : '{a} : {b}'

    },

    toolbox : {

    show : true,

    feature : {

    restore : {

    show : true

    },

    }

    },

    series : [ {

    type : 'force',

    name : "关系",

    ribbonType : false,

    clickable : true,

    draggable : false,

    categories : [ {

    name : '属性'

    }, {

    name : '实例'

    } ],

    itemStyle : {

    normal : {

    label : {

    show : true,

    textStyle : {

    color : '#333'

    }

    },

    nodeStyle : {

    brushType : 'both',

    borderColor : 'rgba(255,215,0,0.4)',

    borderWidth : 1

    },

    linkStyle : {

    type : 'curve'

    }

    },

    emphasis : {

    label : {

    show : false

    // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE

    },

    nodeStyle : {

    // r: 30

    },

    linkStyle : {}

    }

    },

    useWorker : false,

    minRadius : 15,

    maxRadius : 25,

    gravity : 1.1,

    scaling : 1.1,

    roam : false,

    nodes : [ {

    category : 1,

    name : '实例',

    value : 10,

    label : '宝马',

    }, {

    category : 0,

    name : '属性1',

    value : 6,

    label : '宝马X1'

    }, {

    category : 0,

    name : '属性2',

    value : 6,

    label : '宝马X5'

    }, {

    category : 0,

    name : '属性3',

    value : 6,

    label : '宝马3系'

    }, {

    category : 0,

    name : '属性4',

    value : 6,

    label : '宝马7系'

    }, {

    category : 0,

    name : '属性5',

    value : 6,

    label : '宝马X6'

    }, {

    category : 0,

    name : '属性6',

    value : 6,

    label : '宝马1系'

    }, {

    category : 0,

    name : '属性7',

    value : 6,

    label : '宝马i8'

    } ],

    links : [ {

    source : '属性1',

    target : '实例',

    weight : 1,

    name : '属性1'

    }, {

    source : '属性2',

    target : '实例',

    weight : 1,

    name : '属性2'

    }, {

    source : '属性3',

    target : '实例',

    weight : 1,

    name : '属性3'

    }, {

    source : '属性4',

    target : '实例',

    weight : 1,

    name : '属性4'

    }, {

    source : '属性5',

    target : '实例',

    weight : 1,

    name : '属性5'

    }, {

    source : '属性6',

    target : '实例',

    weight : 1,

    name : '属性6'

    }, {

    source : '属性7',

    target : '实例',

    weight : 1,

    name : '属性7'

    }, ]

    } ]

    };

        // 为echarts对象加载数据  
        myChart.setOption(option);  
    
    });  
    

    }

    function eConsole(param) {

    if (typeof param.seriesIndex == 'undefined') {

    return;

    }

    if (param.type == 'click') {

    alert(param.name);

    }

    }

    评论

报告相同问题?

悬赏问题

  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出
  • ¥15 vue中我代理了iframe,iframe却走的是路由,没有显示该显示的网站,这个该如何处理
  • ¥15 操作系统相关算法中while();的含义
  • ¥15 CNVcaller安装后无法找到文件
  • ¥15 visual studio2022中文乱码无法解决
  • ¥15 关于华为5g模块mh5000-31接线问题
  • ¥15 keil L6007U报错
  • ¥15 webapi 发布到iis后无法访问