• 使用echarts如何实现双y轴且实现指定数据使用y轴呢?

    在项目中经常使用echarts，我们经常会用到双y轴伸直多y轴去展示数据，默认所有数据都是使用左边y轴去展示数据的 , 我们需要自己去设置，具体使用某一个y轴去展示指定的某一个具体的数据。

    一、实现echarts双y轴

    1、只有一个y轴时，yAxis为对象
    1. yAxis: {
    2. 	type: 'value',
    3. 	name: 'y轴名称'
    4. },
    2、两个y轴时，yAxis为数组
    1. yAxis: [
    2.           {
    3.             type: 'value',
    4.             name:'左侧Y轴名称',
    5.             axisLabel: {
    6.               textStyle: {
    7.                 color: '#fff'
    8.               },
    9.               formatter: '{value}'  //鼠标移动上去显示的数据
    10.             },
    11.             splitLine: {
    12.               show: false,
    13.               lineStyle: {
    14.                 color: '#00ffff'
    15.               }
    16.             },
    17.             axisLine: {
    18.               show: true,
    19.               lineStyle: {
    20.                 color: '#B1BBC5',
    21.                 opacity: 0.3
    22.               }
    23.             }
    24.           },
    25.           {
    26.             type: 'value',
    27.             name:'右侧Y轴名称',
    28.             // min: 0,  //指定最小刻度
    29.             // max: 6000,   //指定最大刻度
    30.             axisLabel: {
    31.               textStyle: {
    32.                 color: '#fff'
    33.               },
    34.               formatter: '{value}'
    35.             },
    36.             splitLine: {
    37.               show: false,
    38.               lineStyle: {
    39.                 color: '#00ffff'
    40.               }
    41.             },
    42.             axisLine: {
    43.               show: true,
    44.               lineStyle: {
    45.                 color: '#B1BBC5',
    46.                 opacity: 0.3
    47.               }
    48.             }
    49.           }
    50.         ]

    二、展示数据

    1. series: [
    2.           {
    3.             name: '左边Y轴名称',
    4.             type: 'pictorialBar',
    5.             symbolSize: [20, 10],
    6.             symbolOffset: [-12, -5],
    7.             symbolPosition: 'end',
    8.             z: 12,
    9.             label: {
    10.               normal: {
    11.                 show: false,
    12.                 position: 'top',
    13.                 formatter: '{c}%'
    14.               }
    15.             },
    16.             data: '数据',
    17.             itemStyle: {
    18.               normal: {
    19.                 color: '#01BCD4',
    20.                 opacity: 1
    21.               }
    22.             }
    23.           },
    24.         {
    25.             name: '右边Y轴名称',
    26.             type: 'pictorialBar',
    27.             symbolSize: [20, 10],
    28.             symbolOffset: [12, -5],
    29.             symbolPosition: 'end',
    30.             yAxisIndex: 1,  //指定需要使用的Y轴
    31.             z: 12,
    32.             label: {
    33.               normal: {
    34.                 show: false,
    35.                 position: 'top',
    36.                 formatter: '{c}%'
    37.               }
    38.             },
    39.             data: '数据',
    40.             itemStyle: {
    41.               normal: {
    42.                 color: '#889665',
    43.                 opacity: 1
    44.               }
    45.             }
    46.           }
    47. ]
    其中重要指定使用某个Y轴展示数据的属性:
    yAxisIndex: 1,  //指定需要使用的Y轴

    小知识 : 坐标轴刻度标签数值以某一值为分界点改变颜色

    1. axisLabel: {
    2.   color: function(value, index) {
    3.       turn value >= 1000 ? "red" : "green";
    4.   }
    5. }

    三、参考代码

    1.  this.barOption = {
    2.         color: ['#3cefff'],
    3.         tooltip: {},
    4.         title: [
    5.           {
    6.             text: '光伏容量:MV',
    7.             left: '8%',
    8.             top: '8%',
    9.             textStyle: {
    10.               color: '#fff',
    11.               fontSize: 12,
    12.               fontWeight: 'normal'
    13.             }
    14.           },
    15.           {
    16.             text: '年度出力:MV',
    17.             right: '10%',
    18.             top: '8%',
    19.             textStyle: {
    20.               color: '#fff',
    21.               fontSize: 12,
    22.               fontWeight: 'normal'
    23.             }
    24.           }
    25.         ],
    26.         legend: {
    27.           data: ['光伏容量', '年度出力'],
    28.           textStyle: {
    29.             color: '#fff'
    30.           }
    31.           // top:"0%"
    32.         },
    33.         grid: {
    34.           backgroundColor: '#ffffff',
    35.           borderWidth: 0,
    36.           top: '15%',
    37.           left: '8%',
    38.           bottom: '10%',
    39.           height: '75%',
    40.           width: '82%'
    41.         },
    42.         xAxis: [
    43.           {
    44.             type: 'category',
    45.             data: xData,
    46.             axisTick: {
    47.               alignWithLabel: true
    48.             },
    49.             nameTextStyle: {
    50.               color: '#82b0ec'
    51.             },
    52.             axisLine: {
    53.               lineStyle: {
    54.                 color: '#B1BBC5',
    55.                 opacity: 0.3
    56.               }
    57.             },
    58.             axisLabel: {
    59.               // rotate: 30,
    60.               textStyle: {
    61.                 color: '#fff'
    62.               }
    63.             }
    64.           }
    65.         ],
    66.         yAxis: [
    67.           {
    68.             type: 'value',
    69.             axisLabel: {
    70.               textStyle: {
    71.                 color: '#fff'
    72.               },
    73.               formatter: '{value}'
    74.             },
    75.             splitLine: {
    76.               show: false,
    77.               lineStyle: {
    78.                 color: '#00ffff'
    79.               }
    80.             },
    81.             axisLine: {
    82.               show: true,
    83.               lineStyle: {
    84.                 color: '#B1BBC5',
    85.                 opacity: 0.3
    86.               }
    87.             }
    88.           },
    89.           {
    90.             type: 'value',
    91.             // min: 0,
    92.             // max: 6000,
    93.             axisLabel: {
    94.               textStyle: {
    95.                 color: '#fff'
    96.               },
    97.               formatter: '{value}'
    98.             },
    99.             splitLine: {
    100.               show: false,
    101.               lineStyle: {
    102.                 color: '#00ffff'
    103.               }
    104.             },
    105.             axisLine: {
    106.               show: true,
    107.               lineStyle: {
    108.                 color: '#B1BBC5',
    109.                 opacity: 0.3
    110.               }
    111.             }
    112.           }
    113.         ],
    114.         series: [
    115.           {
    116.             name: '光伏容量',
    117.             type: 'pictorialBar',
    118.             symbolSize: [20, 10],
    119.             symbolOffset: [-12, -5],
    120.             symbolPosition: 'end',
    121.             z: 12,
    122.             label: {
    123.               normal: {
    124.                 show: false,
    125.                 position: 'top',
    126.                 formatter: '{c}%'
    127.               }
    128.             },
    129.             data: photovoltaicCapacity,
    130.             itemStyle: {
    131.               normal: {
    132.                 color: '#01BCD4',
    133.                 opacity: 1
    134.               }
    135.             }
    136.           },      
    137.           {
    138.             name: '年度出力',
    139.             type: 'pictorialBar',
    140.             symbolSize: [20, 10],
    141.             symbolOffset: [12, -5],
    142.             symbolPosition: 'end',
    143.             yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
    144.             z: 12,
    145.             label: {
    146.               normal: {
    147.                 show: false,
    148.                 position: 'top',
    149.                 formatter: '{c}%'
    150.               }
    151.             },
    152.             data: yearOutPutY,
    153.             itemStyle: {
    154.               normal: {
    155.                 color: '#889665',
    156.                 opacity: 1
    157.               }
    158.             }
    159.           }
    160.         ]
    161.       }

  • 相关阅读:
    微服务实战系列之Sentinel
    医学图像 开源数据整理合集1
    大学生网页制作教程 学生HTML静态动物网页设计作业成品 简单网页制作代码 学生宠物网页作品
    扩展接口设计模式 （extension interface design pattern）
    CocosCreator3.8研究笔记（四）CocosCreator 脚本说明及使用（上）
    控制台中查看莫格命令的详细信息
    javaEE进阶 - Spring 更简单的读取和存储对象 - 细节狂魔
    kafka副本机制
    springboot +shiro 缓存用户退出bug
    Pandas中Series结构详解以及索引操作
  • 原文地址：https://blog.csdn.net/weixin_43273592/article/details/133855444