OBIEE使用Echarts实现图形效果

最新推荐文章于 2023-07-04 16:24:27 发布

欢乐的八爪鱼

最新推荐文章于 2023-07-04 16:24:27 发布

阅读量627

点赞数

分类专栏：开发技术文章标签： BIEE ECharts

本文链接：https://blog.csdn.net/gm371200587/article/details/83865738

版权

开发技术专栏收录该内容

26 篇文章 0 订阅

订阅专栏

背景：使用BI的自带图形（下图）时，度量与切片等不能满足我们需求时，可以试试Echarts实现

使用其他视图的叙述集成Echarts

实现过程：

简单实现一个

前缀：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ECharts</title>

<script src="/AnalyticsRes/echarts.min.js"></script>
</head>

<body>
　　
<div id="main" style="width: 890px;height:320px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var bd = [];
var wd= [];
var bdData= 0;
var wdData= 0;

叙述：注意：这里的@9和@10是在表点击修改后，实际表的列数（第几列）

补充：这个方法取得值，长度是30，暂未找到解决方法，如果数据大于30行（或分组维度大于30），不建议使用

bd.push('@9');
wd.push('@10')

后缀：根据业务需求写，可以放在Echarts中试运行 http://echarts.baidu.com/examples/

for(var i = 0;i<bd.length;i++){

var bdvalue = bd[i].replace(/&nbsp/g,0) //这里根据输出内容替换成需要的东西(我这里输出的是空格的字符串&nbsp,替换成0

bdData += parseInt(bdvalue);

}

for(var i = 0;i<wd.length;i++){

var wdvalue = wd[i].replace(/&nbsp/g,0)

wdData += parseInt(wdvalue);

}

//我用的饼图

option = {
title : {
text: '本地/外地',
subtext: '地区结构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['本地','外地']
},
series : [
{
name: '来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:bdData, name:'本地'},
{value:wdData, name:'外地'}
],

}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

</script>
</body>

</html>

运行效果：

欢乐的八爪鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
OBIEE使用Echarts实现图形效果

背景：使用BI的自带图形（下图）时，度量与切片等不能满足我们需求时，可以试试Echarts实现使用其他视图的叙述集成Echarts实现过程：简单实现一个前缀：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;ECharts&lt;/titl..
复制链接

扫一扫

专栏目录