关于vue项目中的echrts需要以HTML文件的格式导出_js将echarts导出为html结构

作者：羊村懒王 | 2024-02-29 10:28:15

踩

js将echarts导出为html结构

vue项目中echarts以html格式导出

项目需求要有导出echrts的功能，原本以为只是用echrts自带的那个toolbox里面的导出就行了，结果看了下效果，不尽人意，那个导出只是截图当前视图的png格式，要是数据没标点在统计图上的话，只能看个模糊的大概，有滚动条的话也截不全数据。所以只能各种资源搜索去解决，不过网上好像没有特别全的攻略，都是导出excel，或者pdf格式的居多。特此整理个版本，希望能帮助到搜索到有相同需求的朋友。

在这里插入图片描述

export const htmlTemplate = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.common.js"></script>
    <script src="%echartUrl%"></script>
    <title>指标导出图表</title>
</head>
<style>
    * {
        margin: 0;
        height: 0;
    }
    .showTitle{
        font-weight: bold;
        font-size: 22px;
        text-align:center;
        line-height:80px;
        display:none;
        display:%letShow%;
    }
    .showSubTitle{
        font-weight: bold;
        font-size: 18px;
        text-align:center;
        line-height:140px;
        display:none;
        display:%letShow1%;
    }
</style>

<body>
    <div class="showTitle">%tmpTitle%</div> 
    <div class="showSubTitle">%tmpSubTitle%</div>
    <div id="tmpCharts" style="width: 100%;height: 90vh;margin-top:5vh"></div>
</body>
<script>
    var colors = ["#5470C6", "#91CC75", "#EE6666"];
    var myChart = echarts.init(document.getElementById("tmpCharts"));
    window.addEventListener("resize",myChart.resize)
    myChart.setOption(%tmp%);
</script>
</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

这个是字符串模板的代码，可以放在utils下，如图
在这里插入图片描述
项目中引用此模板，并用变量去替换字符串模板，从而是代码导入到html模板中

 exportEcharts() {
      let exportName = this.$refs.rptKindList.selected
        .map((v) => v.label)
        .join();
      // this.nameList = exportName;
      // 读取模版文件
      let charsOptionStr = JSON.stringify(this.chartsOptions);
      let echartsUrl = `${location.origin}/js/echarts.js`;
      let tmpTitle = "统计维度：" + exportName;
      let tmpSubTitle = "TOP:" + this.formInline.top;
      console.log(htmlTemplate);
      let htmlFiles = htmlTemplate
        .replace(`%tmp%`, charsOptionStr)
        .replace(`%echartUrl%`, echartsUrl)
        .replace(`%tmpTitle%`, tmpTitle)
        .replace(`%tmpSubTitle%`, tmpSubTitle)
        .replace(`%letShow%`, "block")
        .replace(`%letShow1%`, "block");

      // 导出
      var chart = document.createElement("a");
      var url = window.URL.createObjectURL(
        new Blob([htmlFiles], {
          type: "",
        })
      );
      chart.href = url;
      chart.download =
        "指标使用情况统计图(" +
        exportName +
        ")TOP-" +
        this.formInline.top +
        ".html";
      chart.click();
      window.URL.revokeObjectURL(url);
    },
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

在这里插入图片描述

因为我们项目运行环境是在内网下的，所以资源只能整到项目下。可以在上面字符串模板的js里面引入个CDN，如下图，这样导出来的html文件在外网也能查看

以上就是整体导出的思路及部分代码，希望能对你有所帮助！

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