国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）

2年前作者：拄杖盲學輕聲碼分類：Toy博客閱讀(28)違法舉報

這篇具有很好參考價值的文章主要介紹了【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

**【寫在前面】**這下我又不得不說了，還是客戶現(xiàn)場使用時想查詢一周的數(shù)據(jù)，查詢時候發(fā)現(xiàn)頁面居然要等20多秒，這是個人都得崩潰吧，然后就開始排查這塊業(yè)務代碼模塊，主要體現(xiàn)在兩個方面：
A.接口請求時間過長(約8秒)，有優(yōu)化的空間
B.前端一次性調用了四次接口，分別查詢了四組數(shù)據(jù)（需要優(yōu)化）
正因為有上述B的需求，所以特意針對點擊echarts圖例點擊觸發(fā)接口調用。

涉及知識點：legendselectchanged、Echarts的legend屬性、Echarts圖例、legend點擊事件、echarts多線共存。

先睹為快（效果）

【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）

【版權聲明】因個人創(chuàng)作經常被爬取到其他網站，特此聲明，本人暫時只在CSDN平臺創(chuàng)作，博主名為：《拄杖盲學輕聲碼》

1、實現(xiàn)Echarts多條曲線

先實現(xiàn)一個最簡單的echarts，多條線一起的曲線圖，如下圖所示四條線同屬一個維度。
【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）

具體實現(xiàn)代碼如下：

