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

最新推荐文章于 2024-04-10 14:31:39 发布

努力不够偷懒来凑

最新推荐文章于 2024-04-10 14:31:39 发布

阅读量460

点赞数

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/qq_32166301/article/details/131328600

版权

效果实现：

在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,
            }
          ],