主题是ECharts图表的风格抽象，用于统一多个图表的风格样式。 为了顺应不同的绘图风格需求，需要下载ECharts官方提供default、infographic、shine、roma、macarons、vintage等主题，并利用某大学各专业招生数据实现动态主题的切换。
ECharts是一款利用原生JS编写的图表类库，ECharts为打造一款数据可视化平台提供了良好的图表支持。 在前端开发中，站点样式主题CSS是与样式组件的CSS样式分离的，这样可以根据不同的需求改变站点风格，如春节、中秋等节假日都需要改变站点风格。 顺应这种需求，百度ECharts团队提供了多种风格的主题。
切换ECharts 4.x主题的步骤如下。 （1）下载主题文件。在使用主题之前需要下载主题.js文件（在ECharts官网上下载官方提供的主题，如macarons.js，或自定义主题）。 （2）引用主题文件。将下载的主题.js文件引用到HTML页面中。注意，如果ECharts主题中需要使用到jQuery，那么还应该再在页面中引用jQuery的.js文件。 （3）指定主题名。在ECharts对象初始化时，通过init的第2个参数指定需要引入的主题名。如var myChart=echarts.init(document.getElementById('main'),主题名)。
利用某大学各专业招生情况绘制ECharts的shine主题柱状图，如图所示 由图可知，图形使用了3种不同的 灰度表示每个专业分别在2018年、2019年、2020年的招生情况。
在ECharts 4.x的shine主题柱状图代码中，首先引入主题的.js文件，同时，由于主题需要使用jQuery，所以也需要引入jquery-3.3.1.js文件。 最后，使用jQuery语句$(this).val()获得主题名称，在初始化ECharts实例时，通过init的第2个参数指定需要引入的主题。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8">
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src='js/roma.js'></script>
<script src='js/macarons.js'></script>
<script src='js/roma.js'></script>
<script src='js/shine.js'></script>
<script src='js/vintage.js'></script>
<script src='js/infographic.js'></script>
</head>
<body>
<div id="themeArea"><label>ECharts主题切换：</label></div>
<select name="" id="sel">
<option value="dark">dark</option>
<option value="macarons">macarons</option>
<option value="infographic">infographic</option>
<option value="roma">roma</option>
<option value="shine">shine</option>
<option value="vintage">vintage</option>
</select>
<div id='main' style="height:399px;"></div>
</body>
</html>
<script>
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'dark');
//指定图表的配置项和数据
var option = { //指定图表的配置项和数据
//backgroundColor:'WhiteSmoke'， //当设置了color和背景色后，主题的背景色无效
title: { text: '某大学各专业招生情况分析', left: 60, top: 10 },
tooltip: {}, //配置提示框组件
legend: { left: 320, top: 10, data: ['2018', '2019', '2020'] }, //配置图例组件
xAxis: { data: ["大数据", "云计算", "人工智能", "网络工程", "移动开发", "软件开发"] },
grid: { show: true }, //配置网格组件
yAxis: {},
series: [ //配置数据系列
{ name: '2018', type: 'bar', data: [122, 55, 44, 56, 110, 222] },
{ name: '2019', type: 'bar', data: [315, 98, 122, 96, 115, 278] },
{ name: '2020', type: 'bar', data: [382, 123, 222, 94, 125, 369] },
]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$('#sel').change(function () {
myChart.dispose();
let Theme = $(this).val();
//基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById('main'), Theme);
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
});
</script>
