暂时的的解决方法:
<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]
}],
dataZoom: [{
start: 0,
end: 60,
type: 'inside'
}]
}
}
},
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, 1)
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
data() {
return {
clickEvent: null,
datazoomEvent: null,
}
},
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)
myChart.on('click', (event) => {
this.clickEvent = event
})
myChart.on('datazoom', event => {
this.datazoomEvent = event
});
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
if (!this.clickEvent) {
return
}
const {
event: _events,
...datas
} = this.clickEvent
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', datas)
this.clickEvent = null
},
onDatazoom(event, ownerInstance) {
if (!this.datazoomEvent) {
return
}
const {
event: _events,
...datas
} = this.datazoomEvent
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', datas)
this.datazoomEvent = null
}
}
}
</script>
2 个回复
只吃蛋糕的狐
请问解决了吗
圣名科技
我将楼主的js格式化了一下,我还没试行不行
正常js
renderjs