echarts双y轴对齐

「爱情、让人受尽委屈。」 2022-09-03 00:10 386阅读 0赞

import * as echarts from 'echarts';
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
        {
            type: 'category',
          
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '蒸发量',
            max: Math.ceil(5.2/10)*10,
            min:  Math.ceil(-10/10)*10,
           interval: Math.ceil(15.2/10),
         
        },
        {
            type: 'value',
            name: '温度',
           max: Math.ceil(150.7/10)*10,
             min:  Math.ceil(-50/10)*10,
           interval: Math.ceil(200.7/10),
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [-10, 5.2]
        },
        {
            name: '降水量',
            type: 'bar',
            yAxisIndex:1,
            data: [-50, 2, 150.7]
        },
        
    ]
    };
    
    option && myChart.setOption(option);

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts中双y轴刻度线对齐的问题

splitNumber设置分割的段数，必须一致设置的max一定是大于或等于数据最大值，计算找出数据中最大值向上取整 interval强制设置坐标轴分割间隔，

ゝ一世哀愁。/ 2023年01月03日 04:27/ 0 赞/ 284 阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 454 阅读

相关双Y轴echarts

[https://www.makeapie.com/editor.html?c=xE1oQek3jr][https_www.makeapie.com_editor.html_c

待我称王封你为后i/ 2022年11月10日 14:17/ 0 赞/ 352 阅读

相关 echarts双y轴对齐

import as echarts from 'echarts'; var chartDom = document.getElementById('

「爱情、让人受尽委屈。」/ 2022年09月03日 00:10/ 0 赞/ 387 阅读

相关 ECharts Y轴倒置+DataSet

参考资料： 1. [https://blog.csdn.net/u013402515/article/details/49149265][https_blog.csdn.

待我称王封你为后i/ 2022年05月20日 09:10/ 0 赞/ 345 阅读

相关 Echarts（五）双y轴0刻度线不对齐解决思路demo

option = { xAxis: { type: 'category', data: ['Mon',

蔚落/ 2022年05月17日 09:53/ 0 赞/ 729 阅读

相关 Echarts实现双y轴

转载自：[https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1][htt

浅浅的花香味﹌/ 2022年05月13日 05:46/ 0 赞/ 1010 阅读

相关 Echarts双Y轴柱状图

var option = { title: { text: '一周推送及完成率'

Bertha 。/ 2022年02月16日 11:59/ 0 赞/ 719 阅读

相关 Echarts3实例双Y轴折线图

实现效果 ![这里写图片描述][70] 知识点双Y轴：yAxisIndex Y轴垂直标题调整左侧Y轴刻度代码实现 opti

电玩女神/ 2021年09月16日 07:06/ 0 赞/ 718 阅读

相关 Echarts3实例双Y轴柱状图

实现效果 ![这里写图片描述][70] 知识点双Y轴：yAxisIndex Y轴垂直标题最大最小值显示调整左侧Y轴刻度代码实现

骑猪看日落/ 2021年09月16日 07:06/ 0 赞/ 829 阅读