人人快三投注—官方网址22270.COM鈥擡Charts 浜嬩欢澶勭悊

人人快三投注—官方网址22270.COM鈥擡Charts 涓垜浠彲浠ラ氳繃鐩戝惉鐢ㄦ埛鐨勬搷浣滆涓烘潵鍥炶皟瀵瑰簲鐨勫嚱鏁般

人人快三投注—官方网址22270.COM鈥擡Charts 閫氳繃 on 鏂规硶鏉ョ洃鍚敤鎴风殑琛屼负锛屼緥濡傜洃鎺х敤鎴风殑鐐瑰嚮琛屼负銆

人人快三投注—官方网址22270.COM鈥擡Charts 涓簨浠跺垎涓轰袱绉嶇被鍨:

鐢ㄦ埛榧犳爣鎿嶄綔鐐瑰嚮锛屽 'click'銆'dblclick'銆'mousedown'銆'mousemove'銆'mouseup'銆'mouseover'銆'mouseout'銆'globalout'銆'contextmenu' 浜嬩欢銆

人人快三投注—官方网址22270.COM杩樻湁涓绉嶆槸鐢ㄦ埛鍦ㄤ娇鐢ㄥ彲浠ヤ氦浜掔殑缁勪欢鍚庤Е鍙戠殑琛屼负浜嬩欢锛屼緥濡傚湪鍒囨崲鍥句緥寮鍏虫椂瑙﹀彂鐨 'legendselectchanged' 浜嬩欢锛夛紝鏁版嵁鍖哄煙缂╂斁鏃惰Е鍙戠殑 'datazoom' 浜嬩欢绛夌瓑銆

myChart.on('click', function (params) {
    // 鍦ㄧ敤鎴风偣鍑诲悗鎺у埗鍙版墦鍗版暟鎹殑鍚嶇О
    console.log(params);
});

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

chart.on('click', 'series.line', function (params) {
    console.log(params);
});

chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

榧犳爣浜嬩欢

人人快三投注—官方网址22270.COM鈥擡Charts 鏀寔鐨勯紶鏍囦簨浠剁被鍨嬶紝鍖呮嫭 'click'銆'dblclick'銆'mousedown'銆'mousemove'銆'mouseup'銆'mouseover'銆'mouseout'銆'globalout'銆'contextmenu' 浜嬩欢銆

浠ヤ笅瀹炰緥鍦ㄧ偣鍑绘煴褰㈠浘鏃朵細寮瑰嚭瀵硅瘽妗嗭細

瀹炰緥

// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲人人快三投注—官方网址22270.COM鈥擡Charts瀹炰緥
var myChart = echarts.init(document.getElementById('main'));

// 鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹
var option = {
    xAxis: {
        data: ["琛~","缇婃瘺琛","闆汉琛","瑁ゅ瓙","楂樿窡闉","琚滃瓙"]
    },
    yAxis: {},
    series: [{
        name: '閿閲',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆
myChart.setOption(option);
// 澶勭悊鐐瑰嚮浜嬩欢骞朵笖寮瑰嚭鏁版嵁鍚嶇О
myChart.on('click', function (params) {
    alert(params.name);
});

灏濊瘯涓涓 禄

鎵鏈夌殑榧犳爣浜嬩欢鍖呭惈鍙傛暟 params锛岃繖鏄竴涓寘鍚偣鍑诲浘褰㈢殑鏁版嵁淇℃伅鐨勫璞★紝鏍煎紡濡備笅锛

人人快三投注—官方网址22270.COM{
    // 褰撳墠鐐瑰嚮鐨勫浘褰㈠厓绱犳墍灞炵殑缁勪欢鍚嶇О锛
    // 鍏跺煎 'series'銆'markLine'銆'markPoint'銆'timeLine' 绛夈
    componentType: string,
    // 绯诲垪绫诲瀷銆人人快三投注—官方网址22270.COM鍊煎彲鑳戒负锛'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銆乬raph 绛夊浘琛ㄥ悓鏃跺惈鏈 nodeData 鍜 edgeData 涓ょ data锛
    // dataType 鐨勫间細鏄 'node' 鎴栬 'edge'锛岃〃绀哄綋鍓嶇偣鍑诲湪 node 杩樻槸 edge 涓娿
    // 鍏朵粬澶ч儴鍒嗗浘琛ㄤ腑鍙湁涓绉 data锛宒ataType 鏃犳剰涔夈
    dataType: string,
    // 浼犲叆鐨勬暟鎹
    value: number|Array
    // 鏁版嵁鍥惧舰鐨勯鑹层傚綋 componentType 涓 'series' 鏃舵湁鎰忎箟銆
    color: string
}

濡備綍鍖哄垎榧犳爣鐐瑰嚮鍒颁簡鍝噷锛

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 鐐瑰嚮鍒颁簡 markPoint 涓
        if (params.seriesIndex === 5) {
            // 鐐瑰嚮鍒颁簡 index 涓 5 鐨 series 鐨 markPoint 涓娿
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 鐐瑰嚮鍒颁簡 graph 鐨 edge锛堣竟锛変笂銆
            }
            else {
                // 鐐瑰嚮鍒颁簡 graph 鐨 node锛堣妭鐐癸級涓娿
            }
        }
    }
});

