用文档中的示例也可以复现https://uniapp.dcloud.net.cn/tutorial/renderjs.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
以下是基于这示例,改的更简易的版本
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view
@click="echarts.onClick"
:prop="option"
:change:prop="echarts.updateEcharts"
id="echarts"
class="echarts"
></view>
<button @click="changeOption">更新数据</button>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
option: {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
},
};
},
onLoad() {},
methods: {
changeOption() {
const data = this.option.series[0].data;
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40);
});
},
onViewClick(options) {
console.log(options);
},
},
};
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
// if (typeof window.echarts === 'function') {
// this.initEcharts()
// } else {
// // 动态引入较大类库避免影响页面展示
// const script = document.createElement('script')
// // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
// script.src = 'static/echarts.js'
// script.onload = this.initEcharts.bind(this)
// document.head.appendChild(script)
// }
},
methods: {
// initEcharts() {
// myChart = echarts.init(document.getElementById('echarts'))
// // 观测更新的数据在 view 层可以直接访问到
// myChart.setOption(this.option)
// },
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
// myChart.setOption(newValue)
console.log('updateEcharts');
},
onClick(event, ownerInstance) {
console.log('onClick')
// 调用 service 层的方法
// ownerInstance.callMethod('onViewClick', {
// test: 'test'
// })
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
margin-top: 100px;
width: 100%;
height: 300px;
}
</style>
d***@yiring.com
等一个后续
2025-03-19 11:49