uniapp中引入echarts图表功能：

---

1.法一：通过依赖包引入

1、首先新建一个文件夹，在文件夹中使用命令：
npm install echarts mpvue-echarts --save

2、进入 node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender 就是我们需要的第三方库。
copy出来，放到你的uni-app的项目文件夹=》node_modules 目录里面

3、在components里面新增一个echarts组件=>echarts.vue

4、组件代码如下：

<template>
	<view>
		<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
	</view>
</template>
 
<script>
	export default {
		name: 'Echarts',
		props: {
			option: {
				type: Object,
				required: true
			}
		}
	}
</script>
 
<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts'
	import mpvueEcharts from 'mpvue-echarts'
	
	export default {
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			if (typeof window.echarts === 'object') {
				this.init()
			} else {
				// 动态引入类库
				const script = document.createElement('script')
				script.src = '../static/echarts.min.js'//报错：Uncaught SyntaxError: Unexpected token  < 表示此路径引入错误
				// script.src = './static/echarts/echarts.min.js' 
				script.onload = this.init
				document.head.appendChild(script)
			}
		},
		methods: {
			/**
			 * 初始化echarts
			 */
			init() {
				this.chart = echarts.init(this.$el)
				this.update(this.option)
			},
			/**
			 * 监测数据更新
			 * @param {Object} option
			 */
			update(option) {
				if (this.chart) {
					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
					if (option) {
						// tooltip
						if (option.tooltip) {
							// 判断是否设置tooltip的位置
							if (option.tooltip.positionStatus) {
								option.tooltip.position = this.tooltipPosition()
							}
							// 判断是否格式化tooltip
							if (option.tooltip.formatterStatus) {
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
							}
						}
                    // 设置新的option
					this.chart.setOption(option, option.notMerge)
					}
					
				}
			},
			/**
			 * 设置tooltip的位置，防止超出画布
			 */
			tooltipPosition() {
				return (point, params, dom, rect, size) => {
					//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
					let x = point[0]
					let y = point[1]
					let viewWidth = size.viewSize[0]
					let viewHeight = size.viewSize[1]
					let boxWidth = size.contentSize[0]
					let boxHeight = size.contentSize[1]
					let posX = 0 //x坐标位置
					let posY = 0 //y坐标位置
					if (x < boxWidth) { //左边放不开
						posX = 5
					} else { //左边放的下
						posX = x - boxWidth
					}
					if (y < boxHeight) { //上边放不开
						posY = 5
					} else { //上边放得下
						posY = y - boxHeight
					}
					return [posX, posY]
				}
			},
			/**
			 * tooltip格式化
			 * @param {Object} unit 数值后的单位
			 * @param {Object} formatFloat2 是否保留两位小数
			 * @param {Object} formatThousands 是否添加千分位
			 */
			tooltipFormatter(unit, formatFloat2, formatThousands) {
				return params => {
					let result = ''
					unit = unit ? unit : ''
					for (let i in params) {
						if (i == 0) {
							result += params[i].axisValueLabel
						}
						let value = '--'
						if (params[i].data !== null) {
							value = params[i].data
							// 保留两位小数
							if (formatFloat2) {
								value = this.formatFloat2(value)
							}
							// 添加千分位
							if (formatThousands) {
								value = this.formatThousands(value)
							}
						}
						// #ifdef H5
						result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
						// #endif
						
						// #ifdef APP-PLUS
						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
						// #endif
					}
					return result
				}
			},
			/**
			 * 保留两位小数
			 * @param {Object} value
			 */
			formatFloat2(value) {
				let temp = Math.round(parseFloat(value) * 100) / 100
				let xsd = temp.toString().split('.')
				if (xsd.length === 1) {
					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
					return temp
				}
				if (xsd.length > 1) {
					if (xsd[1].length < 2) {
						temp = temp.toString() + '0'
					}
					return temp
				}
			},
			/**
			 * 添加千分位
			 * @param {Object} value
			 */
			formatThousands(value) {
				if (value === undefined || value === null) {
					value = ''
				}
				if (!isNaN(value)) {
					value = value + ''
				}
				let re = /\d{1,3}(?=(\d{3})+$)/g
				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
					return s1.replace(re, '$&,') + s2
				})
				return n1
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>

5、在static文件夹中添加=》echarts.min.js (node_modules 目录=》echarts目录=》dist里面有)

6.在页面中使用组件:

<template>
	<view>
		<view>echarts示列</view>
		<echarts :option="option" style="height: 300px;"></echarts>
	</view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'; //引入Echarts组件
	
	export default {
		data() {
			return {
				option: {},
				echartsyAxisData:[],//存放yAxis的数据
				echartsseriesData:[],//存放series的数据
			};
		},
		components: {
			echarts
		},
		mounted() {
			this.echart();
		},
		methods: {
			//#### 2、联调：      思路：就是将option里面的数据（data）用后台数据替换掉
			echart() {
				this.option = {//这里是从Echarts复制过来的内容
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// Use axis to trigger tooltip
							type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '3%',
						right: '5%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',
						// data: ['业务1', '业务2', '业务3', '业务4', '业务5', '业务6', '业务7']
					},
					series: [
						{
						  type: 'bar',
						  stack: 'total',
						  label: {
							show: true
						  },
						  emphasis: {
							focus: 'series'
						  },
						  // data: [820, 832, 901, 934, 1290, 1330, 1320,1000]
						}
					]
				};
				// 将固定（死）数据覆盖掉
				this.option.yAxis.data=this.echartsyAxisData   
				this.option.series[0].data=this.echartsseriesData
			},	
		}
	};
</script>

2.法二：通过插件引入

1、插件市场=》百度图表
2、插件下面有演示方法

3.法三:与vue导入一样(uniapp当vue一样使用是没有问题的)（推荐）

4.遇到问题：

uni-app使用echarts图表给图表添加点击事件/uni-app 解决echarts在h5中 tooltips及部分功能失效问题: