uniapp使用echarts

1. 采用了renderjs来实现echarts，具体demo可以查看 renderjs-echarts-demo
2. echarts的版本我选择了 [email protected]，高版本不支持具体点击哪一项

npm install [email protected] --save

下载完后，我们提取 echarts.js 这个文件，放到 static/echarts这个目录下，然后把 node_modules 里面的 echarts 删掉

3. this.optionPie.series[0].label.normal.formatter 好像得写在echarts初始化的里面，不然会失效

<template>
	<view class="page-lay">
		<view class="echarts-layouts">
			<view @click="echarts.onClick" :prop="optionPie" :change:prop="echarts.updateEcharts" id="echartsPie"
				class="echarts">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				optionPie: {},
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				let resData = [{
						name: '回头客',
						value: 122,
						allmoney: '20%',
						color: '#5d99f4'
					},
					{
						name: '小区营销',
						value: 122,
						allmoney: '30%',
						color: '#65d164'
					},
					{
						name: '电商',
						value: 122,
						allmoney: '40%',
						color: '#ff6661'
					},
					{
						name: '活动推广',
						value: 122,
						allmoney: '50%',
						color: '#c92396'
					},
					{
						name: '材料商推广',
						value: 122,
						allmoney: '60%',
						color: '#face55'
					},
					{
						name: '其它',
						value: 122,
						allmoney: '70%',
						color: '#48e1da'
					}
				]

				let seriesData = resData.map(item => {
					return {
						name: item.name,
						value: item.value,
						percentage: item.percentage,
						itemStyle: {
							normal: {
								color: item.color
							}
						}
					}
				})

				let legendData = resData.map(item => item.name);

				this.optionPie = {
					title: {
						// text: '客户饼形分析图',
						// x: 'center',
						// top: 10
						text: '总客户',
						subtext: '102,234',
						x: 'center',
						y: 'center'
					},
					legend: {
						orient: 'horizontal',
						bottom: 'bottom',
						data: legendData
					},
					series: [{
						type: 'pie',
						radius: ['30%', '50%'],
						itemStyle: {
							borderRadius: 8
						},
						label: {
							normal: {
								show: true,
								position: 'outside',
								// formatter: '{c}'
							},
						},
						data: seriesData
					}, {
						type: 'pie',
						radius: ['30%', '50%'],
						itemStyle: {
							borderRadius: 8
						},
						label: {
							normal: {
								show: true,
								position: 'inside',
								// formatter: '{d}%'
							},
						},
						data: seriesData
					}]
				};
			},
			onViewClick(params) {
				console.log(params);
			},
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart, myParams;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				console.log(echarts.version);
				myChart = echarts.init(document.getElementById('echartsPie'))
				this.optionPie.series[0].label.normal.formatter = (res) => res.name;
				this.optionPie.series[1].label.normal.formatter = (res) => res.data.allmoney;
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.optionPie);
				myChart.on('click', res => {
					myParams = res;
				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				/*在此加数据格式，需要将optionPie里面的formatter 注释掉，
				* 不然会报  You may have an infinite update loop in 
				* watcher with expression "optionPie" 错误
				*/
				newValue.series[0].label.normal.formatter = res => res.value;
				newValue.series[1].label.normal.formatter = res => {					
					return res.name + '\n' + res.data.allmoney + '\n' + res.percent;
				};
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				if (myParams) {
					ownerInstance.callMethod('onViewClick', {
						data: myParams.data,
						value: myParams.value,
						name: myParams.name,
						dataIndex: myParams.dataIndex
					})

					myParams = null;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-lay {
		padding-top: 12px;
	}

	.echarts-layouts {
		width: calc(100vw - 24px);
		margin-left: 12px;
		background-color: white;
		border-radius: 5px;
	}

	/deep/ .echarts {
		width: calc(100vw - 24px);
		height: 360px;
	}
</style>

下面是效果图

下面是点击某一项的提示