echarts 官网里的示例在润乾里没有效果,怎么办?

 

问题现象:

imagepng

例如 echarts 官网里系列的背景色属性设置,在官网里可以看到对应效果,而复制对应代码到润乾报表中后,则没有效果:

imagepng

润乾中的统计图 js 代码如下:

<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 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'black'
        }
    }]
};
 myChart.setOption(option);
</script>

解决方法:

1、从 echarts 官网下载完整版的 js
下载地址:https://echarts.apache.org/zh/download.html
获取到新的 echarts.min.js 文件或者 echarts.js 文件
2、把下载好的 echarts.min.js(勾选了压缩属性)/echarts.js(没有勾选压缩属性)文件放到报表服务 \raqsoft\echarts 目录下
3、修改报表服务 \reportJsp\echartjs.jsp 文件的加载代码,添加对该 js 文件的加载:

<script type="text/javascript" src="<%=appmap%><%=ReportConfig.raqsoftDir%>/echarts/echarts.min.js"></script>

后者 echarts.js 不需要添加加载,注意清除浏览器缓存就行了