轉：ECharts圖表組件入門教程之Theme：ECharts圖表的皮膚是什麼？如何給圖表換主題（皮膚）Theme？

1、什麼是ECharts圖表的皮膚（主題）？javascript

針對這個問題我只能這樣回答，ECharts圖表的主題（皮膚）就猶如人的衣服同樣，是用來陪襯和渲染主體，使其變得更加美觀好看的目的。你去過ECharts圖表組件的官網應該都看到每個示例都支持皮膚切換的。咱們更深刻的理解，皮膚其實就是一些樣式的定義集合。html

圖表有不少部分組成，好比：標題、座標軸、Series數據、Legend圖例等。每個部分咱們能夠爲其設置style樣式，形如：字體顏色、字體大小、旋轉角度、背景圖片、背景顏色、是否漸變等。java

2、如何將其皮膚（主題）應用到ECharts圖表上去？echarts

猶如一件衣服咱們設計和裁剪縫製好了，那麼好很差還得找我的穿上纔可以有所體現。ECharts圖表也是如此，這裏咱們定義了一套純綠色的皮膚option集合，示例代碼以下所示：dom

//定義一套綠色的皮膚
var theme = {
    // 默認色板
    color: [
'#408829', '#68a54a', '#a9cba2', '#86b379',
'#397b29', '#8abb6f', '#759c6a', '#bfd3b7'
],

    // 圖表標題
    title: {
        itemGap: 8,
        textStyle: {
            fontWeight: 'normal',
            color: '#408829'
        }
    },

    // 值域
    dataRange: {
        color: ['#1f610a', '#97b58d']
    },

    // 工具箱
    toolbox: {
        color: ['#408829', '#408829', '#408829', '#408829']
    },

    // 提示框
    tooltip: {
        backgroundColor: 'rgba(0,0,0,0.5)',
        axisPointer: {            // 座標軸指示器，座標軸觸發有效
            type: 'line',         // 默認爲直線，可選爲：'line' | 'shadow'
            lineStyle: {          // 直線指示器樣式設置
                color: '#408829',
                type: 'dashed'
            },
            crossStyle: {
                color: '#408829'
            },
            shadowStyle: {                     // 陰影指示器樣式設置
                color: 'rgba(200,200,200,0.3)'
            }
        }
    },

    // 區域縮放控制器
    dataZoom: {
        dataBackgroundColor: '#eee',            // 數據背景顏色
        fillerColor: 'rgba(64,136,41,0.2)',   // 填充顏色
        handleColor: '#408829'     // 手柄顏色
    },

    grid: {
        borderWidth: 0
    },

    // 類目軸
    categoryAxis: {
        axisLine: {            // 座標軸線
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#408829'
            }
        },
        splitLine: {           // 分隔線
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: ['#eee']
            }
        }
    },

    // 數值型座標軸默認參數
    valueAxis: {
        axisLine: {            // 座標軸線
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#408829'
            }
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
            }
        },
        splitLine: {           // 分隔線
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: ['#eee']
            }
        }
    },

    timeline: {
        lineStyle: {
            color: '#408829'
        },
        controlStyle: {
            normal: { color: '#408829' },
            emphasis: { color: '#408829' }
        }
    },

    // K線圖默認參數
    k: {
        itemStyle: {
            normal: {
                color: '#68a54a',          // 陽線填充顏色
                color0: '#a9cba2',      // 陰線填充顏色
                lineStyle: {
                    width: 1,
                    color: '#408829',   // 陽線邊框顏色
                    color0: '#86b379'   // 陰線邊框顏色
                }
            }
        }
    },

    map: {
        itemStyle: {
            normal: {
                areaStyle: {
                    color: '#ddd'
                },
                label: {
                    textStyle: {
                        color: '#c12e34'
                    }
                }
            },
            emphasis: {                 // 也是選中樣式
                areaStyle: {
                    color: '#99d2dd'
                },
                label: {
                    textStyle: {
                        color: '#c12e34'
                    }
                }
            }
        }
    },

    force: {
        itemStyle: {
            normal: {
                linkStyle: {
                    strokeColor: '#408829'
                }
            }
        }
    },

    chord: {
        padding: 4,
        itemStyle: {
            normal: {
                lineStyle: {
                    width: 1,
                    color: 'rgba(128, 128, 128, 0.5)'
                },
                chordStyle: {
                    lineStyle: {
                        width: 1,
                        color: 'rgba(128, 128, 128, 0.5)'
                    }
                }
            },
            emphasis: {
                lineStyle: {
                    width: 1,
                    color: 'rgba(128, 128, 128, 0.5)'
                },
                chordStyle: {
                    lineStyle: {
                        width: 1,
                        color: 'rgba(128, 128, 128, 0.5)'
                    }
                }
            }
        }
    },

    gauge: {
        startAngle: 225,
        endAngle: -45,
        axisLine: {            // 座標軸線
            show: true,        // 默認顯示，屬性show控制顯示與否
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
                width: 8
            }
        },
        axisTick: {            // 座標軸小標記
            splitNumber: 10,   // 每份split細分多少段
            length: 12,        // 屬性length控制線長
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: 'auto'
            }
        },
        axisLabel: {           // 座標軸文本標籤，詳見axis.axisLabel
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: 'auto'
            }
        },
        splitLine: {           // 分隔線
            length: 18,         // 屬性length控制線長
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: 'auto'
            }
        },
        pointer: {
            length: '90%',
            color: 'auto'
        },
        title: {
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: '#333'
            }
        },
        detail: {
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: 'auto'
            }
        }
    },

    textStyle: {
        fontFamily: '微軟雅黑, Arial, Verdana, sans-serif'
    }
};

