echarts 官网里的示例在润乾里没有效果,怎么办?
问题现象:
例如 echarts 官网里系列的背景色属性设置,在官网里可以看到对应效果,而复制对应代码到润乾报表中后,则没有效果:
润乾中的统计图 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 不需要添加加载,注意清除浏览器缓存就行了