文章目录
前言
例如：在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>