echarts两个图表tooltip 联动

最新推荐文章于 2024-08-05 22:43:05 发布

美团外卖兼职前端菜鸟

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/qq_45537145/article/details/126246773

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

echarts 图表联动柱状图 , 折线图,

- 完成样式
- echarts 配置代码

完成样式

在这里插入图片描述

echarts 配置代码

option = {
  axisPointer: {
    link: [
      {
        xAxisIndex: [0, 1]
      }
    ]
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
        '十三',
        '十四'
      ],

      gridIndex: 0
    },
    {
      type: 'category',
      data: [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
        '十三',
        '十四'
      ],
     
      axisLabel: {
        fontSize: 14,
        color: '#333333'
      },
      gridIndex: 1
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0, 0, 0, 0.2)'
      }
    },
   
  },
  grid: [
    {
      top: 100,
      left: 70,
      right: 150,
      bottom: 400
    },
    {
      top: 400,
      left: 70,
      right: 150,
      bottom: 50
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0
    },
    {
      type: 'value',
      gridIndex: 1
    }
  ],
  series: [
    {
      data: [
        120, 200, 120, 200, 150, 80, 70, 110, 1130, 150, 80, 70, 110, 1130
      ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      xAxisIndex: 0, //使用x轴的索引
      yAxisIndex: 0 //使用y轴的索引
    },
    {
      data: [
        120, 200, 150, 80, 70, 120, 200, 150, 80, 70, 110, 1130, 110, 1130
      ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      xAxisIndex: 1, //使用x轴的索引
      yAxisIndex: 1 //使用y轴的索引
    }
  ]
};