1***@qq.com
1***@qq.com
  • 发布:2020-08-05 11:52
  • 更新:2020-10-31 12:03
  • 阅读:4843

uniapp里用echarts的图表,无法触发点击事件

分类:uni-app

                myCharts.on('click', function (params){  
                    console.log(params)  
                })

已经注册了事件,打印出来看到了,但是无法触发

2020-08-05 11:52 负责人:无 分享
已邀请:
h***@delephant.tech

h***@delephant.tech

https://www.cnblogs.com/qimeng/p/10238485.htm 这是解决方法,可以参考,刚找到

  • 1***@qq.com

    这个获取不到参数

    2022-07-18 10:01

1***@qq.com

1***@qq.com (作者)

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <div id="myChart" class="charts" ref="myChart"></div>  
    </view>  
</template>  

<script>  
    import echarts from "@/static/initEcharts"  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                myChart: null  
            }  
        },  
        onLoad() {  
        },  
        mounted() {  
            this.drawChart()  
        },  
        methods: {  
            drawChart() {  
                this.myChart = echarts.init(document.getElementById('myChart'))  
                const option = {  
                    tooltip: {  
                        trigger: 'item',  
                        formatter: '{a} {b}: {c} ({d}%)'  
                    },  
                    legend: { show: false },  
                    color: [ '#05a6ff', '#fff000', '#ff9000', '#00ffcf'],  
                    series: [  
                        {  
                            name: '党员统计',  
                            type: 'pie',  
                            selectedMode: 'single',  
                            radius: [0, '35%'],  
                            label: {  
                                position: 'center',  
                                formatter: '{a|{c}\n{b}}',  
                                rich: {  
                                    a: { color: '#fff'}  
                                }  
                            },  
                            labelLine: {  
                                show: false  
                            },  
                            data: [  
                                {value: 42, name: '平均年龄'},  
                            ]  
                        },  
                        {  
                            name: '年龄统计',  
                            type: 'pie',  
                            radius: ['50%', '80%'],  
                            label: {  
                                formatter: '{a|{b}\n{d}%}',  
                                rich: {  
                                    a: { color: '#333' },  
                                }  
                            },  
                            labelLine: {  
                                length: 10,  
                                length2: 10,  
                                lineStyle: { color: '#999' }  
                            },  
                            data: [  
                                {value: 3653, name: '35岁以下'},  
                                {value: 2768, name: '35岁到60岁'},  
                                {value: 2768, name: '60岁以上'},  
                            ]  
                        }  
                    ]  
                }  
                this.myChart.on('click', function (params){  
                    console.log(params)  
                })  
                this.myChart.setOption(option);  
                console.log(this.myChart)  
            },  
        }  
    }  
</script>  

<style>  
    #myChart{  
        margin: 0 auto;  
        height: 200px;  
        width: 100%;  
        margin: 0 auto;  
    }  
</style>  
Blind

Blind - 秃头中

作者你好,我也遇到同样的问题,请问你解决了吗?

1***@163.com

1***@163.com

作者你好,我也遇到了这样的问题,请问怎么解决呢?

h***@delephant.tech

h***@delephant.tech

你好,请问解决了吗?

该问题目前已经被锁定, 无法添加新回复