如何升级润乾报表内置 echarts 版本

需求描述

Echarts 是一个使用 JavaScript 实现的开源可视化库,可以提供直观、交互丰富、高度个性化定制的数据可视化图表。新版本 Echarts 中会增加一些新的特性供用户选择使用,那么 echarts 官网版本更新后,如何同步更新报表工具中的 echarts 版本呢?

问题分析

echarts 是作为润乾报表的第三方统计图引入的,所以只需要把 echarts 的核心文件放到对应目录下就可以了。

具体操作

1、echarts 官网下载文件

访问https://www.echartsjs.com/zh/download.html
按照方法二从 GitHub 下载完整 echarts 编译后文件,以下载 4.4.0 版本为例,操作如下:

imagepng
点击 4.4.0 后面的 Dist 会进入到下面的界面:

imagepng
然后点击上一层目录,进入到 echarts 的主目录:

imagepng
最后点击 clone or download 获取完整 echarts 文件。

2、润乾报表配置

把获取到的压缩包解压后,把 incubator-echarts-4.4.0 整个文件夹放到 demo\raqsoft 下,这里可以吧文件夹重命名为:echarts4.4 以区分版本。

imagepng
注意: 如果需要用到 echarts2 版本,那么不要删除内置的 echarts2 文件夹和它下面的内容。

3、展现测试

当测试 echarts 各个版本的报表展现正常时,说明升级已经成功。
下面是各个版本的测试说明。

1)echarts2 版本测试

<1>echarts2 模板:

<div id='${id}' style="width:${width}px;height:${height}px"></div>
 <script type="text/javascript">
//数据预处理可以在这里完成
 require(
[
 'echarts',
 'echarts/chart/line'//加载需要的模块
],
 function (ec) {
 var myChart = ec.init(document.getElementById('${id}'));
 var option = {
//复制下载下来的官网html部分的option配置
 };
 myChart.setOption(option);
 }
 );
</script>

<2>echarts2 示例报表文件

Echarts2.zip

2)echarts3 以上版本测试

<1>echarts3 以上模板:

<div id='${id}' style="width:${width}px;height:${height}px"></div>   
<script type="text/javascript">
//数据预处理可以在这里完成
	var ${id}_dom = document.getElementById('${id}');
	var myChart = echarts.init(${id}_dom); 
 var option = {
//复制下载下来的官网html部分的option配置
 };
 myChart.setOption(option);
</script>

<2>echarts3 示例报表文件

Echarts3.zip

<3>echarts4 示例报表文件

echart4.zip

发布了48 篇原创文章 · 获赞 13 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/zozoxxma/article/details/103710545
今日推荐