图表标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
title: {
    text: 'click',
    subtext: 'click it',
    left: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                                // 'center' ¦ 'left' ¦ 'right'
                                // ¦ {number}（x坐标，单位px）
    top: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                // 'top' ¦ 'bottom' ¦ 'center'
                                // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 标题边框颜色
    borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'          // 主标题文字颜色
    },
    subtextStyle: {
        color: '#aaa'          // 副标题文字颜色
    }
}

图例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
legend: {
    type: 'plain',              //'plain'：普通图例。缺省就是普通图例。
                                //'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                // 'horizontal' ¦ 'vertical'

    left: 'center',               // 水平安放位置，默认为全图居中，可选为：
                                // 'center' ¦ 'left' ¦ 'right'
                                // ¦ {number}（x坐标，单位px）

    top: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                // 'top' ¦ 'bottom' ¦ 'center'
                                // ¦ {number}（y坐标，单位px）
    data: ['bar', 'bar2'],      //图例内容
        //legend.data[i].icon string  图例项的 icon。
        //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        //可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 图例边框颜色
    borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 14,            // 图例图形高度
    textStyle: {
        color: '#333'          // 图例文字颜色
    }
}

visualMap

visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容，会自动转换成 visualMap 配置项。在option中推荐写 visualMap 而非 dataRange。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
visualMap: {
    type: 'continuous',         
    orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
                                // 'horizontal' ¦ 'vertical'
    left: 'left',                 // 水平安放位置，默认为全图左对齐，可选为：
                                // 'center' ¦ 'left' ¦ 'right'
                                // ¦ {number}（x坐标，单位px）
    top: 'bottom',               // 垂直安放位置，默认为全图底部，可选为：
                                // 'top' ¦ 'bottom' ¦ 'center'
                                // ¦ {number}（y坐标，单位px）
    seriesIndex: 0,             //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
    min: '0',                   //指定最小值
    max: '100',                 //指定最大值
    calculable: true            //是否显示手柄
    realtime: true              //拖拽时是否实时更新
    text: ['High', 'Low'],      //两端的文本,默认为数值文本
    inRange: {
        color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
        symbolSize: [60, 200]
    },                          //定义 在选中范围中 的视觉元素
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 值域边框颜色
    borderWidth: 0,            // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 值域内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    color:['#1e90ff','#f0ffff'],//颜色 
    textStyle: {
        color: '#333'          // 值域文字颜色
    }
}

