用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景

用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景。

renderItem = function (params, api) {console.log('------------')var xValue = api.value(1);console.log(api.value(1))console.log(params)var currentSeriesIndices = api.currentSeriesIndices();// console.log(currentSeriesIndices)var count = (currentSeriesIndices.length-1)/2;var barLayout = api.barLayout({count: count});console.log(barLayout)// var point = api.coord([xValue, api.value(params.seriesIndex-2)]);var point = api.coord([api.value(0), xValue]);console.log(point)if(params.seriesIndex > 1){point[0] += barLayout[params.seriesIndex-count].offset;}point[1] -= 20;return {type: 'rect',shape: {x: point[0],y: point[1],width: barLayout[params.seriesIndex-count].width,height: 10},z2:1,style:api.style({fill: xValue>3?'green':'red', stroke: null})};
}option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},toolbox: {feature: {dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}}},legend: {data: ['蒸发量', '降水量', '平均温度']},xAxis: [{type: 'category',data: ['1月', '2月', '3月'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '水量',axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',axisLabel: {formatter: '{value} °C'}}],label: {show: true,position: 'top'},series: [ {name: '蒸发量',type: 'bar',data: [2.0, 4.9, 7.0]}, {name: '降水量',type: 'bar',data: [2.6, 5.9, 9.0]}, {name: '降水量1',type: 'bar',data: [3.6, 6.9, 8.0]}, {name: '平均温度1',type: 'custom',yAxisIndex: 1,renderItem: renderItem,data: [2.1, 2.2, 2.3]},{name: '平均温度2',type: 'custom',yAxisIndex: 1,renderItem: renderItem,data: [3.1, 3.2, 3.3]},{name: '平均温度3',type: 'custom',yAxisIndex: 1,renderItem: renderItem,data: [4.1, 4.2, 4.3]},{type: 'line',yAxisIndex: 1,markLine: {label:{position:'insideEndTop'},data: [{yAxis: 3}]}}]
};

测试：

粘贴上面的code到https://echarts.apache.org/examples/zh/editor.html可以看效果。

用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景相关推荐

自定义Camera系列之：SurfaceView + Camera
一.前言之前一直想把 Camera 系列的写一下,拖了很久,现在慢慢填坑吧. 首先介绍 SurfaceView + Camera 的组合.虽然从 Android 5.0 后推荐使用 Camera2 ...
自定义Camera系列之：SurfaceView + Camera2
一.前言之前已经介绍过过时的旧 Camera 的使用了,毕竟在从 Android 5.0 后推荐使用 Camera2 了,所以现在开始介绍 Camera2 相关使用.老规矩还是从 SurfaceVi ...
wing带你玩转自定义view系列（3）模仿微信下拉眼睛
发现了爱神的自定义view系列,我只想说一个字:凸(艹皿艹 ) !!相见恨晚啊,早看到就不会走这么多弯路了另外相比之下我这完全是小儿科..所以不说了,这篇是本系列完结篇....我要从零开始跟随爱哥脚 ...
python双柱状图与双折线图_双坐标实现图标中同时存在柱状图和折线图
工作中经常会遇到在处理数据的时候,需要将柱状图和折线图同时放到一张表中,这怎么实现的呢,下面将讲述. 工具/原料 excel表方法/步骤 1 以上表为例,将不良品重量和不良品率同时做到一张表上为目标 ...
自定义Camera系列之：TextureView + Camera2
一.前言之前已经介绍过过时的旧 Camera 的使用了,毕竟在从 Android 5.0 后推荐使用 Camera2 了,所以现在开始介绍 Camera2 相关使用.该篇介绍 TextureView ...
origin两个图层图例合并_科学网—Origin双坐标画法以及图例添加之方法一（以origin8.0为例） - 蔡延江的博文...
1. 在A(x), B(Y), C(Y)列中输入或者粘贴数据,如果有误差线的则在A(x), B(Y), C(yEr),D(Y),E(yEr)列中输入或者粘贴相应的数据,如图1: 2.先选择A(x)和B ...
origin两个图层图例合并_科学网-Origin双坐标画法以及图例添加之方法一（以origin8.0为例）-蔡延江的博文...
1. 在A(x), B(Y), C(Y)列中输入或者粘贴数据,如果有误差线的则在A(x), B(Y), C(yEr),D(Y),E(yEr)列中输入或者粘贴相应的数据,如图1: 2.先选择A(x)和B ...
自定义Camera系列之：TextureView + Camera
一.前言上一篇介绍了自定义Camera系列之:SurfaceView + Camera,接着我们介绍使用 TextureView + Camera 的组合. 为什么选择 TextureView ? ...
自定义Camera系列之：GLSurfaceView + Camera2
一.前言假如你要使用 OpenGL ES 来渲染相机的话,使用 GLSurfaceView 将是一个很常用的选择. 这里介绍 GLSurfaceView + Camera2 的组合. 如果你对 Ca ...

用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景

用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景相关推荐

最新文章

热门文章