echarts 主题颜色更换
ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。
目前主题下载提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本,可以将 JS 主题代码保存一个 主题名.js 文件,然后在 HTML 中引用该文件,最后在代码中使用该主题。
比如上图中我们选中了一个主题,将 JS 代码保存为 wonderland.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'],
...
}]
}
另外,我们也可以在官方的主题编辑器中选择自己喜欢的主题下载。
https://echarts.apache.org/zh/theme-builder.html
蓦然、回首,那人就在灯火阑珊处