【ECharts】03 樣式

阿新 • • 發佈：2020-08-16

ECharts4 開始，除了預設主題外，內建了兩套主題，分別為light和dark。

設定方式：

var chart = echarts.init(dom, 'light');
 
var chart = echarts.init(dom, 'dark');

除了上面的設定方式之外，EChart還提供線上除錯獲取的方式：

https://echarts.baidu.com/theme-builder/zh/index.html

除錯完成後點選下載獲取：

初始化ECharts的時候，第二引數注入的是我們這個主題JS檔案的路徑

<!-- 引入主題 -->
<script src 
="https://www.runoob.com/static/js/wonderland.js"></script>
...

// HTML 引入 wonderland.js 檔案後，在初始化的時候呼叫
var myChart = echarts.init(dom, 'wonderland');
// ...

如果是JSON檔案，則過程複雜一些：

比如上圖中我們選中了提個主題，將 JSON 程式碼儲存為wonderland.json。

//主題名稱是 wonderland
$.getJSON('wonderland.json', function (themeJSON) {
    echarts.registerTheme( 
'wonderland', themeJSON)
    var myChart = echarts.init(dom, 'wonderland');
});

注意：我們使用了 $.getJSON，所以需要引入 jQuery。

調色盤

調色盤可以在 option 中設定。

調色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。

可以設定全域性的調色盤，也可以設定系列自己專屬的調色盤。

option = {
    // 全域性調色盤。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type:  
'bar',
        // 此係列自己的調色盤。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此係列自己的調色盤。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

高亮設定：

<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="ECharts.js"></script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        series : [
            {
                name: '訪問來源',
                type: 'pie',    // 設定圖表型別為餅圖
                radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                // 高亮樣式。
                emphasis: {
                    itemStyle: {
                        // 高亮時點的顏色
                        color: 'red'
                    },
                    label: {
                        show: true,
                        // 高亮時標籤的文字
                        formatter: '高亮時顯示的標籤內容'
                    }
                },
                data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                    {value:235, name:'視訊廣告'},
                    {value:274, name:'聯盟廣告'},
                    {value:310, name:'郵件營銷'},
                    {value:335, name:'直接訪問'},
                    {value:400, name:'搜尋引擎'}
                ]
            }
        ]
    })
</script>