Echarts学习之路2(基本配置项)

摘要:
ItemGap:[默认值:10],//图例中每个项目之间的间隔。水平布局中的水平间距和垂直布局中的垂直间距项宽度:[默认值:25],//图例标记的图形宽度。工具提示:{show:true},//图例的工具提示配置与工具提示的配置相同。BackgroundColor:“#ccc”,…工具提示:{show:true,//是否显示提示框组件,包括提示框浮动层和轴指针

title:标题组件,包含主标题和副标题。

title:{
      text:"",//主标题
      link:"",//主标题文本超链接
      target:"",//指定窗口打开主标题超链接。'self' 当前窗口打开,blank' 新窗口打开
      textStyle:{//主标题样式
         color:"#333",
         ......
     },
  subtext:'',//副标题文本,支持使用
换行
      sublink:""//副标题文本超链接
      subtarget:'blank/self' 
      subtextStyle:{}//副标题样式
      textAlign:"auto/left/right/center",//整体(包括text和subtext)的水平对齐
      textVerticalAlign:"auto/top/bottom/middle",//整体(包括text和subtext)的垂直对齐
      padding:[default:5],//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
      itemGap:[default:10],//主副标题之间的间距
      zlevel:[default:0],//所有图形的 zlevel 值,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
      z:[default:2],//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖,z相比zlevel优先级更低,而且不会创建新的 Canvas
      left:'auto'/20%/'right'/'center',//grid 组件离容器左侧的距离。
      right:'',
      top:"",
      bottom:"",
      backgroundColor:'transparent',//标题背景色,默认透明。
      borderColor:[default:'#ccc'],//标题的边框颜色。支持的颜色格式同 backgroundColor。
      borderWidth:[default:0],
      borderRadius:[default:0],
      ....
}

legend:图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

legend:{
         type:"plain/scroll",//'plain':普通图例。缺省就是普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
         id:"",//组件ID,指定则可用于在 option 或者 API 中引用组件。
         show:true/false,
         zlevel:[default:0],
         z:[default:2],
         left:'',
         top:'',
         right:'',
         bottom:'',
         '',//图例组件的宽度。默认自适应。
         height:'',
         orient:'horizontal/vertical',//图例列表的布局朝向。
         align:'',//图例标记和文本的对齐。默认自动
         padding:[default:5],//图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
         itemGap:[ default: 10 ],//图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔
         itemWidth:[ default: 25 ],//图例标记的图形宽度。
         itemHeight:[ default: 14 ],
         symbolKeepAspect:[default:true],//如果图标(可能来自系列的 symbol 或用户自定义的 legend.data.icon)是 path:// 的形式,是否在缩放时保持该图形的长宽比。
         formatter:[default:null],//用来格式化图例文本,支持字符串模板和回调函数两种形式,
                                               示例:// 使用字符串模板,模板变量为图例名称 {name}
                                                       formatter: 'Legend {name}'
                                                        // 使用回调函数
                                                        formatter: function (name) {
                                                                     return 'Legend ' + name;
                                                        }
        selectedMode:[default:true],//图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
        inactiveColor:[default:'#ccc'],//图例关闭时的颜色。
        textStyle:{},//图例的公用文本样式。
        tooltip:{show:true},//图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字 
                                      很多的时候对文字做裁剪并且开启 tooltip,
                                       legend: {
                                                     formatter: function (name) {
                                                                    return echarts.format.truncateText(name, 40, 
                                                                          '14px Microsoft Yahei', '…');
                                                     },
                                                      tooltip: {
                                                                    show: true
                                                       }
                                       }
         data:[{                  //图例的数据数组。
               name:"系列1",
               icon:"circle",// 强制设置图形为圆。
               textStyle:{color:'red'},//// 设置文本为红色
          }],
      ......
      
}

grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图柱状图散点图(气泡图)

grid:{
       id:"",
       show:[default:false],//是否显示直角坐标系网格。
       zlevel:[default:0],
       z:[default:2],
       left:'10%',
       right:"",
       top:60,
       bottom:60,
       [default:auto],
       height:[default:auto],
      containLabel:[default:false],//grid 区域是否包含坐标轴的刻度标签。
      backgroundColor:"#ccc",
      ....
     tooltip:{
                show:true,//是否显示提示框组件,包括提示框浮层和 axisPointer。
                trigger:'item',//触发类型。item/axis,item:数据项图形触发,主要在散点图,饼图等无类目轴的 
                图表中使用。axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                position:,// // 绝对位置,相对于容器左侧 10px, 上侧 10 pxposition: [10, 10]// 相对位置,放 
                置在容器正中间position: ['50%', '50%']
                formatter:,//提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
                padding:5
                textStyle:{},
                   .....
     }
}

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

