echarts tooltip提示框显示不全

最新推荐文章于 2024-04-29 10:42:46 发布

影子信息

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量560

点赞数 10

分类专栏： vue 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_45024453/article/details/137637924

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、背景：

写在前面：

自行封装。一个可由多个柱形图叠加而成的图表，命名为someHoverLine(可自定义)。

下面罗列了移动端和web端的封装组件代码；

展示了vue2、uniapp、vue3的不同封装和使用案列。

二、问题描述：

三、解决办法：

办法一：

tooltip: {
   confine: true,
}

实际代码：

效果展示：

办法二：

tooltip: {
   appendToBody: true
},

实际代码：

实际效果：

推荐使用第一种方法。。。

写到这儿就完毕了。

下面是封装的一个图表组件，一个由很多柱形图组成的叠加柱形图。。。

四、封装组件：

移动端：

效果展示：

移动端，vue2、uniapp写法：

封装组件：


//封装组件
//vue2、uniapp
<template>
  <view class="reMoreBar_home" :style="{ width: width, height: height }">
    <view
      ref="dbBarRef"
      :id="echartsId"
      :style="{ width: width, height: height }"
    ></view>
  </view>
</template>

<script module="echarts" lang="renderjs">
import { getAssetsFile, fontSize, nowResize } from "@/utils/index.js";
import * as echarts from "echarts";

let myEcharts;

