echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大

1.如果是多个图表，那就创建一个公共组件（子组件），如下：

<template>
//自定义弹窗
  <el-dialog
    top="150px"
    width="60%"
    :modal="true"
    :title="title"
    append-to-body
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false">
    <div id="dialogBox"></div>
  </el-dialog>
</template>

<script>
export default {
	data () {
	    return {
	      dialogVisible: false,
	      title: ''
	    }
	},
	methods: {
		show(title, val, id) {
	    	// title：弹出框 标题说明
	    	// val：  父组件中 echart的option数据
	    	// id：   自定义 id
	      	this.dialogVisible = true
	      	this.title = title
			this.$nextTick(() => {
	        	let divBox = document.getElementById('dialogBox')
	       		if (divBox.children && divBox.children.length == 1) {
	          		divBox.removeChild(divBox.children[0])
	        	}
	        	let divChild = document.createElement('div')
	        	divChild.setAttribute('id', id)
	        	divBox.appendChild(divChild)
	        	let echart = this.$echarts.init(document.getElementById(id))
	        	val.toolbox[0].feature.myTool.show = false
	        	echart.setOption(val)
	        	//图表大小自适应
	        	window.addEventListener('resize', () => {
	          		echart.resize()
	        	})
	        })
		}
	},
}
</script>

<style>
  #dialogBox>div {
    width: 100%;
    height: 500px;
  }
</style>

removeChild方法请参考：https://www.runoob.com/jsref/met-node-removechild.html

createElement方法请参考：https://www.runoob.com/jsref/met-document-createelement.html

2.父组件的代码如下：

//这是的路径是你子组件文件的路径
<template>
	<echartFull ref="echartFull" />
</template>
import echartFull from "@/views/echartFull";
//映射子组件
components: { echartFull }，

3.echart图表 如下：

drawLine() {
      var myChart = document.getElementById("myChart");
      var myChart = echarts.init(myChart);
      var option;
      option = {
        grid: {
          top: 80,
          left: 50,
          right: 140,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        title: {
          text: "住院药品统计(万元)",
          textStyle: {
            align: "center",
            fontSize: "20",
          },
          top: "5%",
          left: "center",
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 200,
        },
        toolbox: {
          show: true,
          feature: {
            myTool: {
              show: true,
              title: "放大查看",
              //阿里图标库直接使用symbol引入自动生成路径 ，看path路径
              icon: "path://M184 789.088L389.309 583.78a8 8 0 0 1 11.313 0l39.598 39.598a8 8 0 0 1 0 11.313L234.912 840H384c8.837 0 16 7.163 16 16v48a8 8 0 0 1-8 8H144c-17.673 0-32-14.327-32-32V632a8 8 0 0 1 8-8h48c8.837 0 16 7.163 16 16v149.088z m656-554.422L634.569 440.098a8 8 0 0 1-11.314 0L583.657 400.5a8 8 0 0 1 0-11.314L788.843 184H640c-8.837 0-16-7.163-16-16v-48a8 8 0 0 1 8-8h248c17.673 0 32 14.327 32 32v248a8 8 0 0 1-8 8h-48c-8.837 0-16-7.163-16-16V234.666z",
             // 这里是全屏放大
              // onclick: (e) => {
              //   const element = document.getElementById("myChart");
              //   if (element.requestFullScreen) {
              //     // HTML W3C 提议
              //     element.requestFullScreen();
              //   } else if (element.msRequestFullscreen) {
              //     // IE11
              //     element.msRequestFullScreen();
              //   } else if (element.webkitRequestFullScreen) {
              //     // Webkit (works in Safari5.1 and Chrome 15)
              //     element.webkitRequestFullScreen();
              //   } else if (element.mozRequestFullScreen) {
              //     // Firefox (works in nightly)
              //     element.mozRequestFullScreen();
              //   }
              //   // 退出全屏
              //   if (element.requestFullScreen) {
              //     document.exitFullscreen();
              //   } else if (element.msRequestFullScreen) {
              //     document.msExitFullscreen();
              //   } else if (element.webkitRequestFullScreen) {
              //     document.webkitCancelFullScreen();
              //   } else if (element.mozRequestFullScreen) {
              //     document.mozCancelFullScreen();
              //   }
              // },

              // 弹框
              onclick: (e) => {
                // console.log(e)
                this.$refs.echartFull.show("", e.getOption(), "id");
              },
            },
            saveAsImage: {},
            dataView: { readOnly: false },
            restore: {},
          },
        },

        xAxis: [
          {
            type: "category",
            data: [
              "屈光不正",
              "尿毒症",
              "冠状动脉粥样硬化性心脏病",
              "健康查体",
              "冠状动脉性心脏病",
              "脑梗死",
              "结膜炎",
              "干眼症",
              "白内障",
              "2型糖尿病",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 5000,
            position: "left",
          },
          {
            type: "value",
            name: "单位(个)",
            min: 0,
            max: 120000,
            position: "right",
          },
        ],
        series: [
          {
            name: "金额",
            type: "bar",
            yAxisIndex: 0,
            data: [
              4008.02, 1596.74, 1445.02, 1201.45, 998.27, 638.53, 598.69,
              554.44, 525.76, 492.97,
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var color = [
                    "#ffa2d8",
                    "#ffd29e",
                    "#356aff",
                    "#fd6a00",
                    "#00ffff",
                    "#00d5ff",
                    "#d9a3ff",
                    "#ff9fd4",
                    "#ffd39e",
                    "#ffff9e",
                  ];
                  return color[params.dataIndex];
                },
              },
            },
          },
          {
            name: "数量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: [
              25218, 18194, 53538, 111258, 19916, 16243, 38054, 23173, 12259,
              16011,
            ],
          },
        ],
      };
      // 根据宽度大小自适应

      window.addEventListener("resize", function () {
        myChart.resize();
      });

      option && myChart.setOption(option);
    },

注意：
4.你可能遇到的问题
如果你出现了以上错误，那么请检查你的toolbox下的feature里面自定义的方法名称（我的是myTool）是不是和子组件的
val.toolbox[0].feature.myTool.show = false
里面的一致

我（也是第一次做这个，理解）的代码来源，网上的一些大佬所作的，我总结一下哈！！！！