這樣看代碼就應該很清楚了，的確就是一些樣式的定義。異步

皮膚咱們定義好了，那麼咱們接下來要如何應用到圖表中去呢？針對這樣一個問題，ECharts圖表組件給咱們提供了一個方法init(dom,[theme]) 和setTheme(theme)方法函數

名稱	參數	描述
{ECharts}init	{dom} dom, {string \| Object =}theme	初始化接口，返回ECharts實例，其中dom爲圖表所在節點，theme爲可選的主題，內置主題（暫無）直接傳入名稱，自定義擴展主題可傳入主題對象

從上方的方法描述看不難看出咱們要應用皮膚至圖表內就須要經過這個方法接口去實現。工具

1. //圖表對象渲染和皮膚的應用

2. myChart = ec.init(document.getElementById('main'), theme);

這樣咱們的皮膚配置就應用到圖表對象中去了，只要咱們爲其設置好數據便可完美呈現出來了的。字體

完整示例代碼以下所示：ui

<!DOCTYPE html>
<html>
<head runat="server">
    <title>ECharts圖表組件主題（皮膚）的應用示例 || www.stepday.com</title>
    <meta charset="utf-8" />
    <script src="www/js/esl.js"></script>
    <script src="www/js/echarts.js" type="text/javascript"></script>
