背景：使用BI的自带图形（下图）时，度量与切片等不能满足我们需求时，可以试试Echarts实现
使用其他视图的叙述集成Echarts
实现过程：
简单实现一个
前缀：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="/AnalyticsRes/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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(/ /g,0) //这里根据输出内容替换成需要的东西(我这里输出的是空格的字符串 ,替换成0
bdData += parseInt(bdvalue);
}
for(var i = 0;i<wd.length;i++){
var wdvalue = wd[i].replace(/ /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>
运行效果：
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
