108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<!--
|
||
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: () => {},
|
||
},
|
||
},
|
||
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/js/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 => {
|
||
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) {
|
||
ownerInstance.callMethod('onViewClick', {
|
||
value: this.clickData.value,
|
||
name: this.clickData.name,
|
||
dataIndex: this.clickData.dataIndex,
|
||
seriesName: this.clickData.seriesName
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|