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

作者：Li_阴宅 | 2024-08-08 12:06:55

踩

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

页面效果：

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

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

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

/*在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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//在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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/948095?site