ECharts属性——学习笔记

1、全图默认背景

backgroundColor:'rgba(10,20,81,0.38)',

2、提示框

tooltip : {
        trigger: '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，
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line' ,       // 默认为直线，可选为：'line' | 'shadow'
            lineStyle : {          // 直线指示器样式设置
                color: '#48b',
                width: 2,
                type: 'solid'
            },
            shadowStyle : {              // 阴影指示器样式设置
                width: 'auto',         // 阴影大小
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        formatter: function (params){
            return params[0].name + '<br/>'
                + params[0].seriesName + ' : ' + params[0].value+'%'+ '<br/>'
                + params[1].seriesName + ' : ' + params[1].value + '%';
        }
    },

3、全局文本

textStyle: {
        fontFamily: 'Arial, Verdana, sans-serif',
        fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
        // fontSize: 10,
        color:'WhiteSmoke'
    },

4、图例

legend: {
        orient: 'horizontal',          // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical'
        x: 'center',                // 水平安放位置，默认为全图居中，可选为： 'center' ¦ 'left' ¦ 'right'  // ¦ {number}（x坐标，单位px）
        y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'        // ¦ {number}（y坐标，单位px）
        backgroundColor: 'rgba(0,0,0,0)',
        borderWidth: 1,                // 图例边框线宽，单位px，默认为0（无边框）
        borderColor: '#ccc',            // 图例边框颜色
        padding: 5,                  // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
        itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
        itemWidth: 20,             // 图例图形宽度
        itemHeight: 14,            // 图例图形高度
        textStyle: {
            color: 'WhiteSmoke'          // 图例文字颜色
        },
        data:['当前','历史']
    },

5、网格

grid: {y: 30, y2:20, x2:20},

6、坐标轴

yAxis : [
        {
            name:'百分比',
            type : 'value',
            position: 'left',      // 位置
            nameLocation: 'end',     // 坐标轴名字位置，支持'start' | 'end'
            nameTextStyle:{color:'RGBA(6, 243, 250, 1)'},// 坐标轴文字样式，默认取全局样式
            boundaryGap: [0, 0],    // 数值起始和结束两端空白策略
            splitNumber: 5,        // 分割段数，默认为5
            axisLine: {             // 坐标轴线
                show:true,         // 默认显示，属性show控制显示与否
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'rgba(6,243,250,1)',
                    width: 2,
                    type: 'solid'
                }
            },
            axisTick: {            // 坐标轴小标记
                show: false,       // 属性show控制显示与否，默认不显示
                inside : false,      // 控制小标记是否在grid里
                length :5,          // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'rgba(6,243,250,1)',
                    width: 1
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                rotate: 0,
                margin: 8,
                formatter: '{value} %',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'rgba(6,243,250,1)'
                }
            },
            splitLine: {                // 分隔线
                show: false,        // 默认显示，属性show控制显示与否
                lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
                    color: ['#ccc'],
                    width: 1,
                    type: 'solid'
                }
            },
            splitArea: {                // 分隔区域
                show: true,       // 默认不显示，属性show控制显示与否
                areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
                    color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
                }
            }
        }
    ],