一、效果图

二、主要代码

 this.taskxAxis = []this.taskSeries = [[], []]taskInit() {function calMax(arr) {var max = arr[0]for (var i = 1; i < arr.length; i++) {// 求出一组数组中的最大值if (max < arr[i]) {max = arr[i]}}var maxint = Math.ceil(max / 10) // 向上取整var maxval = maxint * 10 // 最终设置的最大值return maxval // 输出最大值}var maxappreg = calMax(this.taskSeries[0]) //任务数值var maxactive = calMax(this.taskSeries[1]) //发送量值var interval_left = maxappreg / 5 //左轴间隔var interval_right = maxactive / 5 //右轴间隔this.taskEchartLine = echarts.init(this.$refs['taskLineChart'])window.addEventListener('resize', () => {this.taskEchartLine && this.taskEchartLine.resize()})this.taskOption = {tooltip: {trigger: 'axis',backgroundColor: '#fff', // 提示框背景formatter: params => {return `<div style="border:0;color:#666;text-align: left;width:150px"><p style="color:#000"> ${params[0].axisValue}</p><div class="flex justify-content-space-between"><div><span> 任务数:${(function () {if (params[0].data >= 10000) {return params[0].data / 10000 + '万'} else if (params[0].data < 10000) {return params[0].data}})()}</span></div></div><div class="flex justify-content-space-between"><div><span> 发送量:${(function () {if (params[1].data >= 10000) {return params[1].data / 10000 + '万'} else if (params[1].data < 10000) {return params[1].data}})()}</span></div></div></div> `},axisPointer: {type: 'shadow',},},color: ['rgb(65,169,203)', 'rgb(246,126,60)'],legend: {data: ['任务数', '发送量'],left: 'right',selectedMode: false, //取消图例上的点击事件},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},xAxis: {type: 'category',boundaryGap: false,data: this.taskxAxis,},yAxis: [{type: 'value',name: '任务数',min: 0,max: maxappreg,splitNumber: 5,interval: interval_left,axisLine: {//y轴show: false,},axisTick: {//y轴刻度线show: false,},axisLabel: {color: '#444343',formatter: function (value, index) {var valueif (value >= 10000) {value = value / 10000 + '万'} else if (value < 10000) {value = value}return value},},},{type: 'value',name: '发送量',min: 0,max: maxactive,splitNumber: 5,interval: interval_right,axisLine: {//y轴show: false,},axisTick: {//y轴刻度线show: false,},axisLabel: {color: '#444343',formatter: function (value, index) {var valueif (value >= 10000) {value = value / 10000 + '万'} else if (value < 10000) {value = value}return value},},},],series: [{name: '任务数',type: 'line',data: this.taskSeries[0],},{name: '发送量',type: 'line',yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用data: this.taskSeries[1],},],}this.taskEchartLine.setOption(this.taskOption)},

链接: https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

echarts中设置双Y轴左右刻度线一致相关推荐

实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
echarts分享(四):双y轴图表刻度均匀分布问题
今天分享一个小问题,内容不多. 双y轴图表中,为了图表的美观,经常会隐藏一侧的y轴刻度线,仅显示一侧的刻度线.那么问题就来了,两个y轴的数据数值大小不同,常常会导致刻度线的刻度分布不均匀,该如何解决呢 ...
轻松完美-实现ECharts双Y轴左右刻度线一致
不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value' ...
origin中画双y轴
origin中画双y轴一 .导入数据二.操作步骤 1 选中数据,画图画点状图,连成线出现问题,选择双Y轴 2 设置左右Y轴数据 1. 在图的右侧建立新的Y轴,图 - 新图层(轴)- " ...
可视化篇（四）——— python绘制双y轴、箱线图、概率分布三种图形及案例
可视化篇(四)--- python绘制双y轴.箱线图.概率分布三种图形及案例摘要绘制双y轴图形绘制箱线图绘制概率分布图摘要本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形 ...
python双坐标轴箱线图,python绘制双y轴、箱线图、概率分布三种图形及案例
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形,并给出了具体案例源代码供 ...
Echarts 设置柱状图 y 轴最小刻度为1
Echarts x轴文字显示不全.间隔显示问题 Echarts 饼图不显示 / 隐藏数据为 0 的展示项在 Vue 中使用 Echarts 很常见,但实现起来有很多可以优化的小细节,这篇博客主要介绍 ...
Apache POI 生成折线图+柱状图设置双Y轴并导出word文档
实际项目中遇到的问题,相关信息实在较少,怕自己忘记,菜鸟记录一下我设置的是双Y轴的组和图表.左侧为折线图Y轴,右侧为柱状图Y轴. 直接上代码. // An highlighted block pub ...
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="c ...

echarts中设置双Y轴左右刻度线一致

echarts中设置双Y轴左右刻度线一致

一、效果图

二、主要代码

echarts中设置双Y轴左右刻度线一致相关推荐

最新文章

热门文章