echarts图表toolbox属性，自定义工具，能否制作出弹窗效果

Question

 drawLine2() {
      var myChart2 = document.getElementById("myChart2");
      var myChart2 = echarts.init(myChart2);
      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: "全屏查看",
              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("myChart2");
                if (element.requestFullScreen) {
                  element.requestFullScreen();
                } else if (element.msRequestFullscreen) {
                  element.msRequestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                  element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                  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:()=>{
              //   $('.big').css('display','block')
              // }
            },

            
            saveAsImage: {},
            dataView: { readOnly: false },
            restore: {},
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "胰岛素",
              "硝苯地坪",
              "脑心清",
              "华蟾素",
              "艾普拉唑",
              "灯盏花素",
              "异山梨酯",
              "复方丹参",
              "氟伐他汀",
              "重组人凝血因子VIII",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1400,
            position: "left",
          },
          {
            type: "value",
            name: "单位(个)",
            min: -1000000,
            max: 4000000,
            position: "right",
          },
        ],
        series: [
          {
            name: "金额",
            type: "bar",
            yAxisIndex: 0,
            data: [
              1336.94, 823.87, 514.74, 506.65, 358.43, 343.3, 340.85, 324.9,
              281.55, 279.55,
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var color = [
                    "#00ffff",
                    "#ffa2d8",
                    "#ffd29e",
                    "#d9a3ff",
                    "#356aff",
                    "#fd6a00",
                    "#ffff9e",
                    "#00d5ff",
                    "#ffd39e",
                    "#ff9fd4",
                  ];
                  return color[params.dataIndex];
                },
              },
            },
          },
          {
            name: "数量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: [
              188283, 2076251, 131479, 18806, 19916, 16243, 38054, 3869408,
              12259, 16011,
            ],
          },
        ],
      };
      // 根据宽度大小自适应
      var myChart2 = echarts.init(document.getElementById("myChart2"));
      myChart2.setOption(option);
      window.addEventListener("resize", function () {
        myChart2.resize();
      });

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

Answer 1

是不是要这个
参考如下链接：

Vue echart toolbox 工具栏点击 自定义全屏按钮 显示到弹出框中_Principal_Z的博客-CSDN博客 最终效果说明： 由于页面上的echart图表过多，写一个vue子组件，直接在父页面调取复用安装插件npm i echarts在 main.js 中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts// 全局引用子组件<template> <el-dialog top="40px" width="50%" :modal="true" :title="tit https://blog.csdn.net/Principal_Z/article/details/108407530