Article directory
foreword
For example: using echarts in uniapp-Android is very different from using echarts in vue. The main difference is that in android, there is no way to directly manipulate the dom and you need to borrow the render.js layer for interaction. encapsulation.
Tips: There are still some pitfalls in uniapp-Android, 1. The import method does not take effect when importing components; 2. It does not take effect when importing pictures
//这种引入方式不行
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>
1. echarts package components
<!--
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>
2. How to use
<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>