echarts中折线图双Y轴

最新推荐文章于 2024-05-22 09:23:54 发布

进阶的巨人001

最新推荐文章于 2024-05-22 09:23:54 发布

阅读量561

点赞数 1

文章标签： echarts 前端 js

本文链接：https://blog.csdn.net/weixin_45389051/article/details/131128667

版权

在这里插入图片描述
option

option1 = {
  title: {
    text: '运动量对比',
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: 5,
    textStyle: {
      color: 'white'
    },
    data: [
      { name: '步数', icon: 'rect' },
      { name: '运动量', icon: 'rect' },
    ]
  },
  grid: {
    left: '5%',
    bottom: '3%',
    right: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: { show: false },
    axisLabel: {
      textStyle: {
        color: "white", //刻度颜色
        fontSize: 8  //刻度大小
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#0B3148',
        width: 1,
        type: 'solid'
      }
    },
    data: ['小班', '球班', '白班']
  },
  yAxis: [{
    name: '运动量',
    type: 'value',
    axisTick: { show: false },
    axisLabel: {
      textStyle: {
        color: "white", //刻度颜色
        fontSize: 8  //刻度大小
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 1,
        type: 'solid',
      }
    },
    splitLine: {
      show: false
    },
  },
  {
    name: '步数',
    type: 'value',
    axisTick: { show: false },
    axisLabel: {
      textStyle: {
        color: "white", //刻度颜色
        fontSize: 8  //刻度大小
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 1,
        type: 'solid'
      }
    },
    axisLabel: { formatter: '{value}k' },
    splitLine: {
      show: false
    },
  }

  ],
  series: [
    {
      name: '步数',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          color: '#04FF9D'
        },
        lineStyle: {
          normal: {
            color: '#04FF9D',
            opacity: 1
          }
        }
      },
      data: [90000, 74641, 94000]
    },
    {
      name: '运动量',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#B25DFF'
        },
        lineStyle: {
          normal: {
            color: '#B25DFF',
            opacity: 1
          }
        }
      },
      data: [30, 50, 40]
    },
  ]
}