echarts 如何覆盖源码样式——dataview为例

问题

源码的echarts的dataview在显示时会遮挡住工具栏toolbox，现在需要做到的是不遮住。

解决方法

通过看dataview的源码(位置：echarts/lib/component/toolbox/feature/DaaView.js) 发现，dataview的实现就是在现有的图表上加了一层，并且样式都是写死在style中的。由于dataview的数据渲染就是在onclick事件中，因此我们重写该方法即可。

可参考代码：

feature: {
 mydataView: {
    show: true,
    icon:
      "M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28",
    title: "数据视图",
    onclick: (ecModel, api) => {
		let axisData = api.getOption().xAxis[0].data; //坐标数据
		let series = api.getOption().series; //折线图数据
		//创建画布
		var container = api.getDom();
		if (this._dom) {
			container.removeChild(this._dom); //防止重复创建
			this._dom = root;
		}
		var root = document.createElement("div");
		root.style.cssText =
		"position:absolute;left:0px;top:25px;bottom:5px;right:0px";
		root.style.backgroundColor = "#fff"; // Create elements
		var header = document.createElement("h4");
		header.innerHTML = "数据视图";
		header.style.cssText = "margin: 10px 20px;";
		root.appendChild(header);
		// 创建表格
		var viewMain = document.createElement("div");
		viewMain.style.cssText =
		"display:block;width:100%;overflow:auto;";
		var taObj = document.createElement("table");
		taObj.border = "1";
		taObj.cellPadding = "0";
		taObj.cellSpacing = "0";
		taObj.style.cssText = "margin:0 auto;";
		viewMain.appendChild(taObj);
		//数据渲染表头 
		var thObj = document.createElement("tr");
		taObj.appendChild(thObj);
		var td1 = document.createElement("td");
		td1.innerHTML = "时间";
		thObj.appendChild(td1);
		series.forEach(function (item) {
			//组装表头内容
			var td2 = document.createElement("td");
			td2.innerHTML = item.name;
			thObj.appendChild(td2);
		});
      //数据渲染行列内容
      for (var i = 0; i < axisData.length; i++) {
        //创建行,在行中添加内容,并且追加到父元素table中
        var trObj = document.createElement("tr");
        taObj.appendChild(trObj);
        //创建第一个列,然后加入到行中
        var td1 = document.createElement("td");
        td1.innerHTML = axisData[i];
        trObj.appendChild(td1);
        //创建第二个列,然后加入到行中
        for (let j = 0; j < series.length; j++) {
          let num = series[j].data[i];
          let number = Math.round(num * 100) / 100;
          var td2 = document.createElement("td");
          td2.innerHTML = number;
          trObj.appendChild(td2);
        }
      }
      var self = this; //添加标志位
      //关闭功能
      function close() {
        container.removeChild(root);
        self._dom = null;
      }
      var eventTool = require("zrender/lib/core/event");

      var buttonContainer = document.createElement("div");
      buttonContainer.style.cssText =
        "position:absolute;bottom:0;left:0;right:0;";
      var closeButton = document.createElement("div");
      closeButton.style.cssText =
        "float:right;margin-right:20px;border:none;color:#fff;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px";
      eventTool.addEventListener(closeButton, "click", close);
      closeButton.style.backgroundColor = "red";
      closeButton.innerHTML = "关闭";
      buttonContainer.appendChild(closeButton);
      root.appendChild(buttonContainer);
      root.appendChild(viewMain);

      viewMain.style.height = container.clientHeight - 80 + "px";
      container.appendChild(root);
      this._dom = root;
    },
  },
}