uniapp 使用echarts 做柱状统计图 和点击柱状图

2022-10-24  本文已影响0人  神一样的队友

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

上一篇下一篇

猜你喜欢

热点阅读