Echart用法介绍

Echart用法介绍

Echart官方文档

Echart实例创建步骤

1.准备一个DOM容器
2.通过init方法初始化一个echarts实例
3.将图标配置数据传给setOption方法绘制图表

Echart常用配置信息介绍

基本配置信息：

grid（图表相对画布的位置）
title（表头）
tooltip（鼠标移上悬浮窗显示数据）
legend（不同线或色块代表的数据类型）
xAxis（x轴配置信息）
yAxis（y轴配置信息）
series（表的类型以及对应类型的数据配置）

tooltip 浮窗配置

{
	trigger: 'axis',
	// formatter: '{a0}: {c0}',// formatter用于自定义浮窗内容格式，可以简单的格式化为 '{a0}: {c0}'。也可以自定义文字和样式，通过function return一个完整的DOM结构
	formatter: function(params) {
		let result = `<p style="color:#ffffff;font-size:12px">${params[0].axisValue}</p>`
		params.forEach(function(item) {
		let hasUnit = item.seriesName.includes('率') ? '%' : ''
		result += `<p><span style="display:inline-block;margin-right:5px;margin-bottom:-1px;width:10px;height:10px;border-radius:1px;background-color:${item.color}"></span><span style="color:#ffffff;font-size:12px">${item.seriesName}: ${item.value}${hasUnit}</span></p>`
		})
		return result
	},
	backgroundColor: 'rgba(51,51,51,0.8)',
	textStyle: {
		color: '#ffffff',
		align: 'left',
		fontSize: '12',
		fontFamily: 'PingFangSC-Regular'
	},
	axisPointer: {
		lineStyle: {
			color: '#ccc',
			width: 0.5
		}
	},
	padding: [5, 10, 7, 10]
}

legend: 底部每条折线的label配置

legend: {
	data: [],// 每条折线的数据
	top: 'auto',
	bottom: 0,
	icon: 'rect',
	//  这个字段控制形状  类型包括 circle 圆形，rect 正方形，roundRect，triangle，diamond，pin，arrow，none
	itemWidth: 11,
	itemHeight: 11,
	itemGap: 10,// 图例每项之间的间隔
	borderWidth: 0
},

series: 图表类型及配置

        series: {
		  name: '名字',
          type: 'line',// 折线类型
          data:[], // 每条折线的数据
          smooth: false,// 是否平滑显示，即折线图or曲线图
          hoverAnimation: true,// 动画
          showSymbol:true,// 是否显示折线上的每个折点（空心圆）
          symbolSize: 5,// 折点（空心圆）大小
          yAxisIndex: 0,// 参照轴
          itemStyle: {// 折线样式配置
            normal: {
              color: '色值',
              borderWidth: 1,
              lineStyle: {color: '色值',width: 2}
            },
			areaStyle:{// 区域阴影
				color: {
				  type: 'linear',// 阴影类型
				  x: 0,x2: 0,y: 0,y2: 1,
				  colorStops: [
					{offset: 0, color: color[i]},
					{offset: 1,color: 'rgba(250,250,250,0)'}
				  ]
				}
			}
          },

xAxis、yAxis： x、y轴的配置，下面为x轴示例

	{
          type: 'category',// 类型： category：类目轴、value：数值轴、time：时间轴、log：对数轴
          boundaryGap: false,
          data: data,
          offset: 10,// 相对默认位置的偏移
          max: 'dataMax',// 坐标轴刻度最大值，设置为特殊值 dataMax时取，数据在该轴上的最大值作为最大刻度
          min: 'dataMin',// 坐标轴刻度最小值，设置为特殊值 dataMin时取，数据在该轴上的最小值作为最小刻度
          splitLine: {// 刻度线
            show: true,
            lineStyle: {
              color: CHART_COLOR.axle,
              width: 0.5
            }
          },
          axisLabel: {// 坐标值
            color: CHART_COLOR.label,
            fontSize: 12,
            align: 'center',
            showMinLabel: true,// 是否显示最小的坐标值
            showMaxLabel: true// 是否显示最大的坐标值
          },
          axisTick: {// 坐标刻度
            show: false
          },
          axisLine: {// 坐标轴
            show: true,
            lineStyle: {
              color: CHART_COLOR.axle,
              width: 0.5
            }
          }
        }

dataZoom 带滑动条的图表配置：

dataZoom: [
	{
		end: this.countNum1(series.xAxisData.length), // 数据窗口范围的结束百分比
		type: 'slider',// 类型：inside 可通过鼠标/手指 拖拽、缩放、漫游。slider 单独的滑动条，可在滑动条上进行缩放或漫游
		left: '30px',
		show: true,
		width: 12,
		handleSize: '0',
		yAxisIndex: [0],
		borderColor: 'rgba(250,250,250,0)',
		fillerColor: '#999',
		showDataShadow: false, // 是否显示数据阴影 默认auto
		showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
		realtime: true // 是否实时更新
	},
	{
		type: 'inside',
		yAxisIndex: [0],
		zoomLock: true// 是否锁定图表区域的大小
	}
]

dataZoom需要配置在想要显示的坐标配置信息内。需要注意的是end值的配置，关系到整个图表的展示大小。end值代表滑动条结束位置所处在的全部柱状图的第几个位置，也可以认为是滑动条的宽度代表着多少个柱状图。具体计算方式需自行尝试，不同大小不同数量的图表计算方式不同。

Echart监听窗口变化实时自适应大小的实现方式以及避免报错的办法

实现方法：

为window添加resize监听调用echart实例的resize方法

关于窗口监听会出现的报错的说明：

在初始化echart实例后，如果直接给window对象添加事件监听，会在页面销毁后报错找不到echart对象，所以需要在销毁页面的时候同时清掉window的监听函数。
具体实现过程：
1. 在data中创建一个空的属性名

	myChart: ''

2. 在methods内创建一个调用echart实例resize方法的函数

	resize() {
      this.myChart && this.myChart.resize()
    }
	
3. 创建并初始化echart实例并给window对象添加resize事件监听（注意初始化的时候最好写在$nextTick方法内，避免偶然的图表绘制不完整的问题）

	let el = document.getElementById(this.chartId)
	this.$echarts.dispose(el) // 销毁之前的实例
	let myChart = this.$echarts.init(el)
	this.myChart = myChart
	window.addEventListener('resize', this.resize)
	
4. 在页面销毁之前清除window对象的时间监听，清空data内用于存储echart实例的属性名

	beforeDestroy() {
      this.myChart = ''
      window.removeEventListener('resize', this.resize) // 取消监听
    }