ECharts系列:堆叠面积图的使用和用到的配置项的说明

---

一、npm安装 ECharts

npm install echarts --save

二、引入 ECharts

import * as echarts from "echarts";

三、初始化图表

main其实就是一个id为main的div元素

var myChart = echarts.init(document.getElementById("main"));

四、设置配置项

{
    "legend": {
        "data": [
            "华东",
            "华南",
            "华北",
            "西部",
            "其他"
        ]
    },
    "yAxis": [
        {
            "type": "value"
        }
    ],
    "xAxis": [
        {
            "data": [
                "2017-12-27",
                "2017-12-28",
                "2017-12-29",
                "2017-12-30",
                "2017-12-31",
                "2018-1-1"
            ],
            "boundaryGap": false
        }
    ],
    "series": [
        {
            "name": "华东",
            "type": "line",
            "stack": "总量",
            "areaStyle": {
                "normal": {}
            },
            "data": [
                2999,
                3111,
                4100,
                3565,
                3528,
                6000
            ]
        },
        {
            "name": "华南",
            "type": "line",
            "stack": "总量",
            "areaStyle": {
                "normal": {}
            },
            "data": [
                5090,
                2500,
                3400,
                6000,
                6400,
                7800
            ]
        },
        {
            "name": "华北",
            "type": "line",
            "stack": "总量",
            "areaStyle": {
                "normal": {}
            },
            "data": [
                6888,
                4000,
                8010,
                12321,
                13928,
                12984
            ]
        },
        {
            "name": "西部",
            "type": "line",
            "stack": "总量",
            "areaStyle": {
                "normal": {}
            },
            "data": [
                9991,
                4130,
                7777,
                12903,
                13098,
                14028
            ]
        },
        {
            "name": "其他",
            "type": "line",
            "stack": "总量",
            "areaStyle": {
                "normal": {}
            },
            "data": [
                15212,
                5800,
                10241,
                14821,
                15982,
                14091
            ]
        }
    ],
    "title": {
        "text": "用户来源"
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "cross",
            "label": {
                "backgroundColor": "#E9EEF3"
            }
        }
    },
    "grid": {
        "left": "3%",
        "right": "4%",
        "bottom": "3%",
        "containLabel": true
    }
}

五、配置项具体说明

1、title

1.1、text = ""

string
主标题文本，支持使用 \n 换行。

2、tooltip

2.1、trigger = ‘item’

string
触发类型。

可选：

• ‘item’
  数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
• ‘axis’
  坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
  在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
• ‘none’
  什么都不触发。

2.2、axisPointer

Object
坐标轴指示器配置项。

2.2.1、type = ‘line’

string
指示器类型。

可选

• ‘line’ 直线指示器
• ‘shadow’ 阴影指示器
• ‘none’ 无指示器
• ‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

2.2.2、label

Object
坐标轴指示器的文本标签。
所有属性
{ show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }

上面配置中只用到backgroundColor

3、grid

3.1、left = '10%'

string / number
grid 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’，‘center’，‘right’。

如果 left 的值为’left’，‘center’，‘right’，组件会根据相应的位置自动对齐。

3.2、right = '10%'

string / number
grid 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。

3.3、bottom = 60

string / number
grid 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。

3.4、containLabel

boolean
grid 区域是否包含坐标轴的刻度标签。

containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

4、xAxis

4.1、boundaryGap

boolean、Array
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：

boundaryGap: ["20%", "20%"]

4.2、data

Array
类目数据，在类目轴（type: ‘category’）中有效。

如果没有设置 type，但是设置了 xAxis.data，则认为 type 是 ‘category’。

如果设置了 type 是 ‘category’，但没有设置 xAxis.data，则 xAxis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，xAxis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

本文只用到了上述的第一种。

5、yAxis

5.1、type = 'value'

string
坐标轴类型。

可选：

• ‘value’ 数值轴，适用于连续数据。
• ‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。
• ‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
• ‘log’ 对数轴。适用于对数数据。

6、legend

图例组件

6.1、data

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name，图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记

7、series

7.1、series-line. type = 'line'

string

7.2、series-line. name

string
系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

7.3、series-line. stack

string
数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。

注：目前 stack 只支持堆叠于 'value' 和 'log' 类型的类目轴上，不支持 'time' 和 'category' 类型的类目轴。

7.4、series-line. areaStyle

Object

区域填充样式。设置后显示成区域面积图。

normal属性未在API中找到具体说明，请知道的小伙伴在评论区告知，谢谢

7.5、series-line. data

Array
系列中的数据内容数组。数组项通常为具体的数据项。

注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

这篇好文章是转载于：学新通技术网