效果图

这个报表运行出来的结果如下，其中转化率会根据值提示的改变而改变。

整体布局

整个页面如图所示：

分步骤解析

1. tab中的内容

<div id="table"  style="display:none">

给列表一个唯一id“table”，并将列表隐藏。

2. 画布中的内容

</div> <div id="main" style="width:800px; height:600px;">

给一个宽800px高600px的块大小，用来后面放图表

3. 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>

查看一下以上用到的变量：

4. src中的内容
   引入echarts文件，放在最后有助于速度提升。

<script src="/p2pd/echarts.min.js"></script>