js动态生成echarts图表,并生成图片保存到本地,自定义图片名。

一、js动态生成图表

1. 效果图

在这里插入图片描述

2. 测试数据

let data = [{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'line'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'line'
          }
        },
        className: 'three'
      }
    ]

3. 实现代码

1)导入echarts
下载地址 >> 下载完成后导入dist目录下的echarts.js
2)逻辑实现

<!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">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
  <style>
    .box {
      width: 500px;
      height: 500px;
      margin: 10px;
    }

    .charts {
      width: 450px;
      height: 450px;
      border: 1px solid black;
      margin: 10px;
    }

    .titleBox {
      display: flex;
      width: 100%;
      height: 30px;
    }

    .title {
      width: 80%;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <script>
    let data = [{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'line'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'line'
          }
        },
        className: 'three'
      }
    ]

    window.onload = function () {
      for (let i = 0; i < data.length; i++) {
        // 1. 创建div(每个图表)
        var Odiv = document.createElement("div"); 
        Odiv.classList.add('box')
        // 2. 创建标题的div
        var titleBox = document.createElement("div");
        Odiv.appendChild(titleBox)
        titleBox.classList.add('titleBox')
        // 2.1 设置图表标题
        var title = document.createElement("div");
        title.innerText = data[i].title
        titleBox.appendChild(title);
        title.classList.add('title')
        // 3. 设置图表的div 
        var charts = document.createElement("div");
        Odiv.appendChild(charts);
        charts.classList.add('charts')
        // 4. 将图表添加到body
        document.body.appendChild(Odiv);
        // 5. 图表配置
        var myChart = echarts.init(charts);
        var option;
        option = {
          xAxis: {
            type: 'category',
            data: data[i].content.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: data[i].content.series
        };
        option && myChart.setOption(option);
      }
    }
  </script>
</body>

</html>

二、点击下载按钮生成快照 - 图片路径

1. 效果图

在这里插入图片描述 在这里插入图片描述

2. 实现代码

1)导入html2canvas
① 下载完成后,导入dist文件夹下的html2canvas.js

yarn add html2canvas

② 导入后报错
在这里插入图片描述

解决:
打开导入的html2canvas.js
在文件最后一行有 //# sourceMappingURL=html2canvas.js.map 修改为 // /# sourceMappingURL=html2canvas.js.map

2)逻辑实现

