echarts常用配置属性大全

title

tooltip: {
   show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
   text: '主标题',//主标题文本，'\n'指定换行
   link:'',//主标题文本超链接,默认值true
   target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
   subtext: '副标题',//副标题文本，'\n'指定换行
   sublink: '',//副标题文本超链接
   subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
   x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
   y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
   textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
   backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色(三原色加透明度)，默认'rgba(0,0,0,0)'透明
   borderColor: '#ccc',//标题边框颜色,默认'#ccc'
   borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
   padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
   itemGap: 10,//主副标题纵向间隔，单位px，默认为10
   textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
       fontFamily: 'Arial, Verdana, sans...',
       fontSize: 12,
       fontStyle: 'normal',
       fontWeight: 'normal',
   },
   subtextStyle: {//副标题文本样式{"color": "#aaa"}
       fontFamily: 'Arial, Verdana, sans...',
       fontSize: 12,
       fontStyle: 'normal',
       fontWeight: 'normal',
   },
   zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
   z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},

legend

legend: {
  show: true, //是否显示
  type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例
  zlevel: 1, // 所有图形的 zlevel 值。
  icon: "circle",
  top: "5%", // bottom:"20%" // 组件离容器的距离
  right: "5%", //left:"10%"  // // 组件离容器的距离
  width: "auto", // 图例组件的宽度
  height: "auto", // 图例组件的高度
  orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'
  align: "auto", // 图例标记和文本的对齐
  padding: 5, // 图例内边距
  itemWidth: 6, // 图例标记的图形宽度。
  itemGap: 20, // 图例每项之间的间隔。
  itemHeight: 14, //  图例标记的图形高度。
  symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
  formatter: function (name) {
    return '{a|text}{a|   }{b|' +  name + '}'
  },
  selectedMode: true, // 图例选择的模式，
  inactiveColor: "#ccc", // 图例关闭时的颜色。
  textStyle: {
    color: "#556677", // 文字的颜色。
    fontStyle: "normal", // 文字字体的风格。
    fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...
    fontFamily: "sans-serif", // 文字的字体系列。
    fontSize: 12, // 文字的字体大小。
    lineHeight: 20, // 行高。
    backgroundColor: "transparent", // 文字块背景色。
    borderColor: "transparent", // 文字块边框颜色。
    borderWidth: 0, // 文字块边框宽度。
    borderRadius: 0, // 文字块的圆角。
    padding: 0, // 文字块的内边距
    shadowColor: "transparent", // 文字块的背景阴影颜色
    shadowBlur: 0, // 文字块的背景阴影长度。
    shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
    shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
    // width: 50, // 文字块的宽度。 默认
    // height: 40, // 文字块的高度 默认
    textBorderColor: "transparent", // 文字本身的描边颜色。
    textBorderWidth: 0, // 文字本身的描边宽度。
    textShadowColor: "transparent", // 文字本身的阴影颜色。
    textShadowBlur: 0, // 文字本身的阴影长度。
    textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
    textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
    rich: {
	    a: {
	      color: "red",
	      lineHeight: 10,
	    },
	    b: {
	     color: "#fff",
	     lineHeight: 10,
	    },
 	}, // 自定富文本样式
  },
},

grid

官网

grid:{
  id:'id' ,// 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
  show: false ,// 是否显示直角坐标系网格。
  zlevel: 0 ,// 所有图形的 zlevel 值。
  z: 2 ,// 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
  left: '10%' ,// grid 组件离容器左侧的距离。
  top: 60 ,// grid 组件离容器上侧的距离。
  right: '10%' ,// grid 组件离容器右侧的距离。
  bottom: 60 ,// grid 组件离容器下侧的距离。
  width: 'auto' ,// grid 组件的宽度。默认自适应。
  height: 'auto' ,// grid 组件的高度。默认自适应。
  containLabel: false ,// 详情请去看官网
  backgroundColor: 'transparent' ,// 网格背景色，默认透明。
  borderColor: '#ccc' ,// 网格的边框颜色。支持的颜色格式同 backgroundColor。
  borderWidth: 1 ,// 网格的边框线宽。
  shadowBlur: 10 ,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
  shadowColor:'#ccc' ,// 阴影颜色。支持的格式同color。
  shadowOffsetX: 0 ,// 阴影水平方向上的偏移距离。
  shadowOffsetY: 0 ,// 阴影垂直方向上的偏移距离。
  tooltip: {
  
  } ,// 组件
}

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

title

// An highlighted block
var foo = 'bar';

太多了累死我了 抽空再写吧