-
浅夏、伊人恋花2021-12-10 07:26
- 56
- 0
我的代码如下：<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> <script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;var data1 = [0, -294, -211, -211, 0]var data2 = ['-', 98, '-', 1, '-']var data3 = ['-', '-', 15, '-', '-']var data4 = [-294,'-', '-', '-',-210]var displayData1 = data1.map(v => Math.abs(v));var displayData4 = data4.map(v => Math.abs(v));option = { title: { text: 'Accumulated Waterfall Chart' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { let tar; if (params[1].value !== '-') { tar = params[1]; } else { tar = params[0]; } return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value; } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ["上周利润", "采购侧市场因素", "销售侧市场因素", "生产侧因素", "本周利润"] }, yAxis: { type: 'value', inverse: true }, series: [ { name: '辅助', type: 'bar', stack: '总量', itemStyle: { borderColor: 'transparent', color: 'transparent' }, emphasis: { itemStyle: { borderColor: 'transparent', color: 'transparent' } }, data: displayData1, label: { normal: { show: true, position: 'top', textStyle: { //数值样式 color: '#fff', fontSize: 14 }, formatter: function (p) { return data1[p.dataIndex] > 0 ? ('+' + p.value) : ('-' + p.value); } } }, }, { name: '收入', type: 'bar', stack: '总量', label: { show: true, position: 'bottom' }, data: data2 }, { name: '支出', type: 'bar', stack: '总量', label: { show: true, position: 'bottom' }, data: data3 }, { name: '其他', type: 'bar', stack: '总量', label: { show: true, position: 'bottom' }, data: displayData4 } ]};if (option && typeof option === 'object') { myChart.setOption(option);} </script> </body></html>效果图如下：但是柱子上的数值没有正常显示正常的正负值我最终想要的类似效果如图：请问要怎么解决值的问题？
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部