Echarts图表的通用配置

通用配置

通用配置指的就是任何图表都能使用的配置

- 标题： title

1、文字样式
textStyle
2、标题边框
borderWidth、 borderColor、 borderRadius
3、标题位置
top、bottom、left、right

-提示框： tooltip

tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
1、触发类型：trigger

trigger: 'item' //默认值
trigger: 'axis'

2、触发时机：triggerOn

triggerOn: 'mouseover' //默认值
triggerOn: 'click'

3、格式化：formatter
字符串模板

formatter: `{b} 成绩是 {c}`

回调函数

formatter: function (params) {
   console.log(params)
   return params[0].name + '的分数是：' + params[0].value
}

-工具栏按钮： toolbox

toolbox工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具

toolbox: {
  feature: {
    saveAsImage: {}, //保存为图片
    dataView: {}, //数据视图
    restore: {}, //配置项还原
    dataZoom: {}, //数据区域缩放
    magicType: { //动态类型切换
      type: ['bar','line']
    }
  }
},

-图例： legend

legend:图例，用于筛选系列，需要和series配合使用

• legend中的data是一个数组
• legend中的data的值需要和series数组中某组数据的name值一致

legend: {
	data: ['语文', '数学']
},
series: [
	{
		name: '语文',
		type: 'bar',
		data: [88, 92, 63, 77, 94, 80, 72, 86]
	},
	{
		name: '数学',
		type: 'bar',
		data: [63, 77, 22, 22, 55, 66, 47, 88]
	}
]