echarts 之 tooltip 位置的放置以及设置echarts的宽高与 formatter格式化文本

echarts 之 tooltip 控制在容器内展示 与 formatter格式化文本

                    tooltip: {
                        trigger: 'axis',
                        confine: true,
                        formatter: function(params) {
                            var result = params[0].name;
                            params.forEach(function(item) {
                                result += '<br/><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' + item.color + ';margin-right:5px;"></span>' + item.seriesName + ': ' + item.value + ' G';
                            });
                            return result;
                        }
                    },

echarts 之 tooltip 位置的放置

• 就是给左右上下，做一个限制的函数
• 转载：链接: link.

      option: {
        color: this.lineChartColor,
        tooltip: {
          //鼠标滑过显示 一组数据 当前拐点的数据
          trigger: "axis",
          position: function (point, params, dom, rect, size) {
            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            var x = point[0]; //
            var y = point[1];
            var viewWidth = size.viewSize[0];
            var viewHeight = size.viewSize[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            var posX = 0; //x坐标位置
            var posY = 0; //y坐标位置

            if (x < boxWidth) {
              //左边放不开
              posX = 5;
            } else {
              //左边放的下
              posX = x - boxWidth;
            }

            if (y < boxHeight) {
              //上边放不开
              posY = 5;
            } else {
              //上边放得下
              posY = y - boxHeight;
            }

            return [posX, posY];
          },
        },
   }

echarts 之宽高设置

<template>
  <div class="bar_chart" ref="bar_chartP">
    <div
      id="TotalRevenueChartContainer"
      class="chart"
      ref="Echart"
      :style="{ width: '100%', height: '100%' }"
    ></div>
  </div>
</template>

  mounted() {
    this.init();
    this.setMychart();
  },
  methods: {
    setMychart() {
      //原生js写法
      //这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式
      function getStyle(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return document.defaultView.getComputedStyle(obj, null)[attr];
        }
      }

      //获取父元素
      let echarts = document.querySelector(".bar_chart");
      //获取父元素宽高
      let echartsWidth = getStyle(echarts, "width");
      let echartsHeight = getStyle(echarts, "height");
      //获取图表元素
      let myChart = document.querySelector("#TotalRevenueChartContainer");
      //将父元素宽高赋值给图表
      myChart.style.width = echartsWidth;
      myChart.style.height = echartsHeight;
    },
 }
 init () {
 	// 对echarts的初始化图形什么
 	myEchart.off("click"); // 解决echarts 重复点击问题 
 }