可视化图表与页面源代码显示

news2024/11/6 7:15:37

可视化图表与页面源代码显示

页面效果：

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>饼状图</title>
  <style>
    body {
      display: flex;
      height: 100%;
      margin: 0;
    }
    #container {
      flex: 1;
      height: 100%;
    }
    #source-container {
      flex: 1;
      overflow: auto;
      padding: 20px;
      background-color: rgba(111, 231, 35, 0.36); /* 背景色以便区分 */
    }
    #downloadButton {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }
    #downloadButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="source-container">
    <pre id="source-code"></pre>
  </div>
  <button id="downloadButton" onclick="downloadSource()">下载</button>

  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['年份', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['数据1', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['数据2', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['数据3', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['数据4', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: '年份',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    // 将源代码放入右侧的容器中
    document.getElementById('source-code').textContent = document.documentElement.outerHTML;

    // 按钮函数
    function downloadSource() {
      const source = document.documentElement.outerHTML;
      const blob = new Blob([source], { type: 'text/html' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'chart-source.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

万能代码：将下面这段代码放入任何一个前端（html,css,js）可视化图表示例中，在其页面上都会显示源码及页面下载这个按钮功能

<!--在html中写入-->
<div id="source-container">
    <pre id="source-code"></pre>
  </div>
  <button id="downloadButton" onclick="downloadSource()">下载</button>

/*在CSS中写入*/
body {
      display: flex;
      height: 100%;
      margin: 0;
    }
    #container {
      flex: 1;
      height: 100%;
    }
    #source-container {
      flex: 1;
      overflow: auto;
      padding: 20px;
      background-color: rgba(111, 231, 35, 0.36); /* 背景色以便区分 */
    }
    #downloadButton {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }
    #downloadButton:hover {
      background-color: #0056b3;
    }

//在js中写入
 // 将源代码放入右侧的容器中
    document.getElementById('source-code').textContent = document.documentElement.outerHTML;

    // 下载按钮
    function downloadSource() {
      const source = document.documentElement.outerHTML;
      const blob = new Blob([source], { type: 'text/html' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'chart-source.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }