Echars一些常用属性

charts.setOption({
  title: { // 官方文档： https://echarts.apache.org/zh/option.html#title
    text: '你的标题', // 标题
    textStyle: { // 标题的样式
      color: '#440055', // 标题的颜色
      fontSize: '14px', // 字体大小
      width: '100px', // 宽
      height: '28px'  // 高
    }
  },
  legend { // 控制图例
    type: 'plain' /*当图例很多时可以使用 scroll 分页显示*/,
    show: true,
    orient: 'horizontal', // 控制图例的显示方向垂直显示可设置为： vertical
    /* 下面是控制位置的,可以只设置其中一项，也可以设置多项 */
    left: 'auto',
    top: 'auto',
    right: 'auto',
    bottom: 'auto',
  },
  tooltip: { // 官方文档：https://echarts.apache.org/zh/option.html#tooltip
  	show: true, // 是否显示
  	trigger: 'item', // 提示数据的类型，item/axis/none
  	formatter: param => { // 自定义格式化函数,可以自己输出一下看看param是什么数据结构
		return '这就是自定义格式返回的数据，鼠标放在图形上会显示出来这段文字'
	}
  },
  grid: { // 坐标系网格，官方文档：https://echarts.apache.org/zh/option.html#grid
  	show: true,
  }，
  xAxis: { // X轴定义，官方文档：https://echarts.apache.org/zh/option.html#xAxis
  	id: 'myXAxis',
  	show: true,
  	type: 'category',
  	  /*'value' 数值轴，适用于连续数据。
	    'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
	    'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
	    'log' 对数轴。适用于对数数据。*/
	data: ['category1', 'category2'], // 自定义类目数据
  },
  yAxis: { // y轴定义，官方文档：https://echarts.apache.org/zh/option.html#yAxis
  	type: 'value',
  },
  dataZoom: [ // 用于区域缩放，官方文档：https://echarts.apache.org/zh/option.html#dataZoom
    // 可定义多种缩放类型
    { 
      type: 'inside', // 鼠标滚轮控制缩放，官方文档：https://echarts.apache.org/zh/option.html#dataZoom-inside
    },
    {
      type: 'slider', // 滑动条控制缩放，官方文档：https://echarts.apache.org/zh/option.html#dataZoom-slider
    }
  ],
  toolbox: { //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
    // 官方文档：https://echarts.apache.org/zh/option.html#toolbox
    feature: {
      saveAsImage: {}, // 保存图片
      dataView:{}, // 数据视图
      magicType: {}, // 动态类型切换
      dataZoom: {}, // 数据区域缩放
      restore: {}, // 重置
    }
  },
  series: [ // 要展示数据的定义，官方文档：https://echarts.apache.org/zh/option.html#series-line
    type: 'line', // line、bar、pie......
    name: '系列名称',
    data: [ // 数据
      ['category1', 1,'其他信息', {info: '复杂类型的其他信息'}], // 第一个是x轴第二个是y轴，根据定义轴的数量和顺序来，
      ['category1', 100, '其他信息'], // 如果需要在tooltip中显示某些自定义属性，可以放在这个数组中格式化时能取到
    ]
  ]
})

charts.on(
'click'/*事件*/, 
{},
/* filter type 详细参考官方文档：
https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
*/ 
param => { // 回调
	console.log(param);
});