溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Echarts常用組件的屬性與源代碼

發(fā)布時間：2021-06-15 14:43:22 來源：億速云 閱讀：218 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Echarts常用組件的屬性與源代碼”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

圖例（legend）組件是ECharts中較為常用的組件，它用于以不同的顏色區(qū)別系列標(biāo)記的名字，表述了數(shù)據(jù)與圖形的關(guān)聯(lián)。用戶在操作時，可以通過單擊圖例控制哪些數(shù)據(jù)系列顯示或不顯示。

在ECharts 3.x/ECharts 4.x中，單個ECharts實(shí)例可以存在多個圖例組件，方便多個圖例的布局。當(dāng)圖例數(shù)量過多時，可以使用滾動翻頁。

在ECharts中，圖例組件的屬性如表所示

Echarts常用組件的屬性與源代碼

Echarts常用組件的屬性與源代碼 

Echarts常用組件的屬性與源代碼 

圖例組件屬性示意圖如圖所示。

Echarts常用組件的屬性與源代碼

利用某一年的蒸發(fā)量、降水量、最低氣溫和最高氣溫?cái)?shù)據(jù)繪制折柱混搭圖，并為圖表配置圖例組件。
當(dāng)圖例數(shù)量過多或圖例長度過長時，可以使用垂直滾動圖例或水平滾動圖例，參見屬性legend.type。此時，設(shè)置type屬性的值為“scroll”，表示圖例只顯示在一行，多余的部分會自動呈現(xiàn)為滾動效果，如圖所示。

由圖可知，右上方的 滑動 圖標(biāo)即圖例的滾動圖標(biāo)，可以將圖例呈現(xiàn)為滾動效果。

Echarts常用組件的屬性與源代碼

圖例的源代碼如下;

<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts腳本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄OM-->
    <div id="main" ></div>
    <script type="text/javascript">
        //基于準(zhǔn)備好的DOM，初始化ECharts圖表
        var myChart = echarts.init(document.getElementById("main"));
        //指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
            color: ["red", 'green', 'blue', 'grey'],  //使用自己預(yù)定義的顏色
            legend: {
                orient: 'horizontal',  //'vertical'
                x: 'right',  //'center'|'left'|{number},
                y: 'top',  //'center'|'bottom'|{number}
                backgroundColor: '#eee',
                borderColor: 'rgba(178,34,34,0.8)',
                borderWidth: 4,
                padding: 10,
                itemGap: 20, textStyle: { color: 'red' },
            },
            xAxis: {  //配置x軸坐標(biāo)系
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: [  //配置y軸坐標(biāo)系
                {   //設(shè)置第1條y軸
                    type: 'value',
                    axisLabel: { formatter: '{value} ml' }
                },
                {   //設(shè)置第2條y軸
                    type: 'value',
                    axisLabel: { formatter: '{value} °C' },
                    splitLine: { show: false }
                }
            ],
            series: [  //配置數(shù)據(jù)系列
                {   //設(shè)置數(shù)據(jù)系列1
                    name: '某一年的蒸發(fā)量', type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
                },
                {   //設(shè)置數(shù)據(jù)系列2
                    name: '某一年的降水量', smooth: true,
                    type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
                },
                {   //設(shè)置數(shù)據(jù)系列3
                    name: '某一年的最高氣溫', type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
                },
                {   //設(shè)置數(shù)據(jù)系列4
                    name: '某一年的最低氣溫', smooth: true,
                    type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
                }
            ]
        };
        //使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
        myChart.setOption(option); 
    </script>
</body>

</html>

總結(jié)

“Echarts常用組件的屬性與源代碼”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手