Echarts - 引入自定义主题方案（Vue配置示例）

秒速五厘米 2022-09-01 12:58 376阅读 0赞

## 前言 ##

> 很多时候，我们不会直接使用 `Echarts` 默认的样式，而是自家设计师有一套主题样式。

通过每个配置项手动去改样式，显然不是明智之举，不仅代码冗余，还浪费时间。

`Echarts` 允许你通过官网的 **主题构建工具** 傻瓜式调配样式，最后导出配置文件在项目中引用。

## 一、第一步 ##

> `Echarts` 主题构建工具传送门：[https://echarts.apache.org/zh/theme-builder.html][https_echarts.apache.org_zh_theme-builder.html]

如下图所示，便是主题构建工具，你可以根据需求进行更改样式，制定完毕后请继续阅读。  
![在这里插入图片描述][505831412b5f4b3b8dac80b4d9abd048.png]

## 二、第二步 ##

首先点击 **下载主题** 按钮。  
![在这里插入图片描述][d24bbe8ddd174cba9e3a3000d5255dbe.png]  
弹出如下图所示对话框，选择 `JSON 版本`，点击下载。  
![在这里插入图片描述][b888fbb07ca043f5922bfc693605784d.png]  
将得到的 `JSON` 文件，改个名字，保留起来后面用。

## 三、第三步 ##

> 接下来的所有操作步骤，就是在项目中使用了。  
> **注意：我这里使用 Vue 项目作为演示，其他框架类似。**

首先将刚刚下载到的 `JSON` 文件，复制或剪切到项目中的任意文件夹。

我这里是将文件移动到了 `src > utils > theme.json` ，起名为 `theme.json`。

![在这里插入图片描述][470f1a75f55a49a8a452acde5f0896b9.png]

## 四、第四步 ##

> 注意：所有路径及命名全部都以您自己的为准，以下全是示例。

此时，打开需要绘制图表的 `*.vue` 文件，需要以下 4 小步骤完成。

一、引入 `echarts`，写入以下代码：

import * as ets from 'echarts'

二、引入主题配置文件 `theme.json` ，写入以下代码：

// json 后缀不可省略
    import theme from '../../utils/theme.json'

三、绘制图表，写入以下代码：

// 注册主题(参数1: 使用时的别名 参数2: 主题配置文件)
    ets.registerTheme('theme', theme)
    
    // 初始化图表
    var myChart = ets.init(document.getElementById('demo'), theme)
    myChart.setOption({ 
        // ...
    })

## Vue 完整配置示例 ##

如果你想了解注册主题，请点击： [registerTheme 注册主题API][registerTheme _API]，相关文档。

<template>
      <div>
          
          <div id="demo"></div>
          
      </div>
    </template>
    
    <script> // 引入echarts import * as ets from 'echarts' // 引入主题配置文件 import theme from '../../utils/theme.json' export default { mounted(){ // 注册主题(参数1: 使用时的别名 参数2: 主题配置文件) ets.registerTheme('theme', theme) // 初始化图表 var myChart = ets.init(document.getElementById('demo'), theme) myChart.setOption({ //配置项 xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: { } }] }) } } </script>
    
    <style> #demo{ height: 300px; width: 800px; } </style>

[https_echarts.apache.org_zh_theme-builder.html]: https://echarts.apache.org/zh/theme-builder.html
[505831412b5f4b3b8dac80b4d9abd048.png]: /images/20220829/b24d09af19e14ee88c0f13f61d9ac925.png
[d24bbe8ddd174cba9e3a3000d5255dbe.png]: /images/20220829/1f1c4b3e5d144fb882cc144695c4fa8a.png
[b888fbb07ca043f5922bfc693605784d.png]: /images/20220829/089eaa129da646d3b6b4bb611ab3f049.png
[470f1a75f55a49a8a452acde5f0896b9.png]: /images/20220829/1597a00c065146588d8fa91ed364eb75.png
[registerTheme _API]: https://echarts.apache.org/zh/api.html#echarts.registerTheme