echarts柱状图和折线图双图表配置项

椒盐大肥猫

已于 2023-10-30 10:08:42 修改

阅读量260

点赞数

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

于 2023-10-30 10:08:29 首次发布

本文链接：https://blog.csdn.net/qq_42832446/article/details/134081804

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

{
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['新增客户数', '新增客户两年内回款情况'],
          type: 'scroll',
          selectedMode: false // 控制是否可以通过点击图例改变系列的显示状态
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            alignTicks: true, // 开启该配置项自动对齐刻度
            axisLabel: {
              formatter: '{value}万元'
            },
            name: '新增客户两年内回款情况',
            minInterval: 1
          },
          {
            type: 'value',
            alignTicks: true, // 开启该配置项自动对齐刻度
            minInterval: 1,
            name: '新增客户数'
          }
        ],
        series: [
          {
            name: '新增客户两年内回款情况',
            type: 'bar',
            // stack: '总数',
            itemStyle: {
              color: '#5470C6'
            },
            yAxisIndex: 1,
            data: seriesB
          },
          {
            name: '新增客户数',
            type: 'line',
            showSymbol: false,
            lineStyle: {
              color: '#1FF0F1',
              width: 3
            },
            data: seriesA
          }
        ]
      }