浣跨敤 query 鍙鎸囧畾鐨勭粍浠剁殑鍥惧舰鍏冪礌鐨勮Е鍙戝洖璋冿細

chart.on(eventName, query, handler);

query 鍙负 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' 鏃讹紝姝ゆ柟娉曡鍥炶皟銆
});

渚嬪锛

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 鐨勭郴鍒椾腑鐨 name 涓 'xx' 鐨勫厓绱犺 'mouseover' 鏃讹紝姝ゆ柟娉曡鍥炶皟銆
});

渚嬪锛

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 鍏崇郴鍥剧殑鑺傜偣琚偣鍑绘椂姝ゆ柟娉曡鍥炶皟銆
});
chart.on('click', {dataType: 'edge'}, function () {
    // 鍏崇郴鍥剧殑杈硅鐐瑰嚮鏃舵鏂规硶琚洖璋冦
});

渚嬪锛

chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 涓 'my_el' 鐨勫厓绱犺 'mouseup' 鏃讹紝姝ゆ柟娉曡鍥炶皟銆
});

浣犲彲浠ュ湪鍥炶皟鍑芥暟涓幏寰楄繖涓璞′腑鐨勬暟鎹悕銆佺郴鍒楀悕绉板悗鍦ㄨ嚜宸辩殑鏁版嵁浠撳簱涓储寮曞緱鍒板叾瀹冪殑淇℃伅鍊欐洿鏂板浘琛紝鏄剧ず娴眰绛夌瓑锛屽涓嬬ず渚嬩唬鐮侊細

瀹炰緥

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 閫氳繃楗煎浘琛ㄧ幇鍗曚釜鏌卞瓙涓殑鏁版嵁鍒嗗竷
                data: [detail.data]
            }]
        });
    });
});

缁勪欢浜や簰鐨勮涓轰簨浠

鍦 人人快三投注—官方网址22270.COM鈥擡Charts 涓熀鏈笂鎵鏈夌殑缁勪欢浜や簰琛屼负閮戒細瑙﹀彂鐩稿簲鐨勪簨浠讹紝甯哥敤鐨勪簨浠跺拰浜嬩欢瀵瑰簲鍙傛暟鍦 events 鏂囨。涓湁鍒楀嚭銆

涓嬮潰鏄洃鍚竴涓浘渚嬪紑鍏崇殑绀轰緥锛

瀹炰緥

// 鍥句緥寮鍏崇殑琛屼负鍙細瑙﹀彂 legendselectchanged 浜嬩欢
myChart.on('legendselectchanged', function (params) {
    // 鑾峰彇鐐瑰嚮鍥句緥鐨勯変腑鐘舵
    var isSelected = params.selected[params.name];
    // 鍦ㄦ帶鍒跺彴涓墦鍗
    console.log((isSelected ? '閫変腑浜' : '鍙栨秷閫変腑浜') + '鍥句緥' + params.name);
    // 鎵撳嵃鎵鏈夊浘渚嬬殑鐘舵
    console.log(params.selected);
});

灏濊瘯涓涓 禄


浠g爜瑙﹀彂 人人快三投注—官方网址22270.COM鈥擡Charts 涓粍浠剁殑琛屼负

涓婇潰鎴戜滑鍙鏄庝簡鐢ㄦ埛鐨勪氦浜掓搷浣滐紝浣嗘湁鏃跺欐垜浠篃浼氶渶瑕佸湪绋嬪簭閲岃皟鐢ㄦ柟娉曞苟瑙﹀彂鍥捐〃鐨勮涓猴紝姣斿鏄剧ず tooltip銆

人人快三投注—官方网址22270.COM鈥擡Charts 閫氳繃 dispatchAction({ type: '' }) 鏉ヨЕ鍙戝浘琛ㄨ涓猴紝缁熶竴绠$悊浜嗘墍鏈夊姩浣滐紝涔熷彲浠ユ牴鎹渶瑕佸幓璁板綍鐢ㄦ埛鐨勮涓鸿矾寰勩

浠ヤ笂瀹炰緥鐢ㄤ簬杞挱楗煎浘涓殑 tooltip锛

瀹炰緥

setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 鍙栨秷涔嬪墠楂樹寒鐨勫浘褰
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 楂樹寒褰撳墠鍥惧舰
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 鏄剧ず tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

灏濊瘯涓涓 禄