xAaxis:{

        id:,
        show:true,
        gridIndex:0,//x 轴所在的 grid 的索引,默认位于第一个 grid。
        position:'top/bottom',//x 轴的位置。
        offset:0,//X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用
        type:"category".//,坐标轴类型,'value' 数值轴,适用于连续数据。'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
         name:"",//坐标轴名称。
         nameLocation:'start/middle/center/end',//坐标轴名称显示位置。
         nameTextStyle:{}//坐标轴名称的文字样式。
         nameGap:15,坐标轴名称与轴线之间的距离。
         nameRotate:null,//坐标轴名字旋转,角度值。
         inverse:false,//是否是反向坐标轴
         boundaryGap: ['20%', '20%'],//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
         min:null.,//坐标轴刻度最小值,可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。
         max:null,//   坐标轴刻度最大值。可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。
         scale:false,//只在数值轴中(type: 'value')有效,是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用
         splitNumber:5,//坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效
         minInterval:0,//自动计算的坐标轴最小间隔大小。可以设置成1保证坐标轴分割刻度显示成整数,只在数值轴或时间轴中(type: 'value' 或 'time')有效。
         maxInterval:,//自动计算的坐标轴最大间隔大小。在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。只在数值轴或时间轴中(type: 'value' 或 'time')有效。
         interval:,//强制设置坐标轴分割间隔。
         logBase:10,//对数轴的底数,只在对数轴中(type: 'log')有效。
         axisLine:{//坐标轴轴线相关设置。
                   show:true,
                   onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴 
                  且包含 0 刻度时有效。
                   symbol:'none',//轴线两边的箭头,
                   lineStyle:{},//坐标线样式
         },
        axisTick:{//坐标轴刻度相关设置。
                    show:true,
                    length:5,
                    inside:false,
                    lineStyle:{},
                    .....
        },
        axisLabel:{//坐标轴刻度标签的相关设置。
           ....
        } 
        splitLine:{//坐标轴在 grid 区域中的分隔线。
                  show:true,
                  interval:'auto',//坐标轴分隔线的显示间隔,
                  lineStyle:{}
        },
        splitArea:{//坐标轴在 grid 区域中的分隔区域,默认不显示。
                 show:true,
                  areaStyle:{}
        },
        data:[{
               value:"",//单个类目名称。
               textStyle:{},//类目标签的文字样式。
          }],
        ......
}

yAxis:直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置offset属性防止同个位置多个 Y 轴的重叠.

与xAxis一致。

tooltip:提示框组件。

tooltip:{
        show:true,
        trigger:"item",//item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
        axisPointer:{  //坐标轴指示器配置项。
          type:"line",   //line:直线指示器,shadow:阴影指示器,none:无指示器,cross:十字准星指示器
          axis:"auto",//指示器的坐标轴。默认情况,坐标系会自动选择显示哪个轴的 ,可以是x,y,radius,angle
          snap:false,//坐标轴指示器是否自动吸附到点上。默认自动判断。这个功能在数值轴和时间轴上比较有意 
          义,可以自动寻找细小的数值点。
          z:,
           label:{//坐标轴指示器的文本标签。
             show:false,
             precision:"auto",//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 
                                        表示保留两位小数
             formatter:null,//文本标签文字的格式化器。
             margin:3,//label 距离轴的距离。
             color:"#fff",//
             ......
            },
           lineStyle:{}//axisPointer.type 为 'line' 时有效。
           shadowStyle:{}//axisPointer.type 为 'shadow' 时有效。
           crossStyle:{},//axisPointer.type 为 'cross' 时有效。
           .......
        },
       .......
}    

toolbox:工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。

toolbox:{
           id:"",
           show:true,
           orient:"horizontal",//工具栏 icon 的布局朝向。
           itemSize:15,//工具栏 icon 的大小。
           itemGap:10,//工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
           showTitle:true;//是否在鼠标 hover 的时候显示每个工具 icon 的标题。
           ......
}

textStyle:全局的字体样式。

textStyle:{
        color:"#fff",
        fontStyle:"normal",
        fontWeight:"normal",
        fontFamily:"sans-serif",
        fontSize:12,
        lineHeight:,
        ,
        height:,
        textBorderColor:"",
        textBorderWidth:"",
        textShadowColor:"transparent",
        textShadowBlur:0,//文字本身的阴影长度。
        textShadowOffsetX:0,//文字本身的阴影 X 偏移。
        textShadowOffsetY:0//文字本身的阴影 Y 偏移
}