visualMap: {
    type: 'piecewise',         
    orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
                                // 'horizontal' ¦ 'vertical'
    left: 'left',                 // 水平安放位置，默认为全图左对齐，可选为：
                                // 'center' ¦ 'left' ¦ 'right'
                                // ¦ {number}（x坐标，单位px）
    top: 'bottom',               // 垂直安放位置，默认为全图底部，可选为：
                                // 'top' ¦ 'bottom' ¦ 'center'
                                // ¦ {number}（y坐标，单位px）
    seriesIndex: 0,             //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
    categories: ['优','良'],     //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。
    pieces:[
        {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
        {min: 900, max: 1500},
        {min: 310, max: 1000},
        {min: 200, max: 300},
        {min: 10, max: 200, label: '10 到 200（自定义label）'},
        {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
        {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
    ],                          //type为piecewise时用于设置每一段范围和样式
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 值域边框颜色
    borderWidth: 0,            // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 值域内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    splitNumber: 5,            // 对于连续型数据，默认为5，为0时为线性渐变,
                                //如果设置了 pieces 或者 categories，则 splitNumber 无效
    color:['#1e90ff','#f0ffff'],//颜色 
    //text:['高','低'],         // 文本，默认为数值文本
    textStyle: {
        color: '#333'          // 值域文字颜色
    }
}

工具栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
toolbox: {
    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                // 'horizontal' ¦ 'vertical'
    left: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
                                // 'center' ¦ 'left' ¦ 'right'
                                // ¦ {number}（x坐标，单位px）
    top: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                // 'top' ¦ 'bottom' ¦ 'center'
                                // ¦ {number}（y坐标，单位px）
    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
    backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
    borderColor: '#ccc',       // 工具箱边框颜色
    borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemSize: 16,              // 工具箱图形宽度
    featureImageIcon : {},     // 自定义图片icon
    showTitle: true,            //是否在鼠标 hover 的时候显示每个工具 icon 的标题
    feature:{                   //各工具配置项
        dataZoom: {
            yAxisIndex: 'none'
        },
        dataView: {readOnly: false},
        magicType: {type: ['line', 'bar']},
        restore: {},
        saveAsImage: {}
    }   
}

提示框

提示框组件可以设置在多种地方：

  • 可以设置在全局，即 tooltip
  • 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中，即 series.tooltip
  • 可以设置在系列的每个数据项中，即 series.data.tooltip
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
tooltip: {
    trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                                //'item'数据项图形触发 'axis'坐标轴触发
    showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    hideDelay: 100,            // 隐藏延迟，单位ms
    transitionDuration : 0.4,  // 动画变换时间，单位s
    backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
    borderColor: '#333',       // 提示边框颜色
    borderRadius: 4,           // 提示边框圆角，单位px，默认为4
    borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
            color: '#48b',
            width: 2,
            type: 'solid'
        },
        shadowStyle : {                       // 阴影指示器样式设置
            width: 'auto',                   // 阴影大小
            color: 'rgba(150,150,150,0.3)'  // 阴影颜色
        }
    },
    textStyle: {
        color: '#fff'
    }
}

区域缩放控制器

1
2
3
4
5
6
7
8
9
dataZoom: {
    type: 'inside',             //'inside'或'slider'
    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                // 'horizontal' ¦ 'vertical'
    backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
    dataBackgroundColor: '#eee',            // 数据背景颜色
    fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
    handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
},

网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
grid:{
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    //x 为直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比（字符串），如'50%'(显示区域横向中心)
    //y 为左上纵坐标，x2为右下横坐标，y2为右下纵坐标。
    id: 0,                            //组件ID
    show: false,                       //是否显示直角坐标系网格
    left: 10%,                          //grid组件距离容器左侧的距离，默认10%
    //left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
    top: 60                             //默认60
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
}

xAxis

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
xAxis:{
    show:true,                //是否显示 x 轴
    gridIndex:0,              //x 轴所在的 grid 的索引，默认位于第一个 grid
    position:"bottom",       //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
    offset:0,                 //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type:"category",         //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                                // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
    name:'时间',               //坐标轴名称
    nameLocation:"end",       //坐标轴名称显示位置。可选：'start','middle','end'
    nameTextStyle:mytextStyle,  //坐标轴名称的文字样式
    nameGap:15,                  //坐标轴名称与轴线之间的距离
    nameRotate:0,                //坐标轴名字旋转，角度值
    inverse:false,              //是否是反向坐标轴
    boundaryGap:true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
    min:null,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
    max:null,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
    scale:false,                //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
    splitNumber:5,             //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
    minInterval:0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
    logBase:10,                 //对数轴的底数，只在对数轴中（type: 'log'）有效
    silent:false,              //坐标轴是否是静态无法交互
    triggerEvent:false,       //坐标轴的标签是否响应和触发鼠标事件
    axisLine:{                 //坐标 轴线
        show:true,             //是否显示坐标轴轴线
        onZero:true,           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
        lineStyle:mylineStyle
    },
    axisTick :{                 //坐标轴刻度相关设置
        show:true,              //是否显示坐标轴刻度。
        alignWithLabel:false,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
        interval:auto,          //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
        inside:false,           //坐标轴刻度是否朝内，默认朝外。
        length:5,                //坐标轴刻度的长度。
        lineStyle:mylineStyle
    },
    axisLabel:{                 //坐标轴刻度标签的相关设置
        show:true,              //是否显示
        interval:"auto",        //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
        inside:false,           //刻度标签是否朝内，默认朝外
        rotate:0,               //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
        margin:8,               //刻度标签与轴线之间的距离
        formatter: function (value, index) {            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            return value+"kg";
        },
        showMinLabel:null,      //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
        showMaxLabel:null,      //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
        textStyle:mytextStyle
    },
    splitLine:{                 //坐标轴在 grid 区域中的分隔线。
        show:true,              //是否显示分隔线。默认数值轴显示，类目轴不显示。
        interval:"auto",        //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
        lineStyle:mylineStyle
    },
    splitArea:{                 //坐标轴在 grid 区域中的分隔区域，默认不显示。
        interval:"auto",
        show:false,             //是否显示分隔区域
        areaStyle:myareaStyle
    },
    data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],             //类目数据，在类目轴（type: 'category'）中有效。
    zlevel:0,                   //X 轴所有图形的 zlevel 值。
    z:0,                        //X 轴组件的所有图形的z值
}

yAxis

类似于xAxis

geo

地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
geo: {
    map: 'china',
    silent: false,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
    roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。
    //如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
    zoom: 1, // 地图初始大小
    center: [116.366794, 40.400309], // 初始中心位置
    label: {
        color:"#fff",
        emphasis: {
            show: false
        }
    },
    itemStyle: {
        normal: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        emphasis: {
            areaColor: '#2a333d'
        }
    }
}