【uniapp-安卓使用echarts】

---

前言

例如：在uniapp-安卓中使用echarts与vue中使用echarts很不一样，主要区别于在android中没办法直接操作dom需要借用render.js层来进行交互，于是对echarts在安卓中的使用进行了一个封装。

---

tips:在uniapp-安卓中还有一些坑，1、在引入组件时的引入方式不生效；2、引入图片时不生效

//这种引入方式不行
components:{
 zujian:()=>import("@/pages/...")
}
//这种引入方式可以
import zujian from '@/pages/...'
components:{
	zujian
}

//这种引入方式不行 
<img src="" height="220" >
//必须使用uniapp自带图片标签 但是以下这种方式也不行
<image class="image" src="@/static/images/wap-doing/doing.png"></image>
//这种引入方式可以
<image class="image" src="/static/images/wap-doing/doing.png"></image>

一、echarts封装组件

<!--
    author:sza
    time:22/12/27
    tips:属性：1.moduleParam:传id 以及宽高的对象 2.optionData:传渲染数据
 -->
<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick"  :style="{ width:moduleParam.width, height:moduleParam.height}" :prop="optionData" :moduleParamProp="moduleParam"  :change:moduleParamProp="echarts.moduleParamUp" :change:prop="echarts.updateEcharts" :id="moduleParam.id" class="echarts" ></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				
			}
		},
		props:{
			moduleParam:{
				type:Object,
				default:()=> {
					return {
						id: "myCharts",
						width: "100%",
						height: "374rpx"
					}
				}
			},
			optionData:{
				type:Object,
				default:()=>{}
			},
		},
		onLoad() {

		},
		methods: {
			onViewClick(options) {
				this.$emit("getClickData",options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		data(){
			return{
				clickData:null
			}
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts(){
				myChart = echarts.init(document.getElementById(this.moduleParam.id),"echartsConfig")
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.optionData)
				// 点击传参
				myChart.on('click', params => {
					console.log(params)
					this.clickData = params
				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				try {
					myChart = echarts.init(document.getElementById(this.moduleParam.id),"echartsConfig")
					myChart.setOption(newValue)	
				} catch (error) { }
			},
			moduleParamUp(newvalue,oldvalue){},
			onClick(event, ownerInstance) {
				console.log(this.clickData)
				ownerInstance.callMethod('onViewClick',{
					value:this.clickData.value,
					name:this.clickData.name,
					dataIndex:this.clickData.dataIndex,
					seriesName:this.clickData.seriesName
				})
			}
		}
	}
</script>

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

二、使用方法

<template>
	<dom-echart :moduleParam="moduleParam1" :optionData="option"   @getClickData="getClickData"></dom-echart>
</template>

<script>
    import domEchart from '@/components/wap-echarts/index.vue'
	export default {
        props:['chartData'],
		components:{
			domEchart
		},
		data() {
			return {
				tabList: [{name: '上级交办'}, {name: '本级交办'}],
                curNow: 0,
                tabOneColor:'#FFFFFF',
                tabTwoColor:'rgba(0,0,0,0.45)',
                tabOneWeight:'bold',
                tabTwoWeight:'400',
				moduleParam1:{
					id:"moId1",
                    height:'374rpx',
                    width:'100%'
				},
                option : {
                    grid:{
                        top:'5%',
                        bottom:'32px',
                        left:'5%',
                        right:0,
                    },
                    tooltip: {
                        padding:12,
                        backgroundColor:" #fff",
                        textStyle:{
                            fontWeight: 600,
                            fontSize: 16,
                            color: 'rgba(0,0,0,0.85)',
                            lineHeight:20,
                        },
                        trigger: 'axis',
                        showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                        axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(43,163,253,0.10)',
                            width: '0'
                        },
                        },
						formatter: '{c0}'
                    },
                    xAxis: [
                        {
							type: 'category',
							data: this.chartData.x_xAxis,
							axisPointer: {
								type: 'shadow'
							},
							axisTick:{
								show:false // 不显示坐标轴刻度线
							},
							axisLine: {
								show: false, // 不显示坐标轴线
							},
							axisLabel: {//x轴文字的配置
								show: true,
                                interval: 0,
								textStyle: {
									fontWeight: 400,
									fontSize: 12,
									color: '#969799',
									textAlign: 'center'
								}
							},
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value',
                        min: 0,
                        max: 10,
                        interval: 2,
						splitLine :{
						  lineStyle:{
						      type:'dashed'//虚线
						  },
						  show: true //隐藏
						},
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: false, // 不显示坐标轴线
                        },
                        axisLabel: {//x轴文字的配置
							show: true,
							textStyle: {
								fontWeight: 400,
								fontSize: 12,
								color: '#969799',
								textAlign: 'left'
							}
							},
                        },
                    ],
                    series: [
                        {
                        type: 'bar',
                        itemStyle:{
                            color:"#2BA3FD",
                            borderRadius:3,
                        },
                        data:this.chartData.y_series,
                        barWidth:16
                        },
                    ]
                }
				}
		},
		methods: {
			getClickData(option){
				console.log(option)
			},
		}
	}
</script>

---