var resultData1 = {
        status: 200,
        data: {
            data_current: [{
                "value": 143,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 153,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 133,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevone: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 103,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevthree: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 123,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 223,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevweek: [{
                "value": 43,
                "record_time": "2022-03-04 11:00:00"
            }, {
                "value": 63,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 66,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 59,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 43,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevself: []
        },
        message: ""
    };
    var lineChartBaseInfo = {
        data_current: {
            modulename: '當前值',
            color: '136, 0, 21',
            rangDay: 0,
        },
        data_pevone: {
            modulename: '上個工作日',
            color: '233, 128, 45',
            rangDay: 1,
        },
        data_pevthree: {
            modulename: '前三個工作日',
            color: '54, 93, 251',
            rangDay: 3,
        },
        data_pevweek: {
            modulename: '前一周',
            color: '191, 24, 109',
            rangDay: 7,
        },
        data_pevself: {
            modulename: '自選時間',
            color: '161, 24, 169',
            rangDay: 0,
        },
    }
    var lineCharts = echarts.init(document.getElementById('lineCharts'));
    var _iconPath = "path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z";
    // var _iconPath = "path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z";
    var _icon = 'roundRect';
    var legendData = [], seriesData = []; //定義變量
    var newDataList = {
        data_current: resultData1.data.data_current,
        data_pevone: resultData1.data.data_pevone,
        data_pevthree: resultData1.data.data_pevthree,
        data_pevweek: resultData1.data.data_pevweek,
        data_pevself: resultData1.data.data_pevself,
    };
    //賦值操作
    $.each(newDataList, function (indexInArray, valueOfElement) {
        legendData.push({
            name: lineChartBaseInfo[indexInArray]['modulename'],
            icon: _iconPath
        });
        if (valueOfElement != null) {
            var _data = $.map(valueOfElement, function (val, idx) {
                return {
                    name: new Date(val.record_time).toString(),
                    value: [val.record_time, val.value]
                }
            });
            seriesData.push({
                name: lineChartBaseInfo[indexInArray]['modulename'],
                data: _data,
                type: "line",
                smooth: true,
                // smoothMonotone: "x",
                cursor: "pointer",
                // showSymbol: false,
                itemStyle: { normal: { label: { show: true } } },
                showSymbol: true,
                lineStyle: {
                    shadowColor: "rgba(18,61,172,0.5)",
                    shadowBlur: 10
                }
            })
        }
    });
    var option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        backgroundColor: '#fff',
        title: {
            text: '健康總分(100001)_指標歷史曲線',
            textStyle: {
                color: '#666',
                fontSize: 16,
            },
            top: '10px',
            left: '10px',
        },
        legend: {
            data: legendData,
            top: '10px',
            right: '20px',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            textStyle: {
                color: "#898989",
                lineHeight: 15
            },
            selected: { //在這里設置默認展示就ok了
                '當前值': true,
                '上個工作日': false,
                '前三個工作日': false,
                '前一周': false,
                '自選時間': false
            },
            type: "scroll",
        },
        dataZoom: [{
            type: 'inside',
            show: true,
            xAxisIndex: [0],
        }],
        tooltip: {
            backgroundColor: "#fff",
            trigger: "axis",
            axisPointer: {
                type: "line"
            },
            textStyle: {
                color: "#565656",
                lineHeight: 28
            },
            confine: true,
            padding: 12,
            formatter: function (params) {
            }
        },
        grid: {
            left: 20,
            right: 60,
            top: 60,
            bottom: 20,
            containLabel: true
        },
        xAxis: {
            name: "時間",
            type: "time",
            boundaryGap: true,
            axisLabel: {
                color: "#a0a9bc",
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false

            },
        },
        yAxis: {
            name: "值",
            nameTextStyle: {
                color: "gray"
            },
            type: "value",
            axisLabel: {
                color: "#a0a9bc",
                inside: true,
                margin: 0,
                verticalAlign: "bottom"
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        series: seriesData
    };
    lineCharts.clear();
lineCharts.setOption(option);

這個是在所有數(shù)據(jù)返回速度很快的情況下可以直接拿到的，但是如果數(shù)據(jù)量過于龐大，那么對頁面來說直接拿4條數(shù)據(jù)的過程無疑是個漫長的等待。

2、點擊echarts觸發(fā)接口請求

2.1 先默認隱藏部分數(shù)據(jù)

設置legend的selected屬性，將當天的設置為true，其他的設置為false即可，設置完后如下所示：
【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）

selected: { 
//在這里設置默認展示就ok了
          '當前值': true,
          '上個工作日': false,
          '前三個工作日': false,
          '前一周': false,
          '自選時間': false
},

2.2 自定義legend圖例點擊事件

首先說一下這邊用到的圖例點擊事件為legendselectchanged，但是在觸發(fā)前記得加上off，主要目的就是為了防止二次觸發(fā)，和click事件一樣。如下所示應用：
lineCharts.off(‘legendselectchanged’).on(‘legendselectchanged’, function (params) {
//觸發(fā)后執(zhí)行的內容
});
也就是在這個執(zhí)行內容里面我們可以調用接口，從而實現(xiàn)echarts點擊圖例觸發(fā)接口調用的目的。
具體實現(xiàn)效果如下：
【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）

具體實現(xiàn)代碼如下：

lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) {
            //調用接口調整源數(shù)據(jù)
            debugger;
            var _pevType = 0;
            if (params.selected[params.name]) {
                //表示true
                if (params.name.indexOf("上個工作") > -1) {
                    layer.msg("長得帥的黃大大點擊了:" + params.name);
                    //此處可以調用接口查詢數(shù)據(jù)
                } else if (params.name.indexOf("當前") > -1) {
                    layer.msg("長得帥的黃大大點擊了:" + params.name);
                    //此處可以調用接口查詢數(shù)據(jù)
                } else if (params.name.indexOf("周") > -1) {
                    layer.msg("長得帥的黃大大點擊了:" + params.name);
                    //此處可以調用接口查詢數(shù)據(jù)
                } else if (params.name.indexOf("三") > -1) {
                    layer.msg("長得帥的黃大大點擊了:" + params.name);
                    //此處可以調用接口查詢數(shù)據(jù)
                }
            } else {
                //表示false，隱藏
            }
            console.log('點擊了', params.name);
            // do something
        });

3、源碼下載地址（解壓即用）

百度網盤提取地址：
鏈接：https://pan.baidu.com/s/1bm50Dbq-AqZkuqgIgrUlgw
提取碼：hdd6

123網盤提取地址（不限速）
鏈接：https://www.123pan.com/s/ZxkUVv-dFJ4.html
提取碼：hdd6

喜歡博主的這篇文章的可以上皇榜支持一下博主喲?。?！皇榜入口點擊此處文章來源地址http://www.zghlxwxcb.cn/news/detail-402166.html

到了這里，關于【Echarts圖例點擊事件】自定義Echarts圖例legend點擊事件（已解決）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

本文來自互聯(lián)網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

分享到：

領支付寶紅包贊助服務器費用

ECharts中: legend圖例中的格式化屬性(formatter)以及嵌套圖表
Documentation - Apache ECharts 字符串模板的相識變量使用(不同的圖表對應都有對應的變量): Documentation - Apache ECharts 具體詳細使用可以點^^^鏈接查看: 你只需要創(chuàng)建一個 div id =\\\"xjzbChart\\\"/div 然后獲取 xjzbChart = echarts.init(document.getElementById(\\\'xjzbChart\\\')); 在 series數(shù)組里面創(chuàng)建兩個圖表對象
2024年02月13日
瀏覽(32)
（完美解決）matplotlib圖例(legend)如何自由設置其位置、大小以及樣式。
前言我們知道，這一條代碼會幫我們顯示圖例，而且通常，其會放置在圖片中一個不錯的位置。但是如果我們的數(shù)據(jù)，占滿了整個圖像，此時，其放的位置就會出問題了。那么我們該如何自由設置圖例位置呢？位置：loc 這個參數(shù)內置了一些位置，如果這些位置恰好有你想要
2023年04月09日
瀏覽(56)
echarts中實現(xiàn)自定義legend數(shù)據(jù)
很久很久以前，我剛使用echarts，更新了一篇關于echarts中formatter實現(xiàn)動態(tài)legend的blog，很多人來問是如何實現(xiàn)的，一直很忙，懵懵懂懂也在沒看，近來抽時間更新了一下實現(xiàn)方式類似于以下這種圖例，很多新手沒辦法下手了，其實直接使用echarts中屬性的格式器formatter就可以解
2024年02月13日
瀏覽(23)
echarts雷達圖圖例自定義以及tooltip動態(tài)展示一維數(shù)據(jù)
?實現(xiàn)效果：雖然上面實現(xiàn)了圖例自定義，但是仔細看會發(fā)現(xiàn)圖例與文字不在一條水平線上，利用富文本配置，對height進行調整，實現(xiàn)圖例圖片與文字對齊。實現(xiàn)效果：官方文檔中默認顯示該維度的所有數(shù)據(jù) 而遇到的需求是顯示鼠標懸浮該軸的數(shù)據(jù)對比實現(xiàn)： ? 雖然實現(xiàn)
2024年02月16日
瀏覽(45)
圖例legend語法及設置
(1)設置圖例位置使用loc參數(shù) plt.legend(loc=‘lower left’) 0 ‘best’ 1 ‘upper right’ 2 ‘upper left’ 3 ‘lower left’ 4 ‘lower right’ 5 ‘right’ 6 ‘center left’ 7 ‘center right’ 8 ‘lower center’ 9 ‘upper center’ 10 ‘center’ (2)設置圖例字體 #設置字體大小 fontsize : int or float or {‘xx-small’,
2024年02月06日
瀏覽(28)
echarts 點擊事件
餅圖點擊事件會觸發(fā)兩次可以通過點擊事件查詢當前餅圖是裂開還是合上的狀態(tài) a.event.target.parent._children是餅圖的對象數(shù)組數(shù)組中selected為true代表當前為選中狀態(tài)，反之未選中 echarts的legend事件禁用以及l(fā)egend顯示百分比自定義fomatter圖標消失解決
2024年02月11日
瀏覽(23)
echarts用法之點擊事件
echarts用法之點擊事件 - 知乎 echarts可以通過點擊事件獲取每項的值：myChart.on(\\\'click\\\', function (param) { } // myChart為自定義變量：var myChart = echarts.init(document.getElementById(\\\'echartBox\\\')); 可以通過param… https://zhuanlan.zhihu.com/p/588249196
2024年02月08日
瀏覽(28)
[echarts]柱狀圖的點擊事件
先來一段簡潔的寫echarts圖表的代碼: 如圖所示，如果柱狀圖需要有點擊事件: 但這只是點擊藍色柱條部分才會觸發(fā)點擊事件的寫法如果柱條沒有數(shù)據(jù)，用上述方法點擊時將不會觸發(fā)，如果無數(shù)據(jù)點擊背景也依舊想觸發(fā)點擊事件，就用下面方法: 另外，再補充一下劃過和劃出事
2024年02月13日
瀏覽(22)
echarts的tooltip添加點擊事件
效果如下 ?代碼如下 ?代碼如下
2024年02月16日
瀏覽(30)
解決echarts 餅圖和圖例之間的距離問題
解決echarts 餅圖和圖例之間的距離問題：
2024年02月16日
瀏覽(26)

<b id="pliy7"><abbr id="pliy7"></abbr></b>

<strong id="pliy7"><dl id="pliy7"></dl></strong>

<del id="pliy7"></del>