Echarts主题构建工具的使用

简介: Echarts主题构建工具的使用


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

相关文章
33-Vue之ECharts高级-设置主题
33-Vue之ECharts高级-设置主题
|
JSON JavaScript 数据库
echarts引用自定义主题
本文主要分享了如何使用ECharts官方提供的主题以及如何引入自定义的主题;
506 0
|
JavaScript
国庆总结:echarts自定义颜色主题,保证你看的明明白白
国庆总结:echarts自定义颜色主题,保证你看的明明白白
国庆总结:echarts自定义颜色主题,保证你看的明明白白
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1207 1
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
1943 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
3401 0
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
631 1
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
153 1

热门文章

最新文章