</head>
<body>
    <!--定義頁面圖表容器-->
    <!-- 必須制定容器的大小（height、width） -->
    <div id="main" style="height: 400px; width:500px; border: 1px solid #ccc; padding: 10px;">
    </div>
    <script type="text/javascript" language="javascript">
        // Step:4 require echarts and use it in the callback.
        // Step:4 動態加載echarts而後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
        require(
        [
            'echarts',
            'echarts/chart/line' //按需加載圖表關於線性圖、折線圖的部分
        ],
        DrawEChart //異步加載的回調函數繪製圖表
        );

        var myChart;

        //建立ECharts圖表方法
        function DrawEChart(ec) {
            //定義一套綠色的皮膚
            var theme = {
                // 默認色板
                color: [
        '#408829', '#68a54a', '#a9cba2', '#86b379',
        '#397b29', '#8abb6f', '#759c6a', '#bfd3b7'
    ],

                // 圖表標題
                title: {
                    itemGap: 8,
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#408829'
                    }
                },

                // 值域
                dataRange: {
                    color: ['#1f610a', '#97b58d']
                },

                // 工具箱
                toolbox: {
                    color: ['#408829', '#408829', '#408829', '#408829']
                },

                // 提示框
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    axisPointer: {            // 座標軸指示器，座標軸觸發有效
                        type: 'line',         // 默認爲直線，可選爲：'line' | 'shadow'
                        lineStyle: {          // 直線指示器樣式設置
                            color: '#408829',
                            type: 'dashed'
                        },
                        crossStyle: {
                            color: '#408829'
                        },
                        shadowStyle: {                     // 陰影指示器樣式設置
                            color: 'rgba(200,200,200,0.3)'
                        }
                    }
                },

                // 區域縮放控制器
                dataZoom: {
                    dataBackgroundColor: '#eee',            // 數據背景顏色
                    fillerColor: 'rgba(64,136,41,0.2)',   // 填充顏色
                    handleColor: '#408829'     // 手柄顏色
                },

                grid: {
                    borderWidth: 0
                },

                // 類目軸
                categoryAxis: {
                    axisLine: {            // 座標軸線
                        lineStyle: {       // 屬性lineStyle控制線條樣式
                            color: '#408829'
                        }
                    },
                    splitLine: {           // 分隔線
                        lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                            color: ['#eee']
                        }
                    }
                },

                // 數值型座標軸默認參數
                valueAxis: {
                    axisLine: {            // 座標軸線
                        lineStyle: {       // 屬性lineStyle控制線條樣式
                            color: '#408829'
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                        }
                    },
                    splitLine: {           // 分隔線
                        lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                            color: ['#eee']
                        }
                    }
                },

                timeline: {
                    lineStyle: {
                        color: '#408829'
                    },
                    controlStyle: {
                        normal: { color: '#408829' },
                        emphasis: { color: '#408829' }
                    }
                },

                // K線圖默認參數
                k: {
                    itemStyle: {
                        normal: {
                            color: '#68a54a',          // 陽線填充顏色
                            color0: '#a9cba2',      // 陰線填充顏色
                            lineStyle: {
                                width: 1,
                                color: '#408829',   // 陽線邊框顏色
                                color0: '#86b379'   // 陰線邊框顏色
                            }
                        }
                    }
                },

                map: {
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                color: '#ddd'
                            },
                            label: {
                                textStyle: {
                                    color: '#c12e34'
                                }
                            }
                        },
                        emphasis: {                 // 也是選中樣式
                            areaStyle: {
                                color: '#99d2dd'
                            },
                            label: {
                                textStyle: {
                                    color: '#c12e34'
                                }
                            }
                        }
                    }
                },

                force: {
                    itemStyle: {
                        normal: {
                            linkStyle: {
                                strokeColor: '#408829'
                            }
                        }
                    }
                },

                chord: {
                    padding: 4,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(128, 128, 128, 0.5)'
                            },
                            chordStyle: {
                                lineStyle: {
                                    width: 1,
                                    color: 'rgba(128, 128, 128, 0.5)'
                                }
                            }
                        },
                        emphasis: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(128, 128, 128, 0.5)'
                            },
                            chordStyle: {
                                lineStyle: {
                                    width: 1,
                                    color: 'rgba(128, 128, 128, 0.5)'
                                }
                            }
                        }
                    }
                },

                gauge: {
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {            // 座標軸線
                        show: true,        // 默認顯示，屬性show控制顯示與否
                        lineStyle: {       // 屬性lineStyle控制線條樣式
                            color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
                            width: 8
                        }
                    },
                    axisTick: {            // 座標軸小標記
                        splitNumber: 10,   // 每份split細分多少段
                        length: 12,        // 屬性length控制線長
                        lineStyle: {       // 屬性lineStyle控制線條樣式
                            color: 'auto'
                        }
                    },
                    axisLabel: {           // 座標軸文本標籤，詳見axis.axisLabel
                        textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔線
                        length: 18,         // 屬性length控制線長
                        lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        length: '90%',
                        color: 'auto'
                    },
                    title: {
                        textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                            color: '#333'
                        }
                    },
                    detail: {
                        textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                            color: 'auto'
                        }
                    }
                },

                textStyle: {
                    fontFamily: '微軟雅黑, Arial, Verdana, sans-serif'
                }
            };

            //定義圖表options
            var options = {
                //圖表標題
                title: {
                    text: "ECharts圖表皮膚的應用", //正標題
                    link: "http://www.stepday.com", //正標題連接 點擊可在新窗口中打開
                    x: "center", //標題水平方向位置
                    subtext: "From:http://www.stepday.com", //副標題
                    sublink: "http://www.stepday.com", //副標題連接
                    //正標題樣式
                    textStyle: {
                        fontSize: 24
                    },
                    //副標題樣式
                    subtextStyle: {
                        fontSize: 12,
                        color: "red"
                    }
                },
                //數據提示框配置
                tooltip: {
                    trigger: 'axis' //觸發類型，默認數據觸發，見下圖，可選爲：'item' | 'axis' 其實就是是否共享提示框
                },
                //圖例配置
                legend: {
                    data: ['蒸發量', '降水量'], //這裏須要與series內的每一組數據的name值保持一致
                    y: "bottom"
                },
                //工具箱配置
                toolbox: {
                    show: true, //是否顯示工具箱
                    feature: {
                        mark: false, // 輔助線標誌，上圖icon左數1/2/3，分別是啓用，刪除上一條，刪除所有
                        dataView: { readOnly: false }, // 數據視圖，上圖icon左數8，打開數據視圖
                        magicType: ['line', 'bar'],      // 圖表類型切換，當前僅支持直角系下的折線圖、柱狀圖轉換，上圖icon左數6/7，分別是切換折線圖，切換柱形圖
                        restore: true, // 還原，復位原始圖表，上圖icon左數9，還原
                        saveAsImage: true  // 保存爲圖片，上圖icon左數10，保存
                    }
                },
                calculable: true,
                //軸配置
                xAxis: [
             {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                 name: "月份"
             }
         ],
                //Y軸配置
                yAxis: [
             {
                 type: 'value',
                 splitArea: { show: true },
                 name: "數值"
             }
         ],
                //圖表Series數據序列配置
                series: [
             {
                 name: '蒸發量',
                 type: 'line',
                 data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
             },
             {
                 name: '降水量',
                 type: 'line',
                 data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
             }
         ]
            };

            //圖表對象渲染和皮膚的應用
            myChart = ec.init(document.getElementById('main'), theme);
            myChart.setOption(options);
        }
    </script>
</body>
</html>

能夠將上方的HTML代碼複製出來，而後下載下面的兩個js修改一下內部js引入地址便可看到被綠色渲染的圖表了的。

一、http://echarts.baidu.com/doc/asset/js/esl/esl.js

二、http://echarts.baidu.com/doc/example/www/js/echarts.js

擴充話題：

咱們如何將其皮膚作成一個下拉切換的形式呢？其實猶如官方的例子同樣，須要將每一種皮膚設置爲一個js文件，切換的時候去執行這個js文件，js文件內部包含了皮膚渲染這個動做的。

myChart.setTheme(curTheme);