0
点赞
收藏
分享

微信扫一扫

Echarts主题构建工具的使用

香小蕉 2022-01-18 阅读 105

在这里插入图片描述
Echarts自带丰富的主题配色,对于有独立的UI设计,主题的应用范围不是很广泛,但是官方的配色还是具有很大的参考价值的。

传送门:https://echarts.apache.org/zh/theme-builder.html

  1. 下载或复制以下的主题保存至 *.js 文件;
  2. 将该文件在 HTML 中引用;
  3. 使用 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

举报

相关推荐

0 条评论