export default {
  props: {
    echartsId: {
      type: String,
      default: "dbBarRef",
      required: true,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    names: {
      type: Array,
      default: [
        // "蓄电池#1/Ah",
        // "蓄电池#2/Ah",
        // "蓄电池#3/Ah",
        // "蓄电池#4/Ah",
        // "蓄电池#5/Ah",
        // "蓄电池#6/Ah",
        // "蓄电池#7/Ah",
      ],
    },
    linxs: {
      type: Array,
      default: [
        // "2024-01-21 15:002",
        // "2024-01-21 15:01",
        // "2024-01-21 15:02",
        // "2024-01-21 15:03",
        // "2024-01-21 15:04",
        // "2024-01-21 15:05",
        // "2024-01-21 15:06",
        // "2024-01-21 15:07",
        // "2024-01-21 15:08",
        // "2024-01-21 15:09",
        // "2024-01-21 15:10",
        // "2024-01-21 15:11",
        // "2024-01-21 15:12",
        // "2024-01-21 15:13",
        // "2024-01-21 15:14",
        // "2024-01-21 15:15",
      ],
    },
    values: {
      type: Array,
      default: [
        // [
        //   580, 236, 217, 534, 580, 236, 217, 580, 151, 231, 0, 192, 453, 524, 165,
        //   0,
        // ],
        // [
        //   625, 345, 65, 192, 120, 180, 192, 80, 150, 153, 152, 128, 125, 625, 345,
        //   65,
        // ],
        // [
        //   4510, 352, 303, 534, 328, 159, 151, 192, 330, 151, 231, 192, 328, 159,
        //   151, 536,
        // ],
        // [
        //   120, 125, 0, 192, 120, 180, 0, 220, 125, 80, 192, 120, 125, 145, 65,
        //   125,
        // ],
        // [
        //   545, 80, 192, 330, 580, 236, 217, 328, 159, 151, 580, 236, 217, 524,
        //   165, 236,
        // ],
        // [
        //   360, 545, 360, 545, 80, 192, 80, 28, 625, 453, 80, 28, 625, 345, 65,
        //   105,
        // ],
        // [220, 125, 28, 625, 345, 65, 325, 80, 150, 153, 0, 128, 0, 220, 125, 80],
      ],
    },
    colors: {
      type: Array,
      default: [
        "rgba(266, 102, 304)",
        "rgba(0, 121, 202)",
        "rgba(247,220,111)",
        "rgba(0, 202, 104)",
        "rgba(909, 66, 22)",
        "rgba(100, 50, 102)",
        "rgba(147,120,211)",
        "rgba(245,107,184)",
        "rgba(35,172,201)",
        "rgba(66, 199, 102)",
        "rgba(241,148,138)",
        "rgba(130,182,220)",
      ],
    },
    xUnit: {
      type: String,
      default: "单位",
    },
    yUnit: {
      type: String,
      default: "单位",
    },
    // legendStyle: {
    //   type: Object,
    //   default: {
    //     fontSize: 12,
    //     color: "#000",
    //     top: "5%",
    //     left: "10%",
    //   },
    // },
    // 图表x,y轴定制
    xType: {
      type: String,
      default: "category",
    },
    unitX: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myCharts: null,
    };
  },
  methods: {
    init() {
      let charts = {
        unit: this.yUnit || "数值",
        names: this.names,
        lineX: this.linxs,
        value: this.values,
        colors: this.colors,
        xType: this.xType,
        xUnit: this.xUnit,
        yUnit: this.yUnit,
      };
      let lineY = [];
      for (var i = 0; i < charts.names.length; i++) {
        let seriesItem = {
          name: charts.names[i],
          type: "bar",
          barMaxWidth: 36,
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          itemStyle: {
            // color: "#5CB1FF",
            color: charts.colors[i],
          },
          data: charts.value[i],
          label: {
            show: true,
            color: "#fff",
          },
        };
        lineY.push(seriesItem);
      }
      let option = {
        tooltip: {
          trigger: "axis",
          // confine: true,//是否将 tooltip 框限制在图表的区域内。
          appendToBody: true,//是否提示框的 DOM 节点添加为 HTML 的 的子节点；默认为本图表的 DOM container 的一个子孙节点
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let myTimer = params[0].axisValue.split(" ")[0];
            let totalValue;
            totalValue = params
              .map((item) => item.value)
              .reduce((a, b) => a + b);
            let str =
              "时间：" +
              myTimer +
              " 总消耗：" +
              totalValue.toFixed(2) +
              charts.yUnit;
            for (let i in params) {
              str =str+"<br/>" +
                params[i].marker +
                params[i].seriesName +
                " " +
                params[i].value +
                charts.yUnit;
            }
            return str;
          },
        },
        // legend: {},
        legend: {
          data: charts.names,
          type: "scroll",
          top: "2%",
          left: "5%",
          // left: "right",
          // icon: "circle",
        },
        dataZoom: [
          {
            type: "inside", //1平移 缩放。
            // zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
            preventDefaultMouseMove: false,
          },
        ],
        grid: {
          left: "1%",
          right: "1%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          name: charts.xType === "value" ? charts.xUnit : "",
          nameTextStyle: {
            color: "#000",
            fontSize: nowResize(24),
          },
          type: charts.xType,
          data: charts.lineX,
          // maxInterval: 3600 * 1000 * 24,
          boundaryGap: true, // 留白
          splitLine: {
            show: false,
            lineStyle: {
              type: "dotted",
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLabel: {
            color: "#000",
            fontSize: nowResize(32),
            symbol: [
              "none",
              "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20",
            ],
            formatter: function (params) {
              // return params.split(" ")[0];
              // return params.replace(' ', '\n')
              let arr = params.split(" ");
              let space = "\n";
              // const myFormatter =
              //   arr[0]?.slice(5) + space + arr[1]?.substring(0, 5);
              const myFormatter = arr[0]?.slice(5);
              return myFormatter;
            },
          },
          axisLine: {
            symbol: ["none", "arrow"],
            symbolOffset: 6,
            symbolSize: [5, 8],
            lineStyle: {
              color: "rgba(104,143,179)",
              width: nowResize(1),
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: charts.xType !== "value" ? `单位/${charts.yUnit}` : "单位/",
          nameTextStyle: {
            color: "#000",
            fontSize: nowResize(44),
          },
          type: charts.xType === "value" ? "category" : "value",
          minInterval: charts.xType !== "value" && 10,
          data: charts.lineX,
          splitLine: {
            lineStyle: {
              type: "dotted",
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#000",
            fontSize: nowResize(32),
            formatter: (value) => {
              return Math.ceil(value); // 向上取整，去除小数
            },
          },
          axisLine: {
            symbol: ["none", "arrow"],
            symbolOffset: 6,
            symbolSize: [5, 8],
            lineStyle: {
              color: "rgba(104,143,179)",
              width: nowResize(1),
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: lineY, //接口数据
        // series: [
        //   {
        //     name: "Email",
        //     type: "bar",
        //     stack: "Ad",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     itemStyle: {
        //       color: "#4279CA",
        //     },
        //     data: [
        //       120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,
        //     ],
        //     label: {
        //       show: true,
        //       textStyle: {
        //         color: "#fff",
        //       },
        //     },
        //   },
        //   {
        //     name: "Union Ads",
        //     type: "bar",
        //     stack: "Ad",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     itemStyle: {
        //       color: "#2FE1E1",
        //     },
        //     data: [
        //       220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210,
        //     ],
        //     label: {
        //       show: true,
        //       textStyle: {
        //         color: "#fff",
        //       },
        //     },
        //   },
        //   {
        //     name: "Video Ads",
        //     type: "bar",
        //     stack: "Ad",
        //     emphasis: {
        //       focus: "series",
        //     },
        //     itemStyle: {
        //       color: "#5CB1FF",
        //     },
        //     data: [
        //       150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210,
        //     ],
        //     label: {
        //       show: true,
        //       textStyle: {
        //         color: "#fff",
        //       },
        //     },
        //   },
        // ],
      };
      option && this.myCharts && this.myCharts.setOption(option, true);
    },
    end() {
      this.myCharts && this.myCharts.dispose();
      window.removeEventListener("resize", function () {
        this.myCharts && this.myCharts.resize();
      });
      this.myCharts = null;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.myCharts = echarts.init(
        document.getElementById(this.echartsId),
        null,
        {
          renderer: "svg",
        }
      );
      window.addEventListener("resize", function () {
        this.myCharts && this.myCharts.resize();
      });
      this.init();
    });
  },
  beforeMount() {
    this.end();
  },
  watch: {
    option: {
      handler: function (newV, olgV) {
        this.myCharts.clear();
        this.init();
      },
      deep: true,
    },
    names: {
      handler: function (newV, olgV) {
        this.myCharts.clear();
        this.init();
      },
      deep: true,
    },
    linxs: {
      handler: function (newV, olgV) {
        this.myCharts.clear();
        this.init();
      },
      deep: true,
    },
    values: {
      handler: function (newV, olgV) {
        this.myCharts.clear();
        this.init();
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.reMoreBar_home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  #dbBarRef {
    width: calc(100vw - 13vw);
    height: 100%;
  }
}
</style>

组件使用案列：

//1.注册组件     
//2.使用组件
//3.组件传参            
                 <someHoverLine
                    echartsId="mainB"
                    :names="echartData.names"
                    :linxs="echartData.linxs"
                    :values="echartData.values"
                    :colors="echartData.colors"
                    :yUnit="echartData.yUnit"
                  />

this.echartData = {
            yUnit: "t",
            linxs: resTimeArr,
            names: ["主机油耗", "发电机组油耗", "锅炉油耗"],
            values: resNumArr,
            colors: [
              "rgba(93, 177, 251, 1)",
              "rgba(47, 226, 227, 1)",
              "rgba(64, 122, 204, 1)",
            ],
          };
let resTimeArr= [
    "2024-03-13",
    "2024-03-14",
    "2024-03-15",
    "2024-03-16",
    "2024-03-17",
    "2024-03-18",
    "2024-03-19",
    "2024-03-20",
    "2024-03-21",
    "2024-03-22",
    "2024-03-23",
    "2024-03-24",
    "2024-03-25",
    "2024-03-26",
    "2024-03-27",
    "2024-03-28",
    "2024-03-29"
]
let resNumArr = [
    [
        17.22,
        14.08,
        27.26,
        35.03,
        33.98,
        40.75,
        17.87,
        18.37,
        61.39,
        30.26,
        26.01,
        35.21,
        30.03,
        41.89,
        16.27,
        28.02,
        0
    ],
    [
        0,
        0,
        0.01,
        0,
        0,
        0.01,
        0,
        0,
        0.01,
        0,
        0,
        0.01,
        0,
        0,
        0,
        3.05,
        5.51
    ],
    [
        0,
        0,
        0,
        0,
        0.01,
        0,
        0,
        0.01,
        0.01,
        0.01,
        0,
        0.01,
        0.01,
        0.01,
        0,
        1.9,
        3.97
    ]
]

备注：

解决了toolTips提示框显示不全的问题。

解决办法：

confine: true,//是否将 tooltip 框限制在图表的区域内。

web端：

效果展示：

封装组件：

//封装组件
//vue3 setup
<script setup>
import { Warning } from "@element-plus/icons-vue";
import { onMounted, onUnmounted, watch } from "vue";
import { getAssetsFile, fontSize } from "@/utils";
const _echarts = inject("$echarts");
const dbBarRef = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  names: {
    type: Array,
    default: [
      // "蓄电池#1/Ah",
      // "蓄电池#2/Ah",
      // "蓄电池#3/Ah",
      // "蓄电池#4/Ah",
      // "蓄电池#5/Ah",
      // "蓄电池#6/Ah",
      // "蓄电池#7/Ah",
    ],
  },
  linxs: {
    type: Array,
    default: [
      // "2024-01-21 15:002",
      // "2024-01-21 15:01",
      // "2024-01-21 15:02",
      // "2024-01-21 15:03",
      // "2024-01-21 15:04",
      // "2024-01-21 15:05",
      // "2024-01-21 15:06",
      // "2024-01-21 15:07",
      // "2024-01-21 15:08",
      // "2024-01-21 15:09",
      // "2024-01-21 15:10",
      // "2024-01-21 15:11",
      // "2024-01-21 15:12",
      // "2024-01-21 15:13",
      // "2024-01-21 15:14",
      // "2024-01-21 15:15",
    ],
  },
  values: {
    type: Array,
    default: [
      // [
      //   580, 236, 217, 534, 580, 236, 217, 580, 151, 231, 0, 192, 453, 524, 165,
      //   0,
      // ],
      // [
      //   625, 345, 65, 192, 120, 180, 192, 80, 150, 153, 152, 128, 125, 625, 345,
      //   65,
      // ],
      // [
      //   4510, 352, 303, 534, 328, 159, 151, 192, 330, 151, 231, 192, 328, 159,
      //   151, 536,
      // ],
      // [
      //   120, 125, 0, 192, 120, 180, 0, 220, 125, 80, 192, 120, 125, 145, 65,
      //   125,
      // ],
      // [
      //   545, 80, 192, 330, 580, 236, 217, 328, 159, 151, 580, 236, 217, 524,
      //   165, 236,
      // ],
      // [
      //   360, 545, 360, 545, 80, 192, 80, 28, 625, 453, 80, 28, 625, 345, 65,
      //   105,
      // ],
      // [220, 125, 28, 625, 345, 65, 325, 80, 150, 153, 0, 128, 0, 220, 125, 80],
    ],
  },
  colors: {
    type: Array,
    default: [
      "rgba(266, 102, 304)",
      "rgba(0, 121, 202)",
      "rgba(247,220,111)",
      "rgba(0, 202, 104)",
      "rgba(909, 66, 22)",
      "rgba(100, 50, 102)",
      "rgba(147,120,211)",
      "rgba(245,107,184)",
      "rgba(35,172,201)",
      "rgba(66, 199, 102)",
      "rgba(241,148,138)",
      "rgba(130,182,220)",
    ],
  },
  xUnit: {
    type: String,
    default: "单位",
  },
  yUnit: {
    type: String,
    default: "单位",
  },
  legendStyle: {
    type: Object,
    default: {
      fontSize: 12,
      color: "#000",
      top: "5%",
      left: "10%",
    },
  },
  // 图表x,y轴定制
  xType: {
    type: String,
    default: "category",
  },
  unitX: {
    type: String,
    default: "",
  },
});
let myEcharts;
onMounted(() => {
  nextTick(() => {
    myEcharts = _echarts.init(dbBarRef.value, null, {
      renderer: "svg",
    });
    window.addEventListener("resize", function () {
      myEcharts && myEcharts.resize();
    });
    _init();
  });
});
onUnmounted(() => {
  _end();
});
watch(
  () => props.names,
  (val) => {
    if (val) {
      nextTick(() => {
        _init();
      });
    }
  }
);
watch(
  () => props.linxs,
  (val) => {
    if (val) {
      nextTick(() => {
        _init();
      });
    }
  }
);
watch(
  () => props.values,
  (val) => {
    if (val) {
      nextTick(() => {
        _init();
      });
    }
  }
);
const _init = () => {
  let charts = {
    unit: props.yUnit || "数值",
    names: props.names,
    lineX: props.linxs,
    value: props.values,
    colors: props.colors,
    xType: props.xType,
    xUnit: props.xUnit,
    yUnit: props.yUnit,
  };
  let lineY = [];
  for (var i = 0; i < charts.names.length; i++) {
    let seriesItem = {
      name: charts.names[i],
      type: "bar",
      barMaxWidth: 36,
      stack: "Ad",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        // color: "#5CB1FF",
        color: charts.colors[i],
      },
      data: charts.value[i],
      label: {
        show: false,
        color: "#fff",
      },
    };
    lineY.push(seriesItem);
  }
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        let myTimer = params[0].axisValue.split(" ")[0];
        let totalValue;
        totalValue = params.map((item) => item.value).reduce((a, b) => a + b);
        let str =
          "时间：" +
          myTimer +
          " 总消耗：" +
          totalValue.toFixed(2) +
          charts.yUnit;
        for (let i in params) {
          str =str+"<br/>" +
            params[i].marker +
            params[i].seriesName +
            " " +
            params[i].value +
            charts.yUnit;
        }
        // const marker1 = params[0].marker;
        // const seriesName1 = params[0].seriesName;
        // const myValue1 = params[0].value;
        // const marker2 = params[1].marker;
        // const seriesName2 = params[1].seriesName;
        // const myValue2 = params[1].value;
        // const marker3 = params[2].marker;
        // const seriesName3 = params[2].seriesName;
        // const myValue3 = params[2].value;
        // const str1 = marker1 + seriesName1 + " " + myValue1 + charts.yUnit;
        // const str2 = marker2 + seriesName2 + " " + myValue2 + charts.yUnit;
        // const str3 = marker3 + seriesName3 + " " + myValue3 + charts.yUnit;
        // const str =
        //   "时间：" +
        //   myTimer +
        //   " 总消耗：" +
        //   totalValue.toFixed(2) +
        //   charts.yUnit +
        //   "<br/>" +
        //   str +
        //   "<br/>" +
        //   str2 +
        //   "<br/>" +
        //   str3;
        return str;
      },
    },
    // legend: {},
    legend: {
      data: charts.names,
      type: "scroll",
      top: "5%",
      left: "75%",
      // left: "right",
      // icon: "circle",
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      name: charts.xType === "value" ? charts.xUnit : "",
      nameTextStyle: {
        color: "#000",
        fontSize: fontSize(12),
      },
      type: charts.xType,
      data: charts.lineX,
      // maxInterval: 3600 * 1000 * 24,
      boundaryGap: true, // 留白
      splitLine: {
        show: false,
        lineStyle: {
          type: "dotted",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLabel: {
        color: "#000",
        fontSize: fontSize(16),
        symbol: [
          "none",
          "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20",
        ],
        formatter: function (params) {
          // return params.split(" ")[0];
          // return params.replace(' ', '\n')
          let arr = params.split(" ");
          let space = "\n";
          // const myFormatter =
          //   arr[0]?.slice(5) + space + arr[1]?.substring(0, 5);
          const myFormatter = arr[0]?.slice(5);
          return myFormatter;
        },
      },
      axisLine: {
        symbol: ["none", "arrow"],
        symbolOffset: 6,
        symbolSize: [5, 8],
        lineStyle: {
          color: "rgba(104,143,179)",
          width: fontSize(1),
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      name: charts.xType !== "value" ? `单位/${charts.yUnit}` : "单位/",
      nameTextStyle: {
        color: "#000",
        fontSize: fontSize(16),
      },
      type: charts.xType === "value" ? "category" : "value",
      minInterval: charts.xType !== "value" && 10,
      data: charts.lineX,
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#000",
        fontSize: fontSize(16),
        formatter: (value) => {
          return Math.ceil(value); // 向上取整，去除小数
        },
      },
      axisLine: {
        symbol: ["none", "arrow"],
        symbolOffset: 6,
        symbolSize: [5, 8],
        lineStyle: {
          color: "rgba(104,143,179)",
          width: fontSize(1),
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: lineY, //接口数据
    // series: [
    //   {
    //     name: "Email",
    //     type: "bar",
    //     stack: "Ad",
    //     emphasis: {
    //       focus: "series",
    //     },
    //     itemStyle: {
    //       color: "#4279CA",
    //     },
    //     data: [
    //       120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,
    //     ],
    //     label: {
    //       show: true,
    //       textStyle: {
    //         color: "#fff",
    //       },
    //     },
    //   },
    //   {
    //     name: "Union Ads",
    //     type: "bar",
    //     stack: "Ad",
    //     emphasis: {
    //       focus: "series",
    //     },
    //     itemStyle: {
    //       color: "#2FE1E1",
    //     },
    //     data: [
    //       220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210,
    //     ],
    //     label: {
    //       show: true,
    //       textStyle: {
    //         color: "#fff",
    //       },
    //     },
    //   },
    //   {
    //     name: "Video Ads",
    //     type: "bar",
    //     stack: "Ad",
    //     emphasis: {
    //       focus: "series",
    //     },
    //     itemStyle: {
    //       color: "#5CB1FF",
    //     },
    //     data: [
    //       150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210,
    //     ],
    //     label: {
    //       show: true,
    //       textStyle: {
    //         color: "#fff",
    //       },
    //     },
    //   },
    // ],
  };
  option && myEcharts && myEcharts.setOption(option, true);
};
const _end = () => {
  myEcharts && myEcharts.dispose();
  window.removeEventListener("resize", function () {
    myEcharts && myEcharts.resize();
  });
  myEcharts = null;
};
</script>

<template>
  <div
    class="reMoreBar_home"
    :style="{ width: props.width, height: props.height }"
  >
    <div
      ref="dbBarRef"
      id="dbBarRef"
      :style="{ width: props.width, height: props.height }"
    ></div>
  </div>
</template>

<style lang="less" scoped>
.reMoreBar_home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  #dbBarRef {
    width: calc(100vw - 13vw);
    height: 100%;
  }
}
</style>

组件使用案列：

//vue3组件使用
<someHoverLine
            :names="data.echartData.names"
            :linxs="data.echartData.linxs"
            :values="data.echartData.values"
            :colors="data.echartData.colors"
            :yUnit="data.echartData.yUnit"
          />

//组件的参数
data.echartData = {
        yUnit: "kg",
        linxs: resTimeArr,
        names: ["主机油耗", "发电机组油耗", "锅炉油耗"],
        values: resNumArr,
        colors: [
          "rgba(93, 177, 251, 1)",
          "rgba(47, 226, 227, 1)",
          "rgba(64, 122, 204, 1)",
        ],
      };
//备注：resTimeArr、resNumArr同上

影子信息

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echarts tooltip提示框显示不全

一个可由多个柱形图叠加而成的图表，命名为someHoverLine(可自定义)。下面罗列了移动端和web端的封装组件代码；展示了vue2、uniapp、vue3的不同封装和使用案列。
复制链接

扫一扫