效果图
这个报表运行出来的结果如下，其中转化率会根据值提示的改变而改变。
整体布局
整个页面如图所示：
分步骤解析
- tab中的内容
<div id="table" style="display:none">
给列表一个唯一id“table”，并将列表隐藏。
- 画布中的内容
</div> <div id="main" style="width:800px; height:600px;">
给一个宽800px高600px的块大小，用来后面放图表
- echarts中的内容
<script type="text/JavaScript">
var myChart = echarts.init(document.getElementById('main')); #通过div的id获取对应画布
var obj= document.getElementById('table').getElementsByTagName("tr"); # 获取tr里的内容
var data=obj[1].cells[1].innerText*100; #获取rate的值，并乘以100
var rate = data.toFixed(2); #保留两位小数
option = { #option里面的内容详细参看echarts官网
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: rate
}
]
};
myChart.setOption(option,true);
</script>
查看一下以上用到的变量：
- src中的内容
引入echarts文件，放在最后有助于速度提升。
<script src="/p2pd/echarts.min.js"></script>
