文章目录
前言
对于一些频繁的dom操作，uniapp提供了一个renderjs方案，是一个运行在视图层的js，大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大，因为h5逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式。小程序依然采用wxs方案，可以使用u-chart等第三方插件。
一、renderjs语法简单回顾
1.引入
script标签添加lang="renderjs", module=“随意命名”
<script module="echarts" lang="renderjs">
</script>
2.逻辑层向renderjs传值
在元素标签上添加 :change:name="renderScript.方法名" ,其中name为元素属性,renderScript为module定义名称，.方法用于监听传入值
<view :name="realName" :change:name="echarts.updateName"></view>
<script>
export default{
data(){
return {
realName:'小李'
}
}
}
</script>
<script module="echarts" lang="renderjs">
export default{
methods:{
//逻辑层realName值变化将触发该方法
updateName(newValue, oldValue, ownerInstance, instance){
console.log(newValue)//小李
}
}
}
</script>
3. renderjs向逻辑层传值
ownerInstance.callMethod(逻辑层方法名，值)
<view @click="echarts.send"></view>
<script>
export default{
methods:{
//接收值
receive(data){
console.log(data.name)//小李
}
}
}
</script>
<script module="echarts" lang="renderjs">
export default{
methods:{
//传值
send(event,ownerInstance){
ownerInstance.callMethod('receive',{
name:'小李'
})
}
}
}
</script>
二、项目中使用echarts
其中echarts.js放置static目录下，需手动下载放入
代码示例
<template>
<view id="echarts" class="echarts" @click="echarts.onClick" :prop="optionData" :change:prop="echarts.updateEcharts">
</view>
</template>
<script>
export default {
data() {
return {
//配置
optionData: {
title: {
text: '温度'
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['温度']
},
// dataZoom: [{
// type: "inside", // 支持双指缩放
// start: 0,
// end: 100,
// zoomOnMouseWheel: true, // 开启滚轮缩放
// }, ],
xAxis: {
data: ["北京", "天津", "武汉", "上海", "成都", "南京"]
},
yAxis: {
// axisLabel: {
// formatter: value => {
// return `${value}°C`
// },
// }
},
series: [
{
name: '温度',
type: 'line',
data: [6, 8, 11, 18, 20, 17]
}]
}
}
},
onLoad() {
},
methods: {
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart;
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// #ifdef APP-PLUS
script.src = 'static/echarts.js'
// #endif
// #ifdef H5
script.src = '/static/echarts.js'
// #endif
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
//初始化
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
myChart && myChart.setOption && myChart.setOption(this.optionData)
},
// 监听逻辑层配置变化
updateEcharts(newValue, oldValue, ownerInstance, instance) {
//修复app端yAxis或者xAxis ,axisLabel.formatter无效问题
// if ( newValue?.yAxis?.axisLabel) {
// newValue.yAxis.axisLabel.formatter = function formatter(value) {
// return `${value}°C`
// }
// }
myChart && myChart.setOption && myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
//修复H5端tooltip不显示,app端tooltip不好点击显示问题
const touche = event.changedTouches[0];
const x = touche.pageX;
const y = touche.pageY - event.target.offsetTop;
var xIndex = myChart.convertFromPixel({
seriesIndex: 0
}, [x, y])[0];
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: xIndex
});
}
}
}
</script>
<style>
.echarts {
width: 100%;
height: 600rpx;
}
</style>
三、填坑说明
提示：经过上面的引入方式，就能像在pc端一样方式使用配置echarts，但还是有一些兼容性bug，下面记录下遇到几个坑和解决方式
1.tooltip不显示问题
增加点击事件计算点击位置算出点击点对应图表内容值，使用dispatchAction手动触发显示tooltip，详见上面示例onClick方法
2.yAxis或者xAxis ,axisLabel.formatter无效问题
此问题H5端正常，只会出现在App端，解决方法在配置改变监听函数内在重新赋值formatter函数，详见上面示例updateEcharts方法内注释内容
3.dataZoom,type: "inside"无效
出现在APP端，此问题跟引入echarts.js版本有关系，不同版本兼容性不一样，推荐：https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js