转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

一、什么是ECharts图表的皮肤（主题）？

针对这个问题我只能这样回答，ECharts图表的主题（皮肤）就犹如人的衣服一样，是用来衬托和渲染主体，使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解，皮肤其实就是一些样式的定义集合。

图表有很多部分组成，比如：标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式，形如：字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。

二、如何将其皮肤（主题）应用到ECharts图表上去？

犹如一件衣服我们设计和裁剪缝制好了，那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此，这里我们定义了一套纯绿色的皮肤option集合，示例代码如下所示：

//定义一套绿色的皮肤
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为可选的主题，内置主题（暂无）直接传入名称，自定义扩展主题可传入主题对象

从上方的方法描述看不难看出我们要应用皮肤至图表内就需要通过这个方法接口去实现。

view sourceprint?

1.//图表对象渲染和皮肤的应用

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

这样我们的皮肤配置就应用到图表对象中去了，只要我们为其设置好数据即可完美呈现出来了的。

完整示例代码如下所示：

<!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引入地址即可看到被绿色渲染的图表了的。

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

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

扩充话题：

我们如何将其皮肤做成一个下拉切换的形式呢？其实犹如官方的例子一样，需要将每一种皮肤设置为一个js文件，切换的时候去执行这个js文件，js文件内部包含了皮肤渲染这个动作的。

myChart.setTheme(curTheme);
时间： 2024-08-27 00:20:21

转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？的相关文章

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在iOS上的Health即健康应用有哪些功能等.本节将针对这些问题进行讲解. HealthKit框架体系 对于一类应用程序来说,要进行开发,首先需要熟悉它的框架体系,即类.以下我们针对HealthKit中所使用的类进行了总结,如表1-1所示. 1-1  HealthKit框架体系 类 功能 NSObje

?HealthKit开发快速入门教程之HealthKit数据的操作

HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道一天走的步数.本章将主要讲解HealthKit数据构成的方式,以及如何规范的表达一个数据. 2.1  数据的操作 在HealthKit中,数据都是与单位和值组成的,如图2.1所示.此图为一个睡眠分析的截图.在此图中59m就代表了一个数据.其中m为单位,59为基于单位的数值.本节将讲解数据的创建.判断

HealthKit开发快速入门教程之HealthKit开发概述HealthKit简介

?HealthKit开发快速入门教程之HealthKit开发概述简介? 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为"Healthkit".本章将主要讲解HealthKit的特点.经典应用以及在开发HealthKit时的准备工作. HealthKit简介 HealthKit就是可以收集和分析用户的健康数据移动应用平台.本节将主要讲解HealthKit的特点.经典应用. HealthKit特点 本小节将主要

HealthKit开发快速入门教程之HealthKit开发概述简介

HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“Healthkit”.本章将主要讲解HealthKit的特点.经典应用以及在开发HealthKit时的准备工作. HealthKit简介 HealthKit就是可以收集和分析用户的健康数据移动应用平台.本节将主要讲解HealthKit的特点.经典应用. HealthKit特点 本小节将主要讲解Healt

nodejs入门教程之http的get和request简介及应用

nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块,我们可以看下nodejs官方文档.关于http模块,有兴趣的可以研究一下node的源码.http模块功能是很强大的,今天主要介绍他的get和request方法! GET简介 我们首先来运行一下下面的代码 const http = require("http") http.get('htt

angularjs2.0 五分钟入门教程之typescript版本

貌似没看到一个中文的讲解ng2入门五分钟教程,所以亲自整理了下整个入门教程的步骤,希望对后来者学习有所帮助.PS:我在win7中码的. 新建一个project目录,以下所有操作都在这个目录下进行. 1.安装tsd编译typescript代码命令工具 $ npm install -g [email protected]^0.6.0 2.安装angular2,es6-promiserx,rx,rx-lite $ tsd install angular2 es6-promise rx rx-lite

webpack入门教程之Hello webpack(一)

webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装webpack 2.如何使用webpack 3.如何使用loaders 4.如何使用开发服务器 话不多说,马上开启我们的webpack之旅...... 一.安装webpack(依赖nodeJs环境,nodejs环境的搭建不在此赘述) npm install webpack -g 二. Hello W

git 入门教程之1分钟快速了解 git

git 入门教程 git 是分布式版本控制系统,是文本文档管理的利器,是帮助你管理文件动态的好帮手. 如果你曾经手动管理过文档,一定有这样的经历,比如你正在编辑文档,想删除某段落,又担心不久后可能会恢复,此时你可能会先备份然后再删除,或者想要修改某段落,几经修改后发现还是最初的比较好,这是就哭笑不得了... 从最初的新建文档,经过反反复复的修改,最终定稿文档的过程极其繁琐冗长,这就是手动式管理文档的痛点. 如果有这么一种工具,能帮我自动记录每次文档的改动,想要查看文档变更详情只需要打开软件就能一

gitbook 入门教程之 gitbook 简介

gitBook 是一个基于node.js的命令行工具,使用 github/git 和 markdown/asciiDoc 构建精美的电子书. gitbook 支持输出静态网页和电子书等多种格式,其中默认输出静态网页格式. gitbook 不仅支持本地构建电子书,而且可以托管在 gitbook 官网上,并享受在线发布和托管图书的便利,完整的文档请参考 [gitbook 新版文档(需FQ)][docs.gitbook.com] 或 [gitbook 旧版文档(不需FQ)][toolchain.git