[apache/echarts]vue-echarts使用饼图,效果出现,但是缺少legend字段的data值(侧边可选择是否查看改数据),实例上面没有问题,我也拉取了vue的实例查看过,但是代码上找不出问题,不知是否是引入问题

2024-08-22 583 views
1

以下是我vue组件中的代码

import ECharts from 'vue-echarts/components/ECharts'
 import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/polar'

option: {
                    title: {
                        text: '饼图程序调用高亮示例',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }

回答

5

这个问题很奇怪,以前使用过echarts,但第一次使用vue-echarts, 求教!

3

image image

0

是在网页还是什么环境?

7

没必要使用vue-echarts,直接一个div 设置 ref. 在echarts.init() 的时候传入div的ref值就好了,后续操作和常规的一样.

或者看我这个例子

<div slot="container" class="container" ref="pie"></div>
this.e = echarts.init(this.$refs.pie, 'light')
4

这是本地打开的

7

下载该插件也并没有指定版本,vue插件demo下载看过,本地打开是ok的,但作用在我这就有问题了,demo引入的文件太多了,我只引入了需要的

2

这样是可行,但我不只是需要完成一个饼图而已,有很多其他类型的图,只是饼图这出现这个问题了,所以还是得解决这个问题,实在不行再考虑饼图单独弄一套

9

看插件的package.json里面有版本或者GitHub仓库看

2

我本地项目和demo版本一致,都是3.1.2

1

找到了demo里面有引入legend文件,但我的没有引,只引入了生成图的,这贴可以封了,谢谢你的帮助

2

问题已解决,感谢各位回复的友人,该问题是没有引入legend文件,请原谅我的小白操作,第一次在vue中使用该插件,各位,有缘再开贴相见~~~