Echarts two line charts share the X-axis and incorporate the tooltip feature code

Problem description

If you want the product to look like this, do it like this. There are pictures and truth, let’s take a look at the effect:

rendering

Code attached

To run it, just assign and paste it. CTRL +CV to change it

<template>
  <div class="eWrap">
    <div id="echartsDom"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null.// Define variables to hold echarts instances
      xData: ["On Monday"."Tuesday"."On Wednesday"."Thursday"."Friday"."Saturday"."Sunday"].// Both echarts share the X-axis data
      y1Data: [8888.9999.7777.10000.3334.7878.6543].// Small cargo
      y2Data: [56.64.32.58.64.76.81].// node load
      y3Data: [88.99.77.100.21.66.95].// Bulk goods
    };
  },
  mounted() {
    this.drawEcharts();
  },
  methods: {
    // Draw the method
    drawEcharts() {
      this.myChart = Echarts.init(document.getElementById("echartsDom"));
      this.myChart.setOption({
        color: ["#bfa"."#baf"."pink"."#baf"].// Configure the data color
        grid: [
          // Configure the position of the first line chart
          {
            left: "14.5%".right: "12%".top: "10%".height: "32%",},// Configure the second line chart position
          {
            left: "14.5%".right: "12%".top: "60%".height: "32%"],},tooltip: {
          trigger: "axis".// The formatter function dynamically modifies the tooltip style
          formatter: function (params) {
            if (params) {
              var htmlStr = "";
              htmlStr += params[0].name.replace(/\-/g."/") + "<br/>"; // The X-axis name
              for (var i = 0; i < params.length; i++) {
                var param = params[i]; // Save an item
                var seriesName = param.seriesName; // Legend name
                var value = param.value; / / y values
                var color = param.color; // Legend color
                htmlStr += "<div>";
                htmlStr +=
                  ' +
                  color +
                  ';" >';
                // The text displayed after the dot
                htmlStr += seriesName + "：" + value;
                switch (seriesName) {
                  case "Small cargo":
                    htmlStr += "" + "件";
                    break;
                  case "Network load":
                    htmlStr += "" + "%";
                    break;
                  case "Bulk cargo":
                    htmlStr += "" + "件";
                    break;
                  default:
                    htmlStr += "";
                }
                htmlStr += "</div>";
              }
              return htmlStr;
            } else {
              return; }},backgroundColor: "#ccc".borderWidth: 1.borderColor: "#ccc".padding: 10.textStyle: {
            color: "# 000".fontSize: 12.align: "left",}},legend: {
          show: true.x: "center".y: "0".data: ["Small cargo"."Network load"."Bulk cargo"."Network load"].textStyle: {
            fontSize: 12,}},// Combine the two tootips into one
        axisPointer: {
          link: { xAxisIndex: "all"}},xAxis: [{type: "category".scale: true.axisLabel: {
              show: false,},axisTick: {
              alignWithLabel: true,},splitLine: {
              show: false,},data: this.xData, // The X-axis time data
          },
          {
            gridIndex: 1.type: "category".scale: true.axisLabel: {
              fontSize: 10,},axisTick: {
              alignWithLabel: true,},splitLine: {
              show: false,},data: this.xData, // The X-axis time data},].yAxis: [{type: "value".name: "Number".nameLocation: "center".nameGap: 50.nameTextStyle: {
              fontSize: 12.fontWeight: "500",},axisLabel: {
              fontSize: 12,},min: function (value) {
              return parseInt(value.min);
            },
            max: function (value) {
              return parseInt(value.max * 1.05);
            },
            scale: false.boundaryGap: [0."100%"].splitLine: {
              show: false,},splitNumber: 4.// Set the number of segments for the axis
          },
          {
            type: "value".name: "Load/percentage".nameLocation: "center".nameGap: 42.nameTextStyle: {
              fontSize: 12,},axisLabel: {
              fontSize: 12,},// min: function (value) {
            // return parseInt(value.min);
            // },
            // max: function (value) {
            // return parseInt(value.max * 1.05);
            // },
            scale: true.boundaryGap: [0."100%"].splitLine: {
              show: false,},splitNumber: 4.// Set the number of segments for the axis
          },
          {
            type: "value".name: "Number".nameLocation: "center".gridIndex: 1.nameGap: 30.nameTextStyle: {
              fontSize: 12,},axisLabel: {
              fontSize: 12,},min: function (value) {
              return parseInt(value.min);
            },
            max: function (value) {
              return parseInt(value.max * 1.05);
            },
            scale: true.boundaryGap: [0."100%"].splitLine: {
              show: false,},splitNumber: 4.// Set the number of segments for the axis
          },
          {
            type: "value".name: "Load/percentage".nameLocation: "center".gridIndex: 1.nameGap: 42.nameTextStyle: {
              fontSize: 12,},axisLabel: {
              fontSize: 12,},// min: function (value) {
            // return parseInt(value.min);
            // },
            // max: function (value) {
            // return parseInt(value.max * 1.05);
            // },
            scale: true.boundaryGap: [0."100%"].splitLine: {
              show: false,},splitNumber: 4.// Set the number of segments for the axis},].dataZoom: [{type: "inside".startValue: this.y1Data.length - 4.// Place the last four arrays
            endValue: this.y1Data.length - 1.xAxisIndex: [0.1].// Display 0, 1 data, this need to add, do not add, hover prompt will be a problem},].series: [{name: "Small cargo".type: "line".xAxisIndex: 0.yAxisIndex: 0.hoverAnimation: true.// Hover animation plus
            data: this.y1Data, // Small cargo
          },
          {
            name: "Network load".type: "line".xAxisIndex: 0.yAxisIndex: 1.hoverAnimation: true.// Hover animation plus
            data: this.y2Data, // node load
          },
          {
            name: "Bulk cargo".type: "line".xAxisIndex: 1.yAxisIndex: 2.hoverAnimation: true.// Hover animation plus
            data: this.y3Data, // Bulk goods
          },
          {
            name: "Network load".type: "line".xAxisIndex: 1.yAxisIndex: 3.hoverAnimation: true.// Hover animation plus
            data: this.y2Data, // node load},]});/ / adaptive
      window.addEventListener("resize".() = > {
        this.myChart.resize(); }); ,}}};</script>
<style lang="less" scoped>
.eWrap {
  width: 100%;
  height: 400px;
  overflow: hidden;
  #echartsDom {
    width: 100%;
    height: 100%; }}</style>

Copy the code