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. unity3d AssetStore 下载的资源位置

    Win7,8和Win10系统下: 进入C:\Users\“用户名”目录,然后打开文件夹选项的显示隐藏文件选项 再进入AppData\Roaming\Unity/Asset Store-5.x下找到 M ...

  2. rxjs入门6之合并数据流

    一 concat,merge,zip,combineLatest等合并类操作符 以上操作符在版本6中已经只存在静态方法,不能在pipe中使用. import {concat,merge,zip,com ...

  3. [C++]C,C++中使用可变参数

    可变参数即表示参数个数可以变化,可多可少,也表示参数的类型也可以变化,可以是int,double还可以是char*,类,结构体等等.可变参数是实现printf(),sprintf()等函数的关键之处, ...

  4. vue -- 打包资源正确引用及背景图引入

    一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解 ...

  5. 创建、配置Servlet

    1.创建Servlet 2.选择继承的类及需要覆盖的方法 3.Servlet结构 package com.sysker.servlet; import java.io.IOException; imp ...

  6. 51nod1305(简单逻辑)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1305 题意:中文题诶- 思路:1e5的数据直接暴力肯定是不行 ...

  7. js常见问题之为什么点击弹出的i总是最后一个

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Javascript专题(三)c.各种轮播--上下滚动轮播(面向对象版本)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 牛客练习赛41D(思维转化)

    AC通道 要点 思路:题解中将所求进行转化\[max\{相似度\} = max\{M-不相似度\} = M-min\{不相似度\}\]因此转化为求某01串T与所给众S串的最小不相似度,而最终答案是选取 ...

  10. mitmproxy——抓取http、https

    mitmproxy是一个支持HTTP和HTTPS的抓包程序,有类似Fiddler.Charles的功能.除了命令行形式的控制台,mitmproxy还有两个关联组件:mitmdump和mitmweb. ...