引用主题,在官网下载
<script type="text/javascript" src="../theme/shine.js"></script>
<script type="text/javascript" src="../theme/macarons.js"></script>
<script type="text/javascript" src="../theme/vintage.js"></script>
html代码
<div id="themeArea">
<label>主题更换:</label>
<label>
<input name="theme" type="radio" value="vuntage" checked="checked"/>默认</label>
<label>
<input name="theme" type="radio" value="macarons" />马卡龙色
</label>
<label>
<input name="theme" type="radio" value="shine" />亮色
</label>
</div>
#JS 代码
$(document).ready(function () {
...以上为echarts基础设置
$("#themeArea").click(function() {
var val=$('input:radio[name="theme"]:checked').val();
if(val==null){
return false;
}
else{
myChart.dispose();
// 基于准备好的dom,初始化echarts实例
// chartArea 是你要更改主题的图标div id名称
myChart = echarts.init(document.getElementById('chartArea'),val);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
});
```
#要点
1、HTML页面主题 div 的id名称要与JS页面的 点击事件id一致
2、HTML页面 input 的 value 需要跟主题名称一致