Echarts学习笔记之样式篇

ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。

1. 颜色设置

1.1 颜色主题

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。
echarts 4.x+版本除了默认主题外，内置两大主题，“light”和“dark”，可通过如下设置：

var chart = echarts.init(dom, 'light');

除此之外，可以通过echarts主题编辑器自定义主题。大致流程为：自定义主题 > 导出对应文件 > 引入 > 使用。

1.2 背景颜色设置

背景颜色为全局设置，在config中配置，默认无背景颜色，其值可以为rgb(a)也可以为十六进制的颜色值，也可以自动实现渐变或者纹理填充。

setOption({
    backgroundColor: '#2c343c'
})

1.3 调色盘

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531', '#2f4554', ...'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66', '#759aa0', ...]
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
       color: ['#dd6b66', '#759aa0', ...]
        ...
    }]
}

2. 直接的样式设置和高亮样式（emphasis）

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphsis 中的结构，和普通样式的结构相同。

// echarts4.x+版本
option = {
    series: {
        type: 'scatter',

        // 普通样式。
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        label: {
            show: true,
            // 标签的文字。
            formatter: 'This is a normal label.'
        },

        // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                color: 'blue'
            },
            label: {
                show: true,
                // 高亮时标签的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

3. visualMap 组件设定样式

数据的视觉映射：数据可视化是 数据 到 视觉元素 的映射过程。

option = {
    visualMap: [
        {
            type: '',           // 可选值：‘continuous’（连续型），‘piecewise’（分段型）
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四个维度（即 value[3]）被映射
            seriesIndex: 4,     // 对第四个系列进行映射。
            inRange: {          // 选中范围中的视觉配置
                color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
                                                    // 数据最小值映射到'blue'上，
                                                    // 最大值映射到'red'上，
                                                    // 其余自动线性计算。
                symbolSize: [30, 100]               // 定义了图形尺寸的映射范围，
                                                    // 数据最小值映射到30上，
                                                    // 最大值映射到100上，
                                                    // 其余自动线性计算。
            },
            outOfRange: {       // 选中范围外的视觉配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};