echarts学习之配置项

ゝ一纸荒年。 2022-02-18 14:09 290阅读 0赞

发现最近需要使用echarts的地方越来越多，在这里进行一些学习记录，不定时更新。

这里是我对最新的官方文档的理解,但是我还看到一些配置参数可能是历史版本的,最新的官方文档里面是没有介绍的.

echarts基本使用方法：先通过init(document.getElementById("id"))方法获取操纵的元素，然后元素调用setOption(option)就可以完成一次画布的绘制。

### title: ###

title是标题组件。可以控制主标题和次标题。

注意文字块都是基于content box，不包含padding。如果不定义textStyle下的rich属性则不能定义textStyle下的width和height。

var option = {
        title: {
            id: 'xxx', // 可用于option或者API中引用组件,默认不指定,我太菜了还没用过
            show: true, // 控制是否显示标题,默认值:true
            text: 'ABC \n DEF', // 主标题就写在这里,默认值:'',支持\n换行
            subtext: 'abc \n def',//副标题,和text一样
            link: 'https://www.baidu.com', // 给主标题添加超链接,像a标签的href,默认值:''
            sublink: 'https://www.google.com', //副标题链接,和link一样
            target: 'blank', // 功能类似a标签的target,默认值:'blank',只能在self(当前窗口)和blank(新窗口)中选择
            subtarget: 'blank', //副标题超链接打开窗口方式,和target一样
            textAlign: 'auto',//主标题副标题总的水平对齐方式,默认值:'auto',可选值:'left','right','center'
            textVerticalAlign: 'auto',//主标题副标题总的垂直对齐方式,默认值:'auto',可选值:'top','bottom','middle'
            triggerEvent: false,//是否触发事件,默认值:false,我没搞懂这有什么用
            padding: 5,//标题内边距,默认值:5(px),可以是数组,[1,2](上下1px,左右2px),[1,2,3,4](上右下左的顺序)
            itemGap: 10,//主副标题间距,默认值:10(px)
            zlevel: 0,//所有图形的zlevel值,默认值:0,和css的z-index类似
            z: 2,//和zlevel类似,控制图形的前后顺序,优先级比zlevel低,且不会创建新的canvas
            left: 'auto',//grid组件离容器左侧的距离,默认值:'auto',可选值:'left','center','right',数字,'百分比'
            right: 'auto',//grid组件离容器右侧的距离,默认值:'auto',可选值:数字,'百分比'
            top: 'auto',//grid组件离容器上侧的距离,默认值:'auto',可选值:'top','middle','bottom',数字,'百分比'
            bottom: 'auto',//grid组件离容器下侧的距离,默认值:'auto',可选值:数字,'百分比'
            backgroundColor: 'transparent',//标题背景色,默认值:'transparent',可选:16进制,英文颜色,rgb,{image:'url'}
            borderColor: '#ccc',//标题的边框颜色,默认值:'#ccc',可选:英文颜色,rgb,16进制
            borderWidth: 0,//标题的边框线宽,默认值:0
            borderRadius: 0,//标题的边框圆角半径,默认值:0(px),支持数组,和css的border-radius要求一样
            shadowBlur: 0,//图形阴影的模糊大小,必须show:true,且backgroundColor不是transparent
            shadowColor: #000,//阴影颜色,无默认值,必须show:true
            shadowOffsetX: 0,//阴影水平方向偏移距离
            shadowOffsetY: 0,//阴影垂直方向偏移距离
            textStyle: { // 给主标题的文字设置样式
                color: '#333', // 主标题字体颜色,默认值:'#333',16进制,rgb,英文的颜色都支持,
                fontStyle: 'normal', // css的font-style,设置主标题字体风格,默认值:'normal',可选值:normal,italic(斜体),oblique(倾斜),反正我看不出来后两个有啥区别
                fontWeight: 'normal', // css的font-weight,设置主标题字体粗细,默认值:'normal',可选的值包括100-900的整百数以及normal,bold(粗),bolder(更粗),lighter(更细)
                fontFamily: 'sans-serif', // css的font-family,设置主标题字体风格系列,默认值:'sans-serif'
                fontSize: 18,// css的font-size,设置主标题文字大小,默认值:18(px)
                align: 'auto',//主标题文字水平对齐方式,默认值:'auto',可选:'left','center','right'
                verticalAlign: 'auto',//主标题文字垂直对齐方式,默认值:'auto',可选:'top','middle','bottom'
                lineHeight: 20,//css的line-height,设置主行高,无默认值
                width: '100%', // 文字块的宽度,一般不指定,默认是文字宽度,可以是数字(px)或字符串(百分比)
                height: '100%', // 文字块高度,其它的和width一样
                textBorderColor: 'transparent',// 文字描边颜色,默认值:'transparent'
                textBorderWidth: 0, // 文字描边的厚度或者宽度,默认值:0
                textShadowColor: 'transparent', // 文字阴影颜色,默认值:'transparent'
                textShadowBlur: 0,// 文字阴影的长度,默认值:0
                textShadowOffsetX: 0,// 文字阴影水平偏移量,默认值:0
                textShadowOffsetY: 0,// 文字阴影垂直偏移量,默认值:0
                rich: { // 自定义富文本样式,可在rich中定义多个对象,是对样式列表的扩充.都可以在父层级找到,
                    //如果有些参数没有设置则默认是父层级的值,除非父层级也没有设置才会取本身默认值.
                    x: { // x是自定义样式名,具体的富文本的使用看官网
                        color: '#fff',// 默认值:#fff
                        fontStyle: 'normal',// 默认值:'normal'
                        fontWeight: 'normal',// 默认值:'normal'
                        fontFamily: 'sans-serif',// 默认值:'sans-serif' 
                        fontSize: 12,//默认值:12
                        align: 'auto',//默认值:'auto'
                        verticalAlign: 'auto', // 默认值:'auto'
                        lineHeight: 30,//无默认值
                        backgroundColor: 'transparent',//默认值:'transparent'
                        borderColor: 'transparent',//默认值:'transparent'
                        borderWidth: 0,//默认值:0
                        borderRadius: 0,//默认值:0
                        padding: 0,//默认值:0
                        shadowColor: 'transparent',//默认值:'transparent'
                        shadowBlur: 0,//默认值:0
                        shadowOffsetX: 0,//默认值:0
                        shadowOffsetY: 0,//默认值:0
                        width: '100%',//无默认值
                        height: '100%', //无默认值
                        textBorderColor: 'transparent',//默认值:'transparent'
                        textBorderWidth: 0, //默认值:0
                        textShadowColor: 'transparent', //默认值:'transparent'
                        textShadowBlur: 0,//默认值:0
                        textShadowOffsetX: 0,//默认值:0
                        textShadowOffsetY: 0,//默认值:0         
                    },
                    y: { ... }//这是另一个富文本样式
                }
            },
            subTextStyle: { //副标题文字样式,参数除了textStyle里有的还有其它参数,有些默认值不一样,                    
                //下面只写默认值不一样的以及textStyle里没有的参数
                //主标题有其它的方式实现,没有与副标题的参数一样而已
                color: '#aaa',
                fontSize: 12,
            },
        }
    }

