VUE之Echarts可视化图表双Y轴配置详解

快来打我* 2022-10-11 06:18 339阅读 0赞

**具体实现步骤：**  
配置双y轴

yAxis: [
              { 
                type: 'value',
                axisLabel: { 
                  formatter: '{value}'
                },
                axisTick: { 
                  show: false// 刻度
                }
              },
              { 
                type: 'value',
                axisLabel: { 
                  formatter: '{value}%'
                },
                axisLine: { 
                  show: false // 轴线
                },
                splitLine: { 
                  show: false // 网格线
                },
                axisTick: { 
                  show: false// 刻度
                }
              }
            ]

配置series

this.option.series = [
                { 
                  name: '平均金额',
                  type: 'line',
                  // smooth: true,
                  yAxisIndex: 0,//这里注意：0为第一轴；1为第二轴
                  data: [140, 232, 101, 264, 90]
                },
                { 
                  name: '同比',
                  type: 'line',
                  // smooth: true,
                  yAxisIndex: 1,
                  lineStyle: { 
                    type: 'dashed'
                  },
                  data: [100, 66, 88, 22, 77]
                },
                { 
                  name: '环比',
                  type: 'line',
                  // smooth: true,
                  yAxisIndex: 1,
                  lineStyle: { 
                    type: 'dashed'
                  },
                  data: [22, 55, 47, 38, 87]
                }
              ]

配置好这两项后来看效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]  
这里未选取第二轴折线情况下，去掉了x、y轴刻度线及第二y轴网格线、轴线，看起来简洁了不少  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1][]  
选取第二轴折线情况下只会出现第二轴轴线值

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/c4a161216c7b46dbacc81f87e3850ada.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/6eece61e21eb448e8514e9db75fce321.png