title: {//图表标题

    x: 'left', //组件离容器左侧的距离,left的值可以是像20,这样的具体像素值,
          可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left''center''right'                   
    y: 'top',// grid 组件离容器上侧的距离,可以使像素值,也可以为百分比,可选为:'top' ¦ 'bottom' ¦ 'center'
    borderColor: '#ccc',// 标题边框颜色
    borderWidth: 0,// 标题的边框线宽,默认为0
    padding: 5,// 标题内边距,单位px,默认各方向内边距为5,
     borderRadius,//圆角半径,单位px,支持传入数组分别指定4 个圆角半径,  
           borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)  
           borderRadius: 5, // 统一设置四个角的圆角大小
 
    itemGap: 10,// 主副标题纵向间隔,单位px,默认为10,
    textStyle: {
        fontSize: 18,//主标题文字的字体大小
        fontWeight: 'bolder',//主标题文字字体的粗细,可以是'normal','bold','bolder','lighter'
        color: '#333'// 主标题文字颜色
        align:"left"//  文字水平对齐方式,默认自动
    },
    subtextStyle: {//副标题相关属性设置
        color: '#ccc',// 副标题文字颜色
        fontSize:18 , //副标题文字的字体大小
    }
},
 
xAxis:{//直角坐标系 grid 中的 x 轴
    type:"category" ,//坐标轴类型。
    name:"天", //坐标轴名称。k可选:value、category、time、log(对数轴)
    nameLocation: 'end' , //坐标轴名称的文字样式。可选为:start、middle、center、end
     nameTextStyle:{//坐标轴名称的文字样式。
       color:"#ccc",  //坐标轴名称的颜色,默认取 axisLine.lineStyle.color
      verticalAlign:"top", //文字垂直对齐方式,默认自动。可选为:top、middle、bottom
    

    backgroundColor: {//文字块背景色。可以是直接的颜色值,可以支持使用图片,例如:
     image: 'xxx/xxx.png'
     // 这里可以是图片的 URL,
     // 或者图片的 dataURI,
     // 或者 HTMLImageElement 对象,
     // 或者 HTMLCanvasElement 对象。
  },
  borderWidth:"0",//文字块边框宽度。,默认为哦
  shadowColor: 'transparent' ,文字块的背景阴影颜色。[ default: 'transparent' ]
   axisLine:{//坐标轴轴线相关设置。
     show:false, //是否显示坐标轴轴线,默认为为true 
     color:"#ccc" //x或y轴轴线的颜色
    },
  splitLine:{//坐标轴网格线
    show:false//分割线是否显示,默认为true
    lineStyle:{
        color:"#fff" //分隔线颜色,可以设置成单个颜色。
        width:"1"  //宽度 默认为1
      }
 
  }, 
axisLabel:{//坐标轴文本相关属性设置

    show: true,
    textStyle: {//
      color: '#a1afc8'
    }

  },
  tooltip:{//提示框组件
    show:true,//是否显示提示框组件,包括提示框浮层和 axisPointer
    trigger:"item" //触发类型,item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
            axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    axisPointer:{//坐标轴指示器配置项。
      riggerOn:"click" //提示框触发的条件,可选:mousemove、click、mousemove|click、none
    }
  },
  dataZoom:{        //组件 用于区域缩放
    type: 'inside',
    disabled: false,  //是否停止组件的功能。
  },                                
}

echarts 相关属性介绍的更多相关文章

  1. 【iOS系列】-UIImageView帧动画相关属性介绍

    UIImageView帧动画相关属性介绍 1:相关属性: //An array of UIImage objects to use for an animation.存放UIImage对象,会按顺序显 ...

  2. echarts相关的可视化数据

    echarts使用步骤: 1)设置一个容器,该容器用来放图形,一定要给容器设置高度: 2)初始化echarts实例,语法:var  aa =  echarts.init(DOM); 例如: echar ...

  3. echarts相关属性设置(1)折线图篇

    option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...

  4. 【java规则引擎】基本语法和相关属性介绍

    一个规则的语法信息 [1]条件部分(LSH部分)===>规则pattern之间的连接条件符号:   (1)LHS 部分是由一个或多个条件组成,条件又称之为 pattern(匹配模式),多个 pa ...

  5. echarts相关问题记录

    1.图标距离容器边界 //echats options options : { //... grid : { top : 40, //距离容器上边界40像素 bottom: 30 //距离容器下边界3 ...

  6. ECharts地理坐标系属性介绍

    在 ECharts 地理坐标系的属性设置中,如果您要将地理坐标系组件显示出来,那么,请使用 geo 组件的 show 属性.在 geo 组件中提供了两种类型的地图数据:javascript 文件与 J ...

  7. echarts相关设置

    1.显示隐藏工具栏 注释toolbox即可 /*    toolbox: {         show : true,         feature : {             dataView ...

  8. echarts相关属性设置(3)环状图

    option = { grid: { left: '3%', top: '0%', // height: 500, right: '30%', containLabel: true, }, legen ...

  9. echarts相关属性设置(2)--折线图和柱状图的结合使用

    type:bar和line的组合 option = { { tooltip: { trigger: 'axis', axisPointer: { // type: 'shadow' }, // lab ...

随机推荐

  1. 2018杭电多校第二场1003(DFS,欧拉回路)

    #include<bits/stdc++.h>using namespace std;int n,m;int x,y;int num,cnt;int degree[100007],vis[ ...

  2. .txt文件转换到Excel

    背景    前几天,自己在实验室里做实验,我们的大偶像肖老师看见我了,把我宣到他的办公室,问我,这个怎么办.都是数字,两列数字,怎么排版到Excel上也显示两列数字.Oh My God! 这个我怎么知 ...

  3. 将图片至于jsp页面上(层)

    <div style="position: relative"> <span style="position: relative; top: 1px; ...

  4. python数据类型基本操作

    目录 1.字符串.... 1 2.列表[ ] 3 3.元组 ( ) 4 4.字典 { } 4 5.SET集合... 7 1.字符串 1.1查找字符串 find查找 >>> msg = ...

  5. 学习Vim的四周计划

    来源:Python程序员 ID:pythonbuluo vim具有自定义配色方案,语法高亮,linting和自动填充功能 Vim是一个以非常难学而闻名的命令行文本编辑器(有个关于Vim的笑话:问如何生 ...

  6. OJDBC版本区别:ojdbc14.jar,ojdbc5.jar和ojdbc6.jar的区别

    classes12.jar - for Java 1.2 and 1.3ojdbc14.jar - for Java 1.4 and 1.5ojdbc5.jar - for Java 1.5ojdbc ...

  7. AngularJs1.X学习--路由

    [三种使用说明:] $stateProvider.state('station.printQRCode', { //params: { 'parentOfficeId': null }, //一次性参 ...

  8. Migration-添加表(加外键)

    public partial class _222 : DbMigration { public override void Up() { //DropForeignKey("dbo.Ass ...

  9. aspnetcore进程内托管的坑-非常规方法解决Log4Net不写日志的问题

    问题描述:Log4Net,本地测试一切正常,发布后,无法自动创建文件夹和日志文件,无法写入文件. 一.在项目中配置Log4Net 请参考我的上一篇博客 <aspnetcore配置log4net并 ...

  10. k8s的ingress使用

    ingress 可以配置一个入口来提供k8s上service从外部来访问的url.负载平衡流量.终止SSL和提供基于名称的虚拟主机. 配置ingress的yaml: 要求域名解析无误 要求servic ...