echarts散点图怎么给每一个点加标注线和自定义的文字

发布于 2022-09-11 21:02:43 字数 2830 浏览 15 评论 0

可以复制到官方案例里看我目前写的https://echarts.baidu.com/exa...,默认只能显示data里的数据,但是我需要显示4/3和403(4排3行,403号),不知道怎么添加额外数组的数据,还有就是能不能以饼图里的这种形式展示折现和文字
图片描述图片描述

option = {
    xAxis: {},
    yAxis: {},
    aria: {
        show: true
    },
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter',
    },
    {
        symbolSize: 20,
        data: [
            [4, 3, 403],
            [5, 3, 503],
        ],
        type: 'scatter',
        itemStyle: {
            normal: {
                label: {
                    color: '#7B38F8',
                    show: true,
                    position: 'top',
                    formatter: function (params, ticket, callback) {
                        var s = params.value[0] + "/" + params.value[1] + '<br/>' +params.value[2]; 
                        return s
                    },
                },
            },
        },
    },
    ],
    graphic: [
        {
            type: 'group',
            left: 'center',
            bottom: 130,
            children: [
                {
                    type: 'rect',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    shape: {
                        width: 190,
                        height: 90
                    },
                    style: {
                        fill: '#fff',
                        stroke: '#555',
                        lineWidth: 2,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        fill: '#333',
                        text: [
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字'
                        ].join('\n'),
                        font: '14px Microsoft YaHei'
                    }
                }
            ]
        }
    ],


};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

迷路的信 2022-09-18 21:02:43

请问这个问题解决了吗

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文