echarts基本使用

基本操作：

1，准备好需要渲染chart图的div层

<div id="org-data-percent" class="org-data-percent"></div>
2， ECharts单文件引入
<script src="http://echarts.baidu.com/build/dist/echarts.js" type="text/javascript" ></script>
3，路径配置
1 <script type="text/javascript">
2             require.config({
3                     paths: {
4                         echarts: 'http://echarts.baidu.com/build/dist'
5                     }
6                 });
7 </script>
4，按需加载，以饼图为例相关配置     
　　　　require(
                [
                    'echarts',
                    'echarts/chart/pie'//饼图
                ],
        function (ec) {
                    var myChartPercent = ec.init(document.getElementById('orgDataPercent')); 
 
                    var optionPercent = {
                        title : {
                            text: '上报类型统计图',
                            subtext: '数据更新:截止昨日',
                            x:'left'
                        },
                        tooltip : {
                            trigger: 'item',
                            triggerOn: 'click',
                            padding: 0,
                            fontSize: 12,
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            show: false,
                            orient: 'vertical',
                            left: 'right',
                            data: ['警情','动态','报警','勤务','隐患','线索','其他']
                        },
                        series : [
                            {
                            name: '塔式支队',
                            type: 'pie',
                            radius : '55%',
                            center: ['48%', '60%'],
                            data:[
                                {value:json.data.police, name:'警情'},
                                {value:json.data.news, name:'动态'},
                                {value:json.data.alarm, name:'报警'},
                                {value:json.data.duty, name:'勤务'},
                                {value:json.data.danger, name:'隐患'},
                                {value:json.data.trail, name:'线索'},
                                {value:json.data.other, name:'其他'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
 
                    myChartPercent.setOption(optionPercent); 
                }
             );

5，详细配置参考链接：

1、http://echarts.baidu.com/option.html#title echarts setoption详细文档
 
使用心得：
曾在项目中使用过这几种图表js插件，也曾特意做过dome比较，各有所长及不足之处，其中
echarts:基于Html5的Canvas，轻量级的数据可视化报表，并且是免费的。如果是在移动端使用时，特别是在webview下面有部分机型会存在各种渲染问题，本人就曾遇过这个深坑
highcharts:基于SVG，兼容性很好，官方文档很详尽，个人认为可以优先考虑这个插件！！
fusioncharts：一般是商用报表，非免费，重量级的，以前项目中使用过，速度较慢！
 
 
 
 
 
posted @ 2016-03-17 14:27  微人类  阅读(1136)  评论(0)  编辑  收藏  举报