echarts常用属性

191 阅读2分钟

1.grid 网格组件

grid:{
    top:10,//距离容器顶部距离
    bottom:10,//距离容器底部距离
    left:10,//距离容器左侧距离
    right:10,//距离容器右侧距离
    width:'auto',//宽度,默认自适应
    height:'auto',//高度,默认自适应
    show:false,//是否显示直角坐标系网格
}

2.legend 图例组件

    legend:{
         show:true,//展示与否
         type:plain,//plain普通图例,scroll可滚动翻页的图例
         icon:'circle',//circle:圆形,rect:长方形,roundRect:圆角长方形,triangle:三角形,diamond:菱形,pin:圆形,arrow:箭头,none:不展示
         orient:'horizontal',//horizontal 水平排列,vertical 竖直排列
         align:'auto',//图例标记和文本的对齐,left:图例在文本左边,right:图例在文本右边
         itemGap:10,//图例每项之间的间隔
         itemStyle:{},//图例的图形样式
         lineStyle:{},//图例图形中线的样式,例如折线图图例
         formatter:function(),//格式化图例文本,可以是模板字符串或者回调函数
         selectedMode:true,//图例的选择模式,是否可以通过点击图例改变series的显示状态,也可设置为single或者multiple使用单选或者多选模式        
    }

3.xAixs 直角坐标系grid的x轴

     xAxis:{
       show:true,//展示与否
       position:top,//top:在grid上方,在grid下方
       offset:0,//number类型,X轴相对于默认位置的偏移
       type:value,//value数值轴适用于连续数据,category类目轴适用于离散的类目数据,time时间轴与时间轴相比带有时间的格式化,log对数轴
       inverse:false,//是否是反向坐标轴
       min:number/string/function,//坐标刻度最小值
       scale:false,//只在数值轴中type:value有效,是否脱离0值比例。设置成true后坐标轴刻度不会强制包含零刻度
       splitNumber:5,//number,坐标轴的分割段数
       interval:5,//number,强制设置坐标轴分割间隔
       silent:false,//坐标轴是否静态无法交互
       data:[{}],//类目数据,在类目轴(type:'category')中有效
      }

4.series 系列组件

        series:[{
           type:'line',//类型常见的有line,pie,bar
           name:String,//系列名称,用于tooltip显示
           showSymbol:true,//是否显示symbol(折线图的上点),若为false则只有在tooltip 经过的时候显示,
           showAllSymbol:'auto',//只在株洲为类目轴(type:category)
           stack:String,//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
           cursor:'pointer',//auto\pointer\move 鼠标悬浮在图形元素上时鼠标的样式,同css的cursor
           label:{//图形上的文本标签,用于说明图形的数据信息
                show:false,//是否显示标签
                distance:5,//标签显示距离图形元素的距离
                rotate:0,//标签旋转
                offset:[0,0],//标签横向、纵向偏移
                formatter:string/function,//标签内容格式器,支持模板字符串和回调函数的形式
                rich:{},//自定义富文本的样式可与formatter共同使用
           }
       }]