ECharts——（一）主题的下载与使用

峰兄兄
851 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

很多东西感觉自己会用，但其实只是会一点皮毛，ECharts就是其中之一。这个可视化库本身用起来就非常简单，所以好像也没仔细学习，会画个折线图、柱状图、饼状图，能展示一下数据就行了。第一次用ECharts画图好像也是网上查一查，直接改别人的代码，能实现功能就行，也没有仔细探究过。

这两天领导让做一个小功能，就是用SNMP协议获取交换机各个接口的流量，然后实时展现在页面上。做起来确实不难，但是领导看完后嫌丑，给我看了几个竞品的图，让我做成人家的样子。

说实话审美这个东西，审还可以，但是要自己设计，没有专业知识还真不行。柱子的颜色、图例的颜色、背景色等等换来换去，越换越丑。想在配色网站上试试，又没有现成的柱状图能直接看到效果，最后干脆用取色器做了个和竞品一毛一样的总算交差了。

回来想着仔细学一学ECharts才发现有在线的主题编辑器，直接就能看到应用到各种图中的效果，而且试好了之后可以直接下载使用，以前居然都不知道。

正文

我的ECharts版本是5.3.3，jQuery版本是3.6.1

一、主题的编辑与下载

打开主题编辑器的页面，在默认方案处有12种预设的主题可以直接选择

直接点击主题就能在右侧看到预览

在默认方案的下面是该主题下各种具体的设置，比如点开基本配置会看到如下图所示。可以对其中的样式进行更改，形成自己的定制样式。

主题编辑完成后可在功能模块进行下载

下载的主题文件有两种格式：js和json，选择想要的版本，点下载就行。或者也可以点复制然后粘贴到自己的文件中

二、主题文件的使用

（一）内置主题

ECharts内置了两个主题，默认的是白底、蓝色柱，在初始化时直接指定dark，可以切换到内置的暗主题，是深蓝色的北京、浅蓝的柱。

var myChart1 = echarts.init(document.getElementById('test1'));

var myChart2 = echarts.init(document.getElementById('test2'), 'dark');

（二）js文件

如果是js文件，直接引入使用即可

<script src="./js/theme_js/vintage.js"></script>

初始化时指定主题名称

var myChart3 = echarts.init(document.getElementById('test3'), 'vintage');

（三）JSON文件

如果是json文件，则需要进行加载和注册

可以选择你喜欢的方式加载下载下来的主题json文件，然后通过 echarts.registerTheme('主题名称', 主题JSON对象)来注册主题。

这里要注意，官方文档中给出的是如下的代码：

$.getJSON('xxx/xxx/themeName.json', function(themeJSON) {
  echarts.registerTheme('vintage', JSON.parse(themeJSON));
  var chart = echarts.init(dom, 'vintage');
});

但是在我自己尝试的时候发现按照这样写并不成功，对于返回的数据themeJSON，它已经是JSON对象，不需要再调用JSON.parse()进行转换。我不知道这里是贡献这篇文档的作者出错了还是因为jQuery版本的问题，我的jQuery版本是3.6.1

$.getJSON('js/theme_json/purple-passion.json', function(themeJSON) {
  echarts.registerTheme('purple-passion', themeJSON);
  var myChart5 = echarts.init(document.getElementById('test5'), 'purple-passion');
  myChart5.setOption(option);
});

上述代码执行后，效果为

结束语

知道这个功能，以后就不用担心自己的图丑了，还可以实现一键换肤功能。

avatar
文章
阅读
粉丝