1.需求:点击柱状图的每一个柱子获取到 id(后台数据props传过来的)
2.失效原因:<script module='echarts' lang="renderjs"> 中不允许使用this.$emit
使用的话我这里是会报这样的错误:TypeError: Cannot read property 'nid' of undefined at view.umd.min.js:1 ,H5不会报错,APP上会报
可以了解一下:
解决方案:
html:
<view @tap="echarts.onClick" :prop="zztEchast" :change:prop="echarts.update" class="echarts" id="echartsLV"></view>
普通的Script
<script>
export default {
props: {
zztEchast: Object
},
methods:{
//重点
onViewClick(val){
this.$emit("clickitem",val);
}
}
}
</script>
<script module='echarts' lang="renderjs">
<script module='echarts' lang="renderjs">
export default {
data() {
return {
chart: null,
ownerInstance:null,//重点
}
},
mounted() {
let _this = this;
_this.initEcharts();
},
methods: {
initEcharts() {
let _this = this;
const echarts = require('@/static/echarts.min1.js');
_this.chart = echarts.init(document.getElementById("echartsLV"), {
height: 'auto',
width: 'auto',
})
_this.update(_this.zztEchast);
window.onresize = () => {
_this.chart.resize();
}
},
update(zztEchast) {
let _this=this
const echarts = require('@/static/echarts.min1.js');
if (zztEchast) {
const option = {
grid: {
left: 30,
right: 10,
top: 20,
bottom: 30,
containLabel: false,
},
xAxis: {
type: 'category',
data: zztEchast.keys,
boundaryGap: true,
axisLabel: {
interval: 0,
fontSize: 9,
},
},
yAxis: {
show: true,
type: 'value',
name: '',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
axisLine: {
lineStyle: {
type: 'solid',
width: '1', //坐标线的宽度
fontSize: 9
}
},
axisLabel: {
textStyle: {
fontSize: 9
}
}
},
series: [{
data: zztEchast.values,
type: 'bar',
showBackground: false,
barWidth: 15, //柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12,
color: "#37b3f9"
}
},
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#37b3f9" // 0% 处的颜色
}, {
offset: 0.6,
color: "#37b3f9" // 60% 处的颜色
}, {
offset: 1,
color: "#37b3f9" // 100% 处的颜色
}], false)
},
},
}
],
legend: {
show: false
},
}
this.chart.setOption(option);
//每个柱子的点击事件 重点
this.chart.on('click', function(params) {
setTimeout(()=>{
_this.ownerInstance.callMethod('onViewClick', params.data.id)
},100);
})
}
},
//调用 service 层的方法 重点
onClick(event, ownerInstance) {
this.ownerInstance = ownerInstance;
}
}
}
</script>
总结:js 中传值的方法最主要的已经备注,onClick,this.chart.on('click', function(params),onViewClick 这三个方法