### legend: ###

图例组件，用于控制一张表格中可以出现的不同序列的标记、颜色、名字等。

var option: {
        legend: {
            type: 'plain', // 图例类型,默认值:'plain',可选:plain,scroll,当图例过多时可以选择scroll
            id: 'xxx', //组件id,默认不指定,指定可用于在option或API中引用组件
            show: true,//控制图例组件是否显示,默认值:true
            zlevel: 0, //图例的zlevel值,默认值:0
            z: 2,//图例的z值,控制图形的先后顺序,默认值:2,优先级比zlevel低,且不会创建新的canvas
            left: 'auto',//图例组件离容器左侧的距离,默认值:auto,可选:'left','center','right',数字,'百分比'
            right: 'auto',//图例组件离容器右侧的距离,默认值:auto,可选:数字,'百分比'
            top: 'auto',//图例组件离容器上侧的距离,默认值:auto,可选:'top','middle','bottom',数字,'百分比'
            bottom: 'auto',//图例组件离容器下侧的距离,默认值:auto,可选:数字,'百分比'
            width: 'auto',//图例组件的宽度,默认值:'auto'
            height: 'auto',//图例组件的高度,默认值:'auto'
            orient: 'horizontal',//图例组建的布局朝向,可选横向纵向,默认值:'horizontal'
            align: 'auto',//图例标记和文本的对齐方式,默认值:'auto',可选:'auto','left','right'
            padding: 5,//图例内边距,默认值:5(px),可选值:数组,[1,2](1指上下1px内边距,2指左右2px内边距),[1(上),2(右),3(下),4(左)]
            itemGap: 10,//每个图例之间的间距,默认值:10(px)
            itemWidth: 25,//每个图例标记的宽度,默认值:25
            itemHeight: 14,//每个图例标记的高度,默认值:14
            symbolKeepAspect: true,//图标(来自系列的symbol或用户自定义的icon)是否保持长宽纵横比
            formatter: function(name){return 'xxx'+name;},//格式化图例的文本,默认值:null
            selectedMode: true,//图例选择模式,默认值:true,可以通过点击图例控制系列显示或隐藏,可选:false,'single','multiple'
            inActiveColor: '#ccc',//图例关闭时的颜色
            selected: {'系列1':true,'系列2':false},//控制图例是否被选中
            textStyle: {//图例的公共文本样式,以下都是和图例相关的文字样式设置
                color: '#333',//文字颜色
                fontStyle: 'normal',//文字字体风格,默认值:'normal',可选:'italic','oblique'
                fontWeight: 'normal',//文字字体粗细,默认值:'normal',可选:100-900,'bold','bolder','lighter'
                fontFamily: 'sans-serif',//字体系列,默认值:'sans-serif'
                
            }
        }
    }

### color: ###

color是控制调色盘，假如你的数据是多系列的（ps：就是在legend中设置的图例，一个图例就是一个系列），那么每个系列就会依次从调色盘中选取作为系列颜色。

var option = {
        // 下面的是默认的调色盘
        color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae',
        '#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
    }