series:系列列表。每个系列通过type决定自己的图表类型

series:[
   type:"line",//折线图
   name:"",//系列名称,
   coordinateSystem:"cartesian2d",//该系列使用的坐标系,'cartesian2d':二维直角坐标系,'polar':使用极坐标系,通过 polarIndex 指定相应的极坐标组件
    xAxisIndex:0,//使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
    yAxisIndex:0,//使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
    polarIndex:0,//使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
    symbol:"emptyCircle",//标记的图形。
                                ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 
                                'pin', 'arrow', 'none',可以通过 'image://url' 设置为图片,其中 URL 为图片的链 
                                 接,或者 dataURI。URL 为图片链接例如:
                                    'image://http://xxx.xxx.xxx/a/b.png'
    symbolSize:4,//标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
    symbolRotate:,//标记的旋转角度
    symbolKeeoAspect:false,//如果 symbol 是 path:// 的形式,是否在缩放时保持该图形的长宽比
    symbolOffset:[0,0],//标记相对于原本位置的偏移,例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
    showSymbol:true,//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
    cursor:"poniter",
    step:false,//是否是阶梯线图
    label:{
        show:false,//默认不显示
        position:"top",   //标签的位置。
        distance:5,   //距离图形元素的距离,
        rotate:,   //标签旋转。从 -90 度到 90 度。正值是逆时针。
        offset:,   //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
        color:""
        ......
     },//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
     itemStyle:{  //折线拐点标志的样式。
      ......
     },
     lineStyle:{}//线条样式。
     areaStyle:{},//区域填充样式。
     emphasis:{},//图形的高亮样式。
     smooth:false,//是否平滑曲线显示。
     data:[{name:"",value:"",symbol:"circle",....}],//系列中的数据内容数组。数组项通常为具体的数据项。
    ......
]

type:"pie/bar/lines" ........

animation: 是否开启动画。

免责声明:文章转载自《Echarts学习之路2(基本配置项)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇拒绝了对对象 'sp_sdidebug'(数据库 'master',所有者 'dbo')的 EXECUTE 权限git常见问题汇总下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

图形化报表之MSChart报表

MSChart报表 1.Annotations --图形注解集合   2.ChartAreas --图表区域集合   3.Legends   --图例集合   4.Series    --图表序列集合(即图表数据对象集合)   5.Titles    --图标的标题集合   Annotations注解集合   Annotations是一个对图形的一些注解对...

ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示

转自:http://blog.csdn.net/kirinlau/article/details/72876689 首先要将一个图表显示在前端页面上: var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts页面显示的空间 1 //----------...

数据可视化之powerBI技巧(二十三)Power BI可视化技巧,使用DAX自定义时间轴

​按照自然日历来展现疫情数据时,是这样的效果, 由于各个国家的疫情爆发时间不一致,按自然日期坐标轴很难比较各个国家的蔓延速度。 如果各个国家都从蔓延日开始统计,展示之后每日的确诊人数,就是同样的时间轴,可以很直观的看出每个国家的发展速度。 这里的难点在于,如何确定开始蔓延日期,以及如何根据蔓延日期,来计算每一天距离蔓延日是第几天? 在PowerBI中,用...

【转】 MATLAB界面程序实例学习

下面请跟我一步一步做一个图像处理的程序,如果您坚持做完这个实例,我想MATLAB界面编程对您而言,就没有什么难度了。当然,我这里说的是,您首先要有一定的MATLAB编程基础。还有,我的MATLAB版本是2008a。在2008a以前的版本中没有工具栏编辑器,如果需要工具栏要手动写程序,这个我就不多讲了。好了,废话少说,跟我来吧!在MATLAB的命令窗口(Co...

[转载]Matlab有用的小工具小技巧

原文地址:Matlab有用的小工具小技巧作者:felonwan 本文随时更新,欢迎转载,注明出处,谢谢合作。 本文内容基本上都经过笔者自身使用,结合经验及思考使用Matlab作图更为方便。记录下来,一是方便自己,二也为方便网友,欢迎多留言交流。 目录: 1.使图形窗口的默认text解释器为latex 2.图形窗口最大化 3.双坐标 4.计时...

Chart控件文档

假设c1Chart1为Chart控件的一个实例。一、基本框架图二、主要外层属性(即this.c1Chart1的主要属性)1、Header和Footer,上标题和下标题。位于this.c1Chart1.Header和this.c1Chart2、Legend。图例,位于this.c1Chart.Legend。3、ChartArea。图表区,位于this.cha...