以项目中的扇形统计图为例:
首先,第一步:
引入外部echarts.js文件
其次,第二步:
HTML代码块
<div class="count-body-con count-tj"> <div class="float-e-margins"> <div class="ibox-title"> <h3 style="letter-spacing: 3px;text-align: center">某某情况统计</h3> </div> <div class="ibox-content" style="padding:0 0;text-align: center"> <div class="flot-chart-content" id="pie2"> </div> </div> </div> </div>
最后,第三步:
js代码块
require.config({ paths: { echarts: '<%=path%>/resources/js' } }); require( [ 'echarts', 'echarts/chart/pie' // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 // 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 // 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('pie1')); var option = { // title: { // text: '框架自带的统计标题', // textStyle: { // fontSize: 24, // fontWeight: 'normal', // color: '#2E9ED5' // }, // x: 'center' // }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}人 ({d}%)" }, legend: { orient: 'vertical', x: 'left', y: 'top', left: 'left', data: ['情况1', '情况2', '情况3'] }, calculable: false, series: [ { name: '人数', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value:${后台统计情况1的数据}, name: '情况1'}, {value:${后台统计情况2的数据}, name: '情况2'}, {value:${后台统计情况3的数据}, name: '情况3'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); window.onresize = myChart.resize; } );
效果: