Echarts自带丰富的主题配色,对于有独立的UI设计,主题的应用范围不是很广泛,但是官方的配色还是具有很大的参考价值的。
传送门:https://echarts.apache.org/zh/theme-builder.html
- 下载或复制以下的主题保存至 *.js 文件;
- 将该文件在 HTML 中引用;
- 使用 echarts.init(dom,
‘westeros’) 创建图表,第二个参数即为 *.js 文件中注册的主题名字。
代码展示:
引入macarons.js主题文件
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--核心Echarts图表封装库-->
<script type="text/javascript" src="js/echarts5.2.2.js"></script>
<script type="text/javascript" src="js/macarons.js"></script>
<script type="text/javascript" src="js/lockvisual.js"></script>
<script type="text/javascript" src="js/lockruns.js"></script>
初始化渲染注册
var myChart = echarts.init(document.getElementById(id), 'macarons');
@lockdata.cn