Echarts 交错正负轴

本来是要在winfrom 中实现下面图形效果，琢磨很久没有结果

<!--THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-negative2
-->
<!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/dist/echarts.min.js"></script><!-- Uncomment this line if you want to dataTool extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>--><!-- Uncomment this line if you want to use gl extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>--><!-- Uncomment this line if you want to echarts-stat extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>--><!-- Uncomment this line if you want to use map<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>--><!-- Uncomment these two lines if you want to use bmap extension<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>--><script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};var option;var labelRight = {position: 'right'
};
option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter: (params) => {if (!params.length) return ''let s = params[0].axisValueLabel + '<br/>'for (const iterator of params) {// 如果是负数则反转let d = iterator.data < 0 ? -iterator.data : iterator.datas += iterator.marker + iterator.seriesName + '：' + d + '<br/>'}return s}},legend: {data: ['利润', '支出', '收入']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'value',axisLabel: {formatter: (value) => {// 负数取反 显示的就是正数了if (value < 0) return -valueelse return value}}}],yAxis: [{type: 'category',axisTick: {show: false},data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],series: [{name: '收入',type: 'bar',stack: '总量',label: {show: true},data: [320, 302, 341, 374, 390, 450, 420]},{name: '支出',type: 'bar',stack: '总量',label: {show: true,position: 'left',formatter: (value) => {// 值都是负数的 所以需要取反一下return -value.data}},data: [-120, -132, -101, -134, -190, -230, -210]}]
};if (option && typeof option === 'object') {myChart.setOption(option);
}</script></body>
</html>

参控图例

参考https://www.jianshu.com/p/cf45deb7fde2

Echarts 交错正负轴相关推荐

echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
echarts将x轴展示在图标上方
echarts让x轴固定在上方在echarts中,普通折线图x轴默认在图标下方,如果要展示在图标上面,需要配置一个属性 xAxis的position属性设置为top 配置后,展示效果如下这样就 ...
echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
echarts中y轴设置刻度_ECharts中y坐标轴刻度的属性
坐标轴刻度作为直角坐标系中重要的组成部分,我们需要学会合理的设置坐标轴的刻度,本节列举了一些 ECharts 中 y 轴刻度的一些属性设置.如果您还不知道如何显示坐标轴刻度,不晓得怎么控制 y 轴刻度 ...
echarts自定义X轴、Y轴间距
echarts自定义X轴.Y轴间距 1.自定义间距 1.自定义间距最近做一个项目,要求x.y 轴间距自定义,因为项目数据X轴为时间轴.Y轴为对数数据轴,由于x轴的时间轴各段时间点返回密度不均匀,所以 ...

Echarts 交错正负轴

Echarts 交错正负轴相关推荐

最新文章

热门文章