echarts制作两个纵轴的折线图

在开发过程中，我们经常会遇到两个y轴数据标准不同的情况，而一般情况下echarts只有一个纵轴，这时就要花点心思了。

技术关键： yAxis写成数组，包含自己需要的纵轴； yAxisIndex：纵轴的下标

实现效果：

代码如下：

只截取了重要部分代码。

yAxis: [{boundaryGap: [0, '50%'],type: 'value',name: '满足率',position: 'left',axisLabel: {formatter: function(value, index) {return value;}},axisTick: {inside: 'false',length: 10,}},{boundaryGap: [0, '50%'],type: 'value',name: '满足率目标',axisLabel: {formatter: function(value, index) {console.log('val', value)return value;}},//offset: 50, //坐标轴移动50position: 'right',axisTick: {inside: 'false',length: 10,}}],series: [{name: '满足率',type: 'line',data: [],yAxisIndex: 0},{name: '满足率目标',type: 'line',data: [],yAxisIndex: 1}]

其中有一个要点：多纵轴的情况下，很大概率会导致x轴不均分的情况，如下：

这时只需调整下纵轴的分配即可，

yAxis: [{name: "单位：(人)",type: 'value',min:Min1,max:Max1,splitNumber: 5,interval: (Max1 - Min1) / 5},{type: 'value',min:Min2,max:Max2,splitNumber: 5,interval: (Max2 - Min2) / 5}
]

另外一个坑，如果因为tooltip内容太多导致超出屏幕的时候可以尝试：

echarts tooltip应用的是绝对定位，且overflow属性为hidden。所以超出部分不会展示。

tooltip: {confine: true
}

echarts制作两个纵轴的折线图相关推荐

echarts制作多个纵轴的折线图
实现效果: 页面代码如下: <script type="text/javascript"> $(function (){var myChart = echarts.in ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
echarts 横坐标显示一个月,excel折线图横坐标最后一个点选择数据选不上是什么原因？...
excel折线图横坐标最后一个点选择数据选不上是什么原因? 如果你说的是折线图横坐标选中的数据最后一个无法显示在横坐标上您可以尝试一下可以右击横坐标轴-设置坐标轴格式-选择大小与属性-对其方式-文 ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
Echarts学习一：制作简单的柱形图、折线图、饼图
具体可以参考官网文档,已经写的很详细了:个性化图表样式 ECharts 提供了丰富的自定义配置选项,并且能够从全局.系列.数据三个层级去设置数据图形的样式.ECharts 中的饼图主要是通过扇形的弧度 ...
tableau做折线图_用Tableau制作10种漂亮的折线图
公众号:Tableau从入门到精通制作该10种折线图所用的数据均来自于以下: 数据源提取: 链接: https://pan.baidu.com/s/1qSV9xnN9JGyoy_SqXvcEEw 提 ...
Echarts通用饼图、柱状图、折线图封装
简单封装Echarts js不熟可能有问题,学习之后在完善数据类型实现代码具体调用数据类型我这里用了三种数据类型饼图 var pieData = [{'name' : 'aaa', 'v ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
起步平台 WeX5 集成百度echarts实现微信公众号中折线图颜色交错显示
前端时间做了一个基于微信公众号的问卷调查.数据填报的项目,在里面涉及了一些图表的分析展示,本来以为很简单的一个功能,却着实让我折腾了好长一段时间,到处查找资料.翻看API也没有找到解决办法,真的想说, ...
excel分析图表制作，如何轻松创建折线图、柱状图、饼图
在Excel中通过数据间的关系选择合适的图表,轻松创建折线图.柱状图.饼图使其表达的主题和内容更加简单清晰. 下面我们通过Smartbi大数据分析工具介绍excel分析图表制作方法,如何制作常用的图 ...

echarts制作两个纵轴的折线图

echarts制作两个纵轴的折线图相关推荐

最新文章

热门文章