Echart多个y轴的设置方法

最新推荐文章于 2024-07-29 15:05:35 发布

zuo_zuo_blog

最新推荐文章于 2024-07-29 15:05:35 发布

阅读量4.9k

点赞数 2

分类专栏： Vue+echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/123007556

版权

Vue+echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.在yAxis中设置多个对象就是多个y轴，设置位置position在左边还是右边
axisTick：y轴刻度线
axisLine：y轴线
splitLine：是否显示网格
yAxisIndex：择index为1的Y轴作为参考系

   yAxis: [{
            position:'left',
            type: 'value',
            min: 0,
            max: 260,
            interval: 40,
            axisLabel: {
              show: false,
              inside: true
            }
          },{
           position:'right',
            type: 'value',
            min: 25,
            max: 51,
            interval: 1,
            axisLabel: {
              show: false,
              inside: true
            },
            axisTick:{       //y轴刻度线
              show:false
            },
            axisLine:{        //y轴线
              show:false
            },
            splitLine: {
              show: false, //是否显示网格
            }
          }],
             series: [{
            name: 'T',
            type: 'line',
            yAxisIndex: 1,  //选择index为1的Y轴作为参考系
            symbolSize: '10',
            lineStyle: { color: '#4485f4' },
            data: this.temperatureItems,
            label: {
              show: true,
              color: '#000000',
              position: 'top',
              formatter: params => {
                if (params.dataIndex === 0) {
                  return 'Temp'
                }
                return ''
              }
            },
          }]