vue+echarts折线图使用两条Y轴

最新推荐文章于 2024-08-01 12:56:53 发布

原创最新推荐文章于 2024-08-01 12:56:53 发布 · 691 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #前端

本文介绍了如何在Vue.js项目中结合Echarts库创建一个具有两条Y轴的折线图。通过在Echarts配置的yAxis选项中设定两个独立的轴，并在series中为每个数据系列指定对应的yAxisIndex，成功实现了效果。

效果实现：

在yAxis设置中：

yAxis: [
            {
              type: "value",
              splitLine:false,
              position: 'left',//控制Y轴的方向
              alignTicks: true,
              //  改变Y轴颜色
              axisLine:{
                  lineStyle:{
                      color:'#20E3F1',
                  }
              },                         
              //  改变Y轴字体颜色和大小  
              axisLabel: {
                  textStyle: {
                      color: 'rgba(206, 223, 255, 0.6)',
                      fontSize:'9'
                  },
                  formatter: '{value}'
              },   
            },
            {
              type: "value",
              splitLine:false,
              position: 'right',
              alignTicks: true,
              //  改变Y轴颜色
              axisLine:{
                  lineStyle:{
                      color:'#20E3F1',
                  }
              },                         
              //  改变Y轴字体颜色和大小  
              axisLabel: {
                  textStyle: {
                      color: 'rgba(206, 223, 255, 0.6)',
                      fontSize:'9'
                  },
                  formatter: '{value}'
              },   
            },
          ],

在series里面增加yAxisIndex: 1,

series: [
            {
              name: "用餐人数",
              type: "line",
              itemStyle: {
                  color: '#FBC900'
              },
              areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                          offset: 0,
                          color: 'rgba(251, 201, 0, 0.3)'
                      },
                      {
                          offset: 1,
                          color: 'rgba(251, 201, 0, 0.2)'
                      }
                  ])
              },
              emphasis: {
                focus: "series",
              },
              data: yPeopleData,
            },
            {
              name: "交易额",
              type: "line",
              itemStyle: {
                  color: '#07A9E8'
              },
              yAxisIndex: 1,//使用的事配置的第二天Y轴
              areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                          offset: 0,
                          color: 'rgba(7, 169, 232, 0.3)'
                      },
                      {
                          offset: 1,
                          color: 'rgba(7, 169, 232, 0.2)'
                      }
                  ])
              },
              emphasis: {
                focus: "series",
              },
              data: yMoneyData,
            }
          ],