Echarts中饼状图,图例显示value而不是name

直接上代码

 formatter(name) {
                        var tarValue;
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        var v = tarValue;
                        return [
                            tarValue
                        ]
                    }

效果图

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 ECharts 3D 饼状图图例的自动轮播可以通过以下几个步骤来实现: 1. 首先,确保你已经正确引入了 ECharts 库,并创建了一个包含饼状图的容器。 ```html <!-- 引入 ECharts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> <!-- 创建一个容器 --> <div id="chart-container" style="width: 600px; height: 400px;"></div> ``` 2. 在 JavaScript ,配置饼状图的数据和图例。同时,设置 `legend.type` 属性为 `'scroll'`,表示图例采用滚动模式。 ```javascript // 获取容器 var container = document.getElementById('chart-container'); // 创建图表实例 var chart = echarts.init(container); // 配置数据和图例 var option = { series: [{ type: 'pie3D', data: [ { value: 335, name: '数据1' }, { value: 310, name: '数据2' }, { value: 234, name: '数据3' }, // 添加更多数据... ] }], legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20 } }; // 使用配置项显示图表 chart.setOption(option); ``` 3. 最后,监听窗口大小变化事件,并在事件发生时重新渲染图表,以便适应窗口大小变化。 ```javascript // 监听窗口大小变化事件 window.addEventListener('resize', function() { // 重新渲染图表 chart.resize(); }); ``` 通过以上步骤,你可以实现 ECharts 3D 饼状图图例的自动轮播效果。图例会在图表容器自动滚动显示,以便展示所有的图例项。注意,这里使用了 ECharts 4.9.0 版本的库进行示例,你可以根据实际情况使用相应版本的库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值