Echarts常见配置项

title

{

text : '....',

textAlign : ''

left : [],

right : '...'

}

设置图表的标题

• left

  设置标题组件的对齐位置，取值：整数，百分比，位置名

• right

  设置标题组件的对齐位置，取值：整数，百分比，位置名

• textAlign

  用于设置标题文字相对于left设置的位置进行对齐

  👉 left:'center' 并不是将标题组件的位置设置为容器的中间心，而是中间线减去标签组件的一半的位置。

  textAlign也是相对于这个位置进行对齐的，center就是，标题的中间和这位置对齐，所以会导致并不对齐，而使用left则会对齐。

tooltip

{

show : true,

textStyle : {

color : '#09f',

},

position : [ '50%', '20%'],

trigger : 'axis'

}

提示框组件

• show

  鼠标移入是否显示提示框组件

• textStyle

  提示框浮层的文本样式。

• position

  [ '50%', '20%']

  一般不会自定义这个，因为提示框的位置是由表单自动计算出来的。

• trigger

  取值：

  • axis

    坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  • item

    数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

legend

{

textStyle : {

},

itemStyle : {

},

icon : '',

data : [ '邮件营销' , '联盟广告'] // 定义图例文字

}

图例组件

legend.itemStyle 设置图例样式

legend.textStyle 设置图例文字样式

legend:icon 使用图标作为图例

toolbox

工具框组件

grid

{

show : true,

containLabel : true,

borderColor : '#09f'

}

x与 y 轴形成的网格区域配置项

• left top right bottom

  设置网格区域距离容器的距离，

• containLabel

  grid 区域是否包含坐标轴的刻度标签。

  取值：boolean

• show

  是否显示直角坐标系网格。

• borderColor

  设置 grid 四条边线的颜色

xAxis

x轴相关配置

• type

  用于设置x 轴所表示的含义，

  取值：

  'category' 类目 默认的

  'value' 值

• boundaryGap

  坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。布尔值 true 或 false

• data

  当 type 为 category 时，用于设置类目的数据

• name

  设置坐标轴名

• nameRotate

  设置坐标轴名 旋转角度

• nameTextStyle

  设置坐标轴名 样式

• axisLabel

  设置label样式

  axisLabel.color 设置刻度标签颜色

  axisLabel.rotate 设置刻度标签旋转角度

  axisLabel.margin 刻度标签与轴线之间的距离。

• splitLine

  splitLine.show 显示分隔线(垂直的)

  splitLine.lineStyle 设置分隔线的样式

• axisLine

  axisLine.lineStyle 坐标轴线线的颜色。

• axisTick

  axisTick.alignWithLabel 设置刻度线位置，取值： true 或 false

  axisTick.show 显示或隐藏刻度线

yAxis

y轴相关配置

• type

  用于设置x 轴所表示的含义，

  取值：

  'category' 类目

  'value' 值 默认的

• boundaryGap

  设置

• data

  当 type 为 category 时，用于设置类目的数据

series

所展示的数据项相关配置，以及使用什么样的图表进行展示。

• data

  设置所要显示的数据值

• type

  图表类型名

• smooth

  是否平滑曲线显示。

• symbol

  曲线上关键值点的形状。

  取值：'circle','rect','roundRect','triangle','diamond','pin','arrow','none'

• symbolSize

  曲线上关键值点的 大小，不需要单位

• lineStyle

  线条样式。

• areaStyle

  区域填充样式。也就是曲线区域的样式。

• name

  影响 legend 与 tooltip 内显示的内容

• stack

  是否要进行数据的堆叠。数据堆叠主要实现的是累加总量的显示。

  例如：

  数据是单独每个月的销售记录，但不想展示每个月的对比，而显示累加总量的显示。

color

颜色取值

• 颜色值：

  'red' '#f09' 'rgba(12,39,10, 7)'

• 渐变颜色

  color:{

  type:'linear', // 设置渐变类型

  x:0,

  y:0,

  x2:0,

  y2:1, // x y x2 y2 确定渐变方向

  colorStops:[

  {

  offset:0, // 颜色的位置

  color:'rgba(83,168,255,1)'

  },

  {

  offset: 0.8, // 颜色的位置

  color: 'rgba(89,154,255,0)'

  }

  ],

  global: false

  }

柱状图

• tooltip

  {

  trigger : 'item',

  axisPointer: { // axisPointer 在 toolTip 里，并不是在 grid里的 toolTip

  type : 'shadow' // 指示器样式(当前柱子的高亮样式) 取值： shadow 或 line

  },

  }

• series

  [{

  data:[

  2100,

  {

  name : 'xxx',

  value : 1200,

  itemStyle : { // 设置默认的效果

  color : '#254963'

  },

  emphasis : { // 设置鼠标移入时的效果

  itemStyle : {

  color : '#254963'

  }

  },

  toolTip : { // 用于设置当前柱状图提示框的样式。

  extraCssText : 'opacity: 0'

  }

  } ,

  1420

  ]

  type,'bar

  }]

  👉 data是一个数组，数组内可以是数据，也可以是对象，如果是对象可以单独修改柱子的样式

• xAxis yAxis

  {

  axisLine : { // 设置轴线的样式

  lineStyle : {

  color : 'red'

  }

  },

  splitLine : { // 设置分割线样式

  lineStyle : {

  color : 'red'

  }

  }

  }

饼图

• series

  [{

  radius:[内圆半径,外圆半径], // 圆环内外半径

  center:[x,y] // 圆心位置

  }]

  👉 数组内有几个对象就会产生几个饼图，通过radius控制大小，通过center控制位置

南丁格尔玫瑰图

• tooltip

  {

  trigger:'item',

  formatter:"{a} <br/> {b} : {c} ({d}%)"

  }

  formatter格式说明：

  {a} 表示提取 series 的系列名 点位模式

  {b} 表示提取 series 内当前条目名 rose1

  {c} 表示提取 series 内当前条目值 10

  {d} 表示的是 当前条目值 / 整体值 比例

• series

  [{

  name:'点位模式',

  type : 'pie',

  radius : [30, 110],

  center : ["75%", "50%"],

  roseType : "area",

  data : [

  {value : 10, name : 'rose1"'},

  {value : 5, name : 'rose2"'},

  {value : 15, name : 'rose3"'},

  {value : 25, name : 'rose4"'},

  {value : 20, name : 'rose5"'},

  {value : 35, name : 'rose6"'},

  {value : 30, name : 'rose7"'},

  {value : 40, name : 'rose8"'}

  ],

  label : {

  show : true, // 设置是否显示文字

  color : '#09f', // 设置文字的颜色

  fontSize : 10, // 设置文字大小

  },

  labelLine : {

  show : true, // 设置 边线的是否显示

  length : 6, // 设置 边线1 长度

  length2 : 8 // 设置 边线2 长度

  }

  }]

  属性说明

  name 图表的系列名

  type 图表类型

  radius 图表内外半径

  center 图表中间位置

  roseType 图表数据显示模式 radius(数据以半径长短进行显示) area(数据以面积进行显示)

拆线图

• series

  [

  {

  name : '...', // 如果 legend 里没有定义 data ，则使用这里的 name

  data : []

  type : 'line', // 拆线图

  smooth : true // 平滑曲线

  },

  {

  // ...

  }

  ]

echarts图表重绘：

window.addEventListener('resize', function(){

myChart.resize()

})