uniapp使用renderjs实现echarts

一、（1）插件市场，导入使用renderjs

// static文件夹中生成一个echarts.js文件
//使用
<!-- 列表页 -->
<template>
	<view>
		<!-- 2 start -->
		<view class="sales-view">
			<sale-column-chart :chartData="chartDataObj02"></sale-column-chart>
		</view>
		<!-- 2 end -->
	</view>
</template>

<script>
//（1），引入组件
import saleColumnChart from '@/components/echarts/index.vue';
export default {
	//（2），挂载
	components: {
		saleColumnChart
	},
	data(){
		return{
			chartDataObj02:{
				categories:['1','2','3','4','5','6','7','8','9','10','11','12'],
				series:[
				  {
					barWidth: 10,  
					color: "#4B7ED4",
					name: "实收",
					stack: "Ad",
					type: "bar",
					yAxisIndex: 1,
					data:["0.00","0.00","0.00","20724.97","30529.00","43640.88","13428.60","0.00","0.00","0.00" ,"0.00" ,"0.00"],
					itemStyle:{barBorderRadius:[2,2,0,0]}
				  },
				  {
					barWidth: 10,  
					color: "#D5E2F7",
					name: "应收",
					stack: "Ad",
					type: "bar",
					yAxisIndex: 1,
					data:["0.00","0.00","0.00","20724.97","30529.00","43640.88","13428.60","0.00","0.00","0.00" ,"0.00" ,"0.00"],
					itemStyle:{barBorderRadius:[2,2,0,0]}
				  },
				  {
					barWidth: 10,  
					color: "#47D1E3",
					name: "回款率",
					stack: "Ad",
					type: "line",
					yAxisIndex: 0,
					data:["0.00","0.00","0.00","0.00","1060.15","485.31","451.82","136.41","0.00","0.00" ,"0.00" ,"0.00"],
					itemStyle:{barBorderRadius:[2,2,0,0]}
				  },
				]
			},
			//
		}
	},
	onLoad() {
		
	},
	methods:{
		getTreeIndexTap(row){
			console.log('----',row)
		}
	},
}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f6f7fb;
	}
	.sales-view{
		margin: 20rpx;
		border-radius: 16rpx;
		background-color: white;
		padding: 20rpx;
		.title{
			font-size: 26rpx;
		}
	}
</style>

一、（2）封装组件

// An highlighted block
<!-- uniapp插件市场 renderjs-echarts-demo -->
<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view v-if="Object.keys(option).length > 0" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<!-- <button @click="changeOption">更新数据</button> -->
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	props: {
		chartData: {
			type: Object
		},
		axisLabelShow: {
			type: Boolean,
			default: true
		},
		rotate: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			option: {}
		};
	},
	mounted() {
		this.$nextTick(() => {
			
			if (Object.keys(this.chartData).length > 0) {
				this.option = {
					tooltip: {
						show: false,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						icon: 'circle',
						textStyle: {
							//图例文字的样式
							color: '#BEC1CD', // 单独设置某一个图列的颜色
							fontSize: 12
						},
						x: 'right'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							axisTick: {
								//x轴刻度线
								show: false
							},
							type: 'category',
							splitLine: { show: false },
							data: this.chartData.categories,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#F0F0F0',
									fontSize: 12
								}
							},
							axisLabel: {
								//x轴文字的配置
								show: true,
								rotate: this.rotate,
								interval: 0, //强制显示
								textStyle: {
									color: '#B7BAC6'
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							// name: '(元)',
							position: 'left',
							alignTicks: true,
							// nameGap: 18,
							// nameLocation: 'start',
							axisTick: {
								//x轴刻度线
								show: false
							},
							splitLine: {
								lineStyle: {
									type: 'border', //虚线
									color: '#EEEEEE'
								},
								show: true //隐藏
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: '#BEC1CD',
									fontSize: 12
								}
							},
							axisLabel: {
								formatter: this.axisLabelShow ? '{value}%' : '{value}'
							}
						},
						{
							type: 'value',
							// name: '(次)',
							position: 'right',
							alignTicks: true,
							axisTick: {
								//x轴刻度线
								show: false
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: '#BEC1CD'
								}
							},
							splitLine: {
								lineStyle: {
									color: '#EEEEEE',
									type: 'border' //虚线
								},
								show: false //隐藏
							},
							axisLabel: {
								show: this.axisLabelShow,
								formatter: this.axisLabelShow ? '{value}万' : '{value}'
							}
						}
					],
					series: this.chartData.series
				};
			}
			 // console.log('1---',this.option)
		});
		
	},
	methods: {
		changeOption() {
			const data = this.option.series[0].data;
			// 随机更新示例数据
			data.forEach((item, index) => {
				data.splice(index, 1, Math.random() * 40);
			});
		},
		onViewClick(options) {
			console.log(options);
		}
	}
};
</script>

<script module="echarts" lang="renderjs">
let myChart
export default {
	mounted() {
		if (typeof window.echarts === 'function') {
				this.initEcharts()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'static/echarts.js'
			script.onload = this.initEcharts.bind(this)
			document.head.appendChild(script)
		}
	},
	methods: {
		initEcharts() {
			myChart = echarts.init(document.getElementById('echarts'))
				myChart.setOption(this.option)
			// 观测更新的数据在 view 层可以直接访问到
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			 if(myChart){
				 myChart.setOption(newValue)
			 }
			// 监听 service 层数据变更
		},
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
			ownerInstance.callMethod('onViewClick', {
				option: this.option
			})
		}
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.echarts {
	width: 100%;
	height: 300px;
}
</style>