美文网首页
uniapp 使用echarts 做柱状统计图 和点击柱状图

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

作者: 神一样的队友 | 来源:发表于2022-10-24 14:58 被阅读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

    相关文章

      网友评论

          本文标题:uniapp 使用echarts 做柱状统计图 和点击柱状图

          本文链接:https://www.haomeiwen.com/subject/ozrgzrtx.html