最近接觸到一個大資料視覺化專案，需要用到echarts圖示，在使用中會需要對部分圖示或字型做自定義設定，這些設定雖然不是太難，設定方法也僅在官網上的配置文件中，但我還是想把它記錄下來，以便以後再次用到時能夠快捷的解決問題；

echarts官網：http://echarts.baidu.com/

我使用的折線圖中（樣式主題是shine）座標軸字型顏色是灰色的，這樣在深色的背景中座標軸上的數字會看不清，因此我想修改成淺色字型;

1.修改折線圖座標軸字型顏色

      xAxis: {
            type: 'category',
            data: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
            //設定座標軸字型顏色和寬度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'value',
            //設定座標軸字型顏色和寬度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        }
 

2.修改圖例字型顏色

        legend: {
            data: ["今日人數趨勢", "昨日人數趨勢"],
            textStyle:{
                color:"#fff"
            }
        },

修改後的完整程式碼：

$(function () {
//    人數趨勢
    var myChart2 = echarts.init(document.getElementById('number-trend'), "shine");
    option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ["今日人數趨勢", "昨日人數趨勢"],
            textStyle:{
                color:"#fff"
            }
        },
        xAxis: {
            type: 'category',
            data: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
            //設定座標軸字型顏色和寬度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'value',
            //設定座標軸字型顏色和寬度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        series: [
            {
                name: "今日人數趨勢",
                data: [121820, 129321, 129501, 129134, 121290, 121330, 121320, 121336, 121423, 121547, 121586],
                type: 'line',
                smooth: true
            },
            {
                name: "昨日人數趨勢",
                data: [121720, 125532, 123971, 129725, 128275, 126364, 124327, 121436, 121323, 125447, 128686],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart2.setOption(option2, true);
});
 

修改後圖表樣式以達到預期效果，座標軸和圖例字型顏色已經變為白色

修改後效果如下：