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. Libvirt磁盘加密

    Libvirt加密磁盘使用 创建加密磁盘 进入libvirt默认存储池目录 # cd /var/lib/libvirt/images 创建加密磁盘 # qemu-img convert -O qcow ...

  2. DNS 网关 路由 交换机 网桥 协议 服务器 这些都是什么关系?

    来源:知乎 服务器:为你提供服务的机器.相当于马路边上的各种店面.虽然理论上任何一户人家都能开店为你提供服务,但是因为各种硬件资源限制而不适合开店.比如:小区道路比较窄(宽带带宽比较窄).家里地方太小 ...

  3. JML契约式设计——第三单元学习小结

    一.前言 本单元作业都是关于JML(Java Modeling Language),JML是一种契约式设计(Design by Contract)的语言,契约式设计的主要目的是希望程序员能够在设计程序 ...

  4. 关于php命名空间的理解

    以phpmailer这个类库为例,composer自动加载好该类库,有用的文件都放在src这个目录下 这些文件的命名空间都是这个:namespace PHPMailer\PHPMailer; 如果我们 ...

  5. JMeter - 实时结果 - InfluxDB和Grafana - 第1部分 - 基本设置

    概述: 在本文中,我将解释如何使用JMeter + InfluxDB + Grafana获得实时性能测试结果. 请注意,此主题太大,无法涵盖一篇文章中的所有内容.所以,我试图提供与TestAutoma ...

  6. 带图片的word快速插入到博客中

    最近在博客中写文章的时候,最烦的就是将word文档整体传到博客中,不能一次把图片粘贴上去,再次去添加图片的时候要截图还要找对位置才可上传,偶尔的机会在网上看到有人这么处理,挺好用的,这里我也做个备注. ...

  7. LeetCode 069 Sqrt(x) 求平方根

    Implement int sqrt(int x).Compute and return the square root of x.x is guaranteed to be a non-negati ...

  8. Dijkstra算法(求一点到任意一点的最短距离)

    思路:先找出最短的一个点,也就是起点,从起点出发,找最短的边,同时标记起点为true(代表已经访问过),访问过的点就不用再访问了,依次下去,保证每一次找到的边都是最短的边 到最后没有边可以更新了就代表 ...

  9. WebSocket协议入门介绍

    目录 目录 WebSocket协议是什么 WebSocket是应用层协议 WebSocket与Http的区别 为什么要使用WebSocket 如何使用WebSocket 客户端API 在客户端使用We ...

  10. 《从0到1学习Flink》—— 介绍Flink中的Stream Windows

    前言 目前有许多数据分析的场景从批处理到流处理的演变, 虽然可以将批处理作为流处理的特殊情况来处理,但是分析无穷集的流数据通常需要思维方式的转变并且具有其自己的术语(例如,"windowin ...