echarts主题配置

主题.jpg

前言

ECharts 是我们在项目中经常使用的数据可视化插件，默认的主题样式基本能满足我们的需求，奈何公司的 UI 小妹妹是一个极其负责的讲究人，对颜色样式的追求是极致的 ，幸亏echarts官方为我们提供了主题配置工具，让我们轻松搞定各种样式配置。废话不多说，接下来随我一起来搞定echarts的主题配置吧……

echarts主题构建工具

首先，我们打开echarts的主题构建工具，如图：

1.jpg

在构建工具中有十几套主题供我们选择

2.jpg

如果这都满足不了你的需求，那么就自己搭配各种颜色，echarts为我们提供了基本配置、视觉、坐标轴、图例、提示框等等各个模块的样式的配置，可以说相当丰富了

配置模块

3.jpg

配置项

4.jpg

配置文件下载

主题样式配置完毕后我们需要将配置文件下载或者导出来，点击页面左上角的下载或者导出echarts很贴心的为我们提供了 ".js" ".json" 两种格式的文件，本文将就js格式的配置文件为大家演示

5.jpg

引入配置文件

在项目中引进下载好的配置文件

使用

只需要我们在初始化echats时指定主题名称即可，主题名称就是主题的文件名，

 // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'macarons');

    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '柱状图',
            subtext: '主题配置'
        },
        ...
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

想要改变主题样式时，只需引入不同的主题文件，并在初始化的时候改变相应的主题名字即可，效果如下：

6.jpg

7.jpg