[JavaScript知识库]vue中echarts实现双图联动展示数据，折线图+饼图（附带源码）

前言

最近写项目，有一块功能需要使用双图进行联动的展示，左边折线图，鼠标移动折线图焦点，能把每个点的数据情况展示到饼图上，这里记录一下，希望对大家有帮助

实现的效果：

实现步骤：

首先先实现折线图的部分：

option = {
    color: ['#c6e8ad', '#00DDFF', '#37A2FF', '#FFBF00', '#f3a19e'],
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      // ['严重', '错误', '警告', '信息', '调试']
      // data: ['当前', '三小时前', '六小时前', '九小时前', '十二小时前', '十五小时前', '十八小时前', '二十一小时前']
      source: [
        ['时间', '当前', '三小时前', '六小时前', '九小时前', '十二小时前', '十五小时前', '十八小时前', '二十一小时前'],
        ['调试', 56, 82, 101, 70, 83, 85, 87, 84],
        ['信息', 51, 51, 55, 53, 73, 68, 69, 73],
        ['警告', 12, 15, 30, 25, 0, 23, 15, 18],
        ['错误', 3, 7, 2, 6, 6, 8, 3, 2],
        ['严重', 5, 1, 0, 0, 0, 2, 0, 2]
      ]
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],

    yAxis: { gridIndex: 0 },
    grid: [
      {
        width: '70%',
        left: '0%',
        bottom: '3%',
        containLabel: true
      }
    ],
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        center: ['85%', '50%'],
        radius: ['25%', '55%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          position: 'inside',
          formatter: '{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
            formatter: '{b}:{@当前}'
          }
        },
        encode: {
          itemName: '时间',
          value: '当前',
          tooltip: '当前'
        }
      }
    ]
  };

然后再来渲染饼图，要想使折线图和饼图联动的关键就在于这里的代码：

 myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{d}%'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });

最后渲染出echarts图就可以啦：

myChart.setOption(option);

完整代码：

setTimeout(function () {
  option = {
    color: ['#c6e8ad', '#00DDFF', '#37A2FF', '#FFBF00', '#f3a19e'],
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      // ['严重', '错误', '警告', '信息', '调试']
      // data: ['当前', '三小时前', '六小时前', '九小时前', '十二小时前', '十五小时前', '十八小时前', '二十一小时前']
      source: [
        ['时间', '当前', '三小时前', '六小时前', '九小时前', '十二小时前', '十五小时前', '十八小时前', '二十一小时前'],
        ['调试', 56, 82, 101, 70, 83, 85, 87, 84],
        ['信息', 51, 51, 55, 53, 73, 68, 69, 73],
        ['警告', 12, 15, 30, 25, 0, 23, 15, 18],
        ['错误', 3, 7, 2, 6, 6, 8, 3, 2],
        ['严重', 5, 1, 0, 0, 0, 2, 0, 2]
      ]
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],

    yAxis: { gridIndex: 0 },
    grid: [
      {
        width: '70%',
        left: '0%',
        bottom: '3%',
        containLabel: true
      }
    ],
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        center: ['85%', '50%'],
        radius: ['25%', '55%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          position: 'inside',
          formatter: '{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
            formatter: '{b}:{@当前}'
          }
        },
        encode: {
          itemName: '时间',
          value: '当前',
          tooltip: '当前'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{d}%'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

最后

完整的代码以及在上面啦，大家在页面写好之后，只需要把 source中的数据替换成自己的就可以了，如果对你有帮助，点赞关注支持一下，谢谢大家

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