uniapp 使用echarts 做柱状统计图 和点击柱状图
main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
vue中
<template>
<view >
<div id="myChart" :style="{width:'750rpx',height:'600rpx'}"></div>
</view>
</template>
export default {
mounted(){
this.drawLine()
},
data() {
return {
list_echarts:null
select_index:0
}
},
}
methods: {
drawLine(){
this.list_echarts = this.$echarts.init(document.getElementById('myChart'));
},
get_Data(){
this.option{
}
this.list_echarts.setOption(this.option)
//点击柱状图
this.list_echarts.getZr().on('click',params =>{
let pointInPixel = [params.offsetX, params.offsetY]
if (this.list_echarts.containPixel('grid', pointInPixel)) {
let xIndex = this.list_echarts.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
console.log(xIndex)
this.select_index = xIndex
}
})
}
点击柱状图使用
this.list_echarts.on('click',params =>{
})
一值提示 on方法错误,找到大神的文章才得以解惑
参考文章:http://t.zoukankan.com/jane2160-p-11737549.html