ECharts學習--通用配置

通用配置，就是指不管在什麼類型的圖示中，都可以使用的配置（餅狀圖、折線圖、雷達圖等等）。

（一）通用配置title

（1）文字樣式

可以通過textStyle來進行設定，這裡有很多屬性，例如：color（文字顔色）、fontStyle（字型風格）、fontWeight（字型粗細）等等。這裡可以通過檢視官方文檔，結合自身需求來盡心配置。ECharts官方文檔：https://echarts.apache.org/zh/option.html#title.textStyle

（2）标題邊框

borderColor（邊框顔色）、borderWidth（标題的邊框線寬）、borderRadius（邊角半徑，機關px）。ECharts官方文檔：https://echarts.apache.org/zh/option.html#title.borderColor

（3）标題位置

left、top、right、bottom。

标題除了上面的幾個常用的配置項以外，還有很多配置，例如padding（标題内邊距）、link（超連接配接）、show（是否顯示标題元件）等等。我們可以檢視官方文檔來進行配置。ECharts官方文檔：https://echarts.apache.org/zh/option.html#title

（二）通用配置tooltip

tooltip：提示框元件，用于配置滑鼠滑過或點選圖示時的顯示框。

（1）觸發類型，tigger：

item（滑鼠移動到柱内部的時候，顯示該條柱狀線的詳情資訊）。

axis（滑鼠移動到柱的y軸上，顯示該條柱狀線的詳情資訊）。

（2）觸發時機，tiggerOn：

moseover（預設滑動觸發）

click（點選時候觸發）

（3）格式化，formatter：

字元串模闆：官方文檔：https://echarts.apache.org/zh/option.html#tooltip.formatter

回調函數：

formatter: function(arg){
        console.log(arg);
        return arg.name + '的分數是' + arg.data
}
           

（三）toolbox

toolbox：ECharts提供的工具欄，内置有導出圖檔（saveAsImage），資料視圖（dataView），重置（restore），資料區域縮放（dataZoom），動态類型切換（magicType）五個工具。

（1）導出圖檔：

toolbox:{
    feature:{
        saveAsImage:{}
    }
}
           

這裡saveAsImage後面直接給{ }即可，此時，右上角會出現一個下載下傳的小按鈕，點選即可下載下傳該可視圖。

（2）資料視圖：

toolbox:{
    feature:{
        dataView:{}
    }
}
           

（3）重置：

toolbox:{
    feature:{
        restore:{}
    }
},
           

（4）資料區域縮放：

toolbox:{
    feature:{
        dataZoom:{}
    }
}
           

（5）動态類型切換（切換資料圖的類型，例如餅狀圖，折線圖的切換）：

toolbox:{
    feature:{
        magicType:{
            type:['bar','line']
        }
    }
}
           

（四）通用配置legend

legend：圖例，用于篩選系列，需要和series配合使用。

（1）legend中的data是一個數組。

（2）legend中的data的值，需要和series數組中某組資料的name值一緻。

<div style="width: 600px;height: 400px;">
</div>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xData = ['小明', '小紅', '小王']
    var yData1 = [60, 65, 70] // 國文
    var yData2 = [70, 75, 80] // 數學
    var option = {
        title: {
            text: '國文成績', // 圖示标題
            textStyle: {
                color: 'red',
            }
        },
        legend:{
            data:['國文','數學']  // 這裡必須要和series中的name保持一緻，否則不會顯示
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: "value"
        },
        series: [
            {
                name: '國文',
                type: 'bar',
                data: yData1
            },
            {
                name: '數學',
                type: 'bar',
                data: yData2
            },
        ]
    }
    mCharts.setOption(option)
</script>
           

這樣就可以得到以下可視圖：