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); 
                }
             );