echarts实现上下拼接两个折线图，Y轴在一侧，不同比例的高,且合并tooltip

?425

已于 2023-08-10 14:15:05 修改

阅读量1.5k

点赞数 2

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

于 2023-06-05 11:05:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56204435/article/details/131043950

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

该代码段展示了如何使用Echarts库创建一个包含降雨和流量数据的图表。配置包括两个网格(grid)分别显示线图(line，流量)和柱状图(bar，雨量)，以及tooltip、legend、dataZoom等组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

说明

    grid:[
    //0降雨
    {x: '8%', y: '7%',height: '25%'},
    //流量
    {x: '8%', y2: '7%', height: '52%',bottom: '70px',}
    ],

完整代码

    init() {
      let option = {
        //提示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid:[
          //0降雨
          {x: '8%', y: '7%',height: '21%'},
          //流量
          {x: '8%', y2: '7%', height: '48%',bottom: '70px',}
        ],
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          iconStyle: {
            borderColor: "#c7d8f8",
          },
        },
        //图标上方提示
        legend: {
          data: [
            { name: '流量', textStyle: { color: '#00fa9a' } },
            { name: '雨量', textStyle: { color: '#6495ed' } },
          ],
          orient: "horizontal",
          x: "center",
          y: "top",
          backgroundColor: "none",
          borderColor: "#ccc",
          borderWidth: 0, 
          padding: 5, 
          itemGap: 10, 
          itemWidth: 20, 
          itemHeight: 14, 
          textStyle: {
            color: "#c7d8f8", 
          },
        },
        calculable: true,
        axisPointer: {
          link: { xAxisIndex: 'all' },
        },//合并tooltip
        xAxis: [
          {
            show:false,
            type: "category",
            gridIndex: 0, // 与grid数组对应
            data: this.$store.state.map.EchartsData1,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
              onZero: false
            },
          },
          {
            type: "category",
            gridIndex: 1,// 与grid数组对应
            data: this.$store.state.map.EchartsData1,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
              onZero: false
            },
          },
        ],
        yAxis: [
          {
            name: "流量(m³/s)",
            type: "value",
            gridIndex:1, // 与grid数组对应
            nameLocation:'middle',
            nameGap: 40,
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
            },
          },
          {
            name: "雨量(mm)",
            nameLocation:'middle',
            nameGap: 40,
            type: "value",
            axisLine:{
              show:true,
              lineStyle:{color:'#c7d8f8'},
            },
            inverse: true,
          },
        ],
        series: [
          {
            name: "流量",
            type: "line",
            smooth: true,
            xAxisIndex:1, // 与X轴数组对应
            yAxisIndex: 0,
            data: this.$store.state.map.EchartsData2,
            itemStyle: {
              normal: {
                color: "#00fa9a",
              },
            },
          },
          {
            name: "雨量",
            type: "bar",
            barCategoryGap:'0%',
            smooth: true,
            yAxisIndex: 1,
            xAxisIndex:0,
            data: this.$store.state.map.EchartsData3,
            itemStyle: {
              normal: {
                color: "#6495ed",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
            xAxisIndex: [0,1],
          },
          {
            start: 0,
            end: 100,
          },
        ],
      };

      let myChart = echarts.init(document.querySelector(".charts"));
      myChart.setOption(option, true);
    },