需求：点击柱状图的每一个柱子获取到 id（后台数据props传过来的）
失效原因：<script module=’echarts’ lang=”renderjs”> 中不允许使用this.$emit
使用的话我这里是会报这样的错误：
TypeError: Cannot read property ‘nid’ of undefined at view.umd.min.js:1 ,H5不会报错，APP上会报
解决方案：
父组件：
<diy-echarts
class=”echarts”
id=”echarts”
:option=”chartOption”
@chartClick=”onChartClick”
>
</diy-echarts>
import diyEcharts from ‘/components/echarts/echarts.vue’;
export default {
components: {
diyEcharts,
},
methods: {
onChartClick:function(index){
console.log(index)
},
}
}
components/echarts/echarts.vue
<template>
<view
@tap=”echarts.onClick”
class=”echarts”
:prop=”option”
:change:prop=”echarts.update”
>
</view>
</template>
<script>
export default {
name: ‘Echarts’,
props: {
option: {
type: Object,
required: true
}
},
methods:{
//重点
onViewClick(val){
console.log(‘onViewClick’)
this.$emit(“chartClick”,val);
}
}
}
</script>
<script>
export default {
name: ‘Echarts’,
props: {
option: {
type: Object,
required: true
}
}
}
</script>
<script module=”echarts” lang=”renderjs”>
export default {
data() {
return {
chart: null,
ownerInstance:null,//重点
}
},
mounted() {
// typeof window.echarts === ‘object’
if (window && window.echarts && typeof window.echarts === ‘function’) {
this.init()
}
else {
// 动态引入类库
const script = document.createElement(‘script’)
script.src = ‘static/echarts.js’
// script.src = ‘./static/echarts/echarts.min.js’
script.onload = this.init
document.head.appendChild(script)
}
},
methods: {
//调用 service 层的方法 重点
onClick(event, ownerInstance) {
console.log(‘onClick’, ownerInstance)
this.ownerInstance = ownerInstance;
},
/**
* 初始化echarts
*/
init() {
let _this = this;
// console.log(‘echarts’, JSON.stringify(this.$props, null, 2))
let opts = {};
if (this.option.width) {
opts.width = this.option.width;
}
if (this.option.height) {
opts.height = this.option.height;
}
this.chart = echarts.init(this.$el, null, opts);
// console.log(‘this.chart’, this.chart)
// console.log(‘this.option’, JSON.stringify(this.option, null, 2))
this.update(this.option)
window.onresize = () => {
_this.chart.resize();
}
},
/**
* 监测数据更新
* @param {Object} option
*/
update(option) {
let _this = this;
if (this.chart) {
// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
if (option) {
// tooltip
if (option.tooltip) {
// 判断是否设置tooltip的位置
if (option.tooltip.positionStatus) {
option.tooltip.position = this.tooltipPosition()
}
// 判断是否格式化tooltip
if (option.tooltip.formatterStatus) {
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option
.tooltip.formatFloat2, option.tooltip.formatThousands)
}
}
// console.log(‘option’,JSON.stringify(this.option, null, 2))
// 设置新的option
this.chart.setOption(option, option.notMerge)
this.chart.on(‘click’, (params)=> {
/*{
data:柱子对应的值,
dataIndex:柱子对应的值在data中的key
}*/
// this.$emit(‘chartClick’, {dataIndex:params.dataIndex});
setTimeout(()=>{
_this.ownerInstance.callMethod(‘onViewClick’, params.dataIndex)
},100);
})
}
}
},
/**
* 设置tooltip的位置，防止超出画布
*/
tooltipPosition() {
return (point, params, dom, rect, size) => {
//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
let x = point[0]
let y = point[1]
let viewWidth = size.viewSize[0]
let viewHeight = size.viewSize[1]
let boxWidth = size.contentSize[0]
let boxHeight = size.contentSize[1]
let posX = 0 //x坐标位置
let posY = 0 //y坐标位置
if (x < boxWidth) { //左边放不开
posX = 5
} else { //左边放的下
posX = x – boxWidth
}
if (y < boxHeight) { //上边放不开
posY = 5
} else { //上边放得下
posY = y – boxHeight
}
return [posX, posY]
}
},
/**
* tooltip格式化
* @param {Object} unit 数值后的单位
* @param {Object} formatFloat2 是否保留两位小数
* @param {Object} formatThousands 是否添加千分位
*/
tooltipFormatter(unit, formatFloat2, formatThousands) {
return params => {
let result = ”
unit = unit ? unit : ”
for (let i in params) {
if (i == 0) {
result += params[i].axisValueLabel
}
let value = ‘–‘
if (params[i].data !== null) {
value = params[i].data
// 保留两位小数
if (formatFloat2) {
value = this.formatFloat2(value)
}
// 添加千分位
if (formatThousands) {
value = this.formatThousands(value)
}
}
// #ifdef H5
result += ‘\n’ + params[i].seriesName + ‘：’ + value + ‘ ‘ + unit
// #endif
// #ifdef APP-PLUS
result += ‘<br/>’ + params[i].marker + params[i].seriesName + ‘：’ + value + ‘ ‘ + unit
// #endif
}
return result
}
},
/**
* 保留两位小数
* @param {Object} value
*/
formatFloat2(value) {
let temp = Math.round(parseFloat(value) * 100) / 100
let xsd = temp.toString().split(‘.’)
if (xsd.length === 1) {
temp = (isNaN(temp) ? ‘0’ : temp.toString()) + ‘.00’
return temp
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
temp = temp.toString() + ‘0’
}
return temp
}
},
/**
* 添加千分位
* @param {Object} value
*/
formatThousands(value) {
if (value === undefined || value === null) {
value = ”
}
if (!isNaN(value)) {
value = value + ”
}
let re = /\d{1,3}(?=(\d{3})+$)/g
let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
return s1.replace(re, ‘$&,’) + s2
})
return n1
}
}
}
</script>
<style lang=”scss” scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
renderjs内如何主动发起通讯？ https://ask.dcloud.net.cn/question/97817