<!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">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./html2canvas.js"></script>
  <style>
    .box {
      width: 500px;
      height: 500px;
      margin: 10px;
    }

    .charts {
      width: 450px;
      height: 450px;
      border: 1px solid black;
      margin: 10px;
    }

    .titleBox {
      display: flex;
      width: 100%;
      height: 30px;
    }

    .title {
      width: 80%;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>

<body>

  <script>
    let data = [{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'line'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'line'
          }
        },
        className: 'three'
      }
    ]

    window.onload = function () {
      for (let i = 0; i < data.length; i++) {
        // 1. 创建div(每个图表)
        var Odiv = document.createElement("div"); 
        Odiv.classList.add('box')
        // 2. 创建标题的div
        var titleBox = document.createElement("div");
        Odiv.appendChild(titleBox)
        titleBox.classList.add('titleBox')
        // 2.1 设置图表标题
        var title = document.createElement("div");
        title.innerText = data[i].title
        titleBox.appendChild(title);
        title.classList.add('title')
        // 2.2 设置按钮
        var btnBox = document.createElement("div");
        var btn = document.createElement("button");
        btn.innerText = '下载'
        // 2.3 按钮点击事件
        btn.onclick = function (e) {
          // 调用函数获取图片路径
          convertToImage(e.target.parentNode.nextSibling).then(res => {
            console.log(res);
          })
        }
        titleBox.appendChild(btn);
        // 3. 设置图表的div 
        var charts = document.createElement("div");
        Odiv.appendChild(charts);
        charts.classList.add('charts')
        // 4. 将图表添加到body
        document.body.appendChild(Odiv);
        // 5. 配置图表
        var myChart = echarts.init(charts);
        var option;
        option = {
          xAxis: {
            type: 'category',
            data: data[i].content.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: data[i].content.series
        };
        option && myChart.setOption(option);
      }
    }

    // 功能:生成快照
    const convertToImage = (container, options = {}) => {
      // 1. 设置放大倍数
      const scale = window.devicePixelRatio;
      // 2. 传入节点原始宽高
      const _width = container.offsetWidth;
      const _height = container.offsetHeight;
      // 3. html2canvas配置项
      const ops = {
        _width,
        _height,
        useCORS: true,
        allowTaint: false,
      };
      return html2canvas(container, ops).then(canvas => {
        // 4. 返回图片的二进制数据
        return canvas.toDataURL("image/png");
      });
    }
  </script>
</body>
</html>

三、 保存图片到本地

1. 效果图

在这里插入图片描述

2. 代码实现

<!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">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./html2canvas.js"></script>
  <style>
    .box {
      width: 500px;
      height: 500px;
      margin: 10px;
    }

    .charts {
      width: 450px;
      height: 450px;
      border: 1px solid black;
      margin: 10px;
    }

    .titleBox {
      display: flex;
      width: 100%;
      height: 30px;
    }

    .title {
      width: 80%;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }

  </style>
</head>

<body>

  <script>
    let data = [{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'line'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'line'
          }
        },
        className: 'three'
      }
    ]

    window.onload = function () {
      for (let i = 0; i < data.length; i++) {
        // 1. 创建div(每个图表)
        var Odiv = document.createElement("div"); 
        Odiv.classList.add('box')
        // 2. 创建标题的div
        var titleBox = document.createElement("div");
        Odiv.appendChild(titleBox)
        titleBox.classList.add('titleBox')
        // 2.1 设置图表标题
        var title = document.createElement("div");
        title.innerText = data[i].title
        titleBox.appendChild(title);
        title.classList.add('title')
        // 2.2 设置按钮
        var btnBox = document.createElement("div");
        var btn = document.createElement("button");
        btn.innerText = '下载'
        // 2.3 按钮点击事件
        btn.onclick = function (e) {
          // 调用函数获取图片路径
          convertToImage(e.target.parentNode.nextSibling).then(res => {
            // 将图片下载到本地
            var x = new XMLHttpRequest();
            x.open("GET", res, true);
            x.responseType = 'blob';
            x.onload = function (e) {
              var url = window.URL.createObjectURL(x.response)
              var a = document.createElement('a');
              a.href = url
              a.download = '自定义图片名'
              a.click()
            }
            x.send();
          })
        }
        titleBox.appendChild(btn);
        // 3. 设置图表的div 
        var charts = document.createElement("div");
        Odiv.appendChild(charts);
        charts.classList.add('charts')
        // 4. 将图表添加到body
        document.body.appendChild(Odiv);
        // 5. 配置图表
        var myChart = echarts.init(charts);
        var option;
        option = {
          xAxis: {
            type: 'category',
            data: data[i].content.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: data[i].content.series
        };
        option && myChart.setOption(option);
      }
    }

    // 功能:生成快照
    const convertToImage = (container, options = {}) => {
      // 1. 设置放大倍数
      const scale = window.devicePixelRatio;
      // 2. 传入节点原始宽高
      const _width = container.offsetWidth;
      const _height = container.offsetHeight;
      // 3. html2canvas配置项
      const ops = {
        _width,
        _height,
        useCORS: true,
        allowTaint: false,
      };
      return html2canvas(container, ops).then(canvas => {
        // 4. 返回图片的二进制数据
        return canvas.toDataURL("image/png");
      });
    }
  </script>
</body>

</html>
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaSE 可以使用 echarts4j 库来生成 Echarts 图表Echarts 是一个可视化的图表库,提供了丰富的图表类型,包括折线图、柱状图、饼图等等。而 echarts4j 则是一个针对 JavaSE 开发的 Echarts 封装库,方便 Java 开发者在代码中生成和使用 Echarts 图表。 使用 echarts4j 可以通过几行代码来生成 Echarts 图表。首先,需要创建一个 ECharts 对象,然后根据需要创建不同类型的图表对象,例如折线图对象或柱状图对象。接着,通过设置图表的各种属性,如标题、大小、数据等,来定制化图表的样式和内容。最后,将图表对象添加到 ECharts 对象中,并将生成图表写入到 HTML 文件中。 以下是一个使用 echarts4j 生成折线图的示例代码: ```java import com.github.abel533.echarts.ECharts; import com.github.abel533.echarts.Option; import com.github.abel533.echarts.axis.CategoryAxis; import com.github.abel533.echarts.axis.ValueAxis; import com.github.abel533.echarts.code.LineType; import com.github.abel533.echarts.code.Magic; import com.github.abel533.echarts.code.Tool; public class EchartsDemo { public static void main(String[] args) { // 创建 ECharts 对象 ECharts echarts = new ECharts(); // 创建折线图对象 Option option = new Option(); option.title("折线图示例"); // 设置横坐标和纵坐标 CategoryAxis categoryAxis = new CategoryAxis(); categoryAxis.data("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"); option.xAxis(categoryAxis); ValueAxis valueAxis = new ValueAxis(); option.yAxis(valueAxis); // 添加数据 option.series(echarts4j.series.Line().data(120, 200, 150, 80, 70, 110, 130)); // 设置图表工具 option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage); // 设置图表样式 option.tooltip().trigger(LineType.item).formatter("{a} <br/>{b} : {c}"); // 将图表添加到 ECharts 对象中 echarts.setOption(option); // 将生成图表写入到 HTML 文件中 echarts.writeToHtml("result.html"); } } ``` 通过上述代码,在运行后会生成一个 result.html 文件,在浏览器中打开该文件即可看到生成的折线图。以上仅是一个简单的示例,echarts4j 还提供了丰富的方法和属性,可以实现更多定制化的需求。 ### 回答2: 使用JavaSE生成Echarts图表通常需要以下步骤: 1. 导入Echarts库:首先,需要在Java项目中导入Echarts的相关库文件,这些库文件可以从Echarts官方网站下载并导入到项目中。 2. 创建图表实例:在Java代码中,可以通过创建ECharts对象来初始化一个图表实例。例如,可以使用`ECharts echarts = new ECharts();`来创建一个空的图表实例。 3. 设置图表基本属性:通过`echarts.setOption(Option option)`方法,可以设置图表的基本属性,例如标题、图例、坐标轴、提示框等。这些属性可以通过Option对象来定义和配置。 4. 添加图表数据:调用`echarts.getData().add(Series series)`方法来添加图表的数据序列。可以使用Series对象来定义每个数据序列的类型(例如折线图、柱状图等)以及对应的数据项。 5. 渲染图表:使用JavaFX、Swing或其他图形库,将图表实例渲染到图形界面中显示。 6. 保存图表:如果需要将图表保存图片或其他格式,可以使用Echarts提供的API进行保存。 7. 更新图表:如果需要动态更新图表的数据,可以通过修改图表实例的数据序列,并重新渲染图表来实现。 总之,使用JavaSE生成Echarts图表需要导入相关库文件,创建图表实例并设置属性,添加数据并渲染图表,可以通过JavaFX、Swing等图形库来显示图表,并可以进行图表保存动态更新。这样就可以在Java项目中实现生成Echarts图表的功能。 ### 回答3: JavaSE可以使用Echarts提供的Java API来生成图表Echarts是一个基于JavaScript的数据可视化库,可以用来创建各种类型的图表,如折线图、柱状图、饼图等。 首先,我们需要在JavaSE项目中引入Echarts的Java API库。可以通过在pom.xml文件中配置Maven依赖,或者手动将API库文件添加到项目中。 接下来,我们可以使用Java代码来生成Echarts图表。首先,我们需要创建一个Echarts实例,可以通过调用Echarts提供的构造方法来实现,例如: ```java import com.github.abel533.echarts.ECharts; import com.github.abel533.echarts.Option; import com.github.abel533.echarts.code.Magic; import com.github.abel533.echarts.code.Tool; import com.github.abel533.echarts.json.GsonOption; // 创建Echarts实例 ECharts echarts = new ECharts(); GsonOption option = new GsonOption(); // 设置图表的通用属性 option.title().text("图表标题"); option.tooltip().show(true); // 设置图表的数据 option.legend().data("图例1", "图例2"); option.xAxis().data("数据1", "数据2", "数据3"); option.yAxis().name("数值"); // 添加图表的系列数据 option.series("图例1", Magic.line, new ArrayList<>(Arrays.asList(10, 20, 30))); option.series("图例2", Magic.pie, new ArrayList<>(Arrays.asList(100, 200, 300))); // 设置图表的工具栏 option.toolbox().show(true).feature(Tool.dataView, Tool.magicType, Tool.restore); // 将Option设置到Echarts实例中 echarts.setOption(option); // 将Echarts实例输出为HTML文件或JSON字符串 String echartsHtml = echarts.toHtml(); String echartsJson = echarts.toJson(); ``` 在以上示例中,我们创建了一个ECharts实例echarts,并通过调用Option的相关方法设置了图表的属性和数据。最后,通过调用Echarts提供的toHtml()或toJson()方法,可以将Echarts实例输出为HTML文件或JSON字符串。 需要注意的是,以上示例仅为演示Echarts的基本用法,在实际使用中,可以根据具体需求来设置更多的属性和数据。有关Echarts的更多详细用法,可以查阅Echarts的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值