echarts 图表应用 php
1、模板
<script src="{theme:javascript/echarts/build/dist/echarts.js}"></script> <div id="main"> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="box"> <div class="box-content" id="image" style="height:350px"> </div> </div> </div> </div> </div> </div> <script type='text/javascript'> // $(function(){ dataList_ajax(1); showechart(1) $("[class=tableDd]").click(function(){ var type = $(this).find('input[name="type"]').val(); dataList_ajax(type); showechart(type); }); $(".h_tableDl .tableDd").click(function(){ $(".h_tableDl .tableDd").removeClass("active"); $(this).addClass("active"); }); }); function showechart(type){ //路径配置 require.config({ paths: { echarts: '{theme:javascript/echarts/build/dist}' } }); // 使用 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('image')); //通过Ajax获取数据 var url = '{url:/market/dataList_ajax/type/@type@}'; url = url.replace("@type@",type); $.getJSON(url,function(json) { var option = { title : { text: '图形统计' }, tooltip : { trigger: 'axis', interval: 0 , }, legend: { data:['订单量','金额'] }, toolbox: { show : true, feature : { magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'category', position: 'bottom', boundaryGap: true, axisLine : { // 轴线 show: true, lineStyle: { color: 'green', type: 'solid', } }, axisTick : { // 轴标记 show:true, length: 10, lineStyle: { color: 'red', type: 'solid', } }, splitLine : { show:true, lineStyle: { color: '#483d8b', type: 'dashed', } }, splitArea : { show: true, areaStyle:{ color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)'] } }, data : ['总成交量','成交未发货量','成交已发货量','成交买家已确认量','成交买家未确认超过15天','退货中','退货已确认','维权中'] }, ], yAxis : [ { name: '订单量(件)', type : 'value', position: 'left', scale: true, precision: 2, splitNumber: 9, axisLine : { // 轴线 show: true, lineStyle: { color: 'red', type: 'dashed', width: 2 } }, axisTick : { // 轴标记 show:true, length: 10, lineStyle: { color: 'green', type: 'solid', width: 2 } }, axisLabel : { show:true, interval: 'auto', // {number} rotate: -45, margin: 18, formatter: '{value}', // Template formatter! textStyle: { color: '#1e90ff', fontFamily: 'verdana', fontSize: 10, fontStyle: 'normal', fontWeight: 'bold' } }, }, { name: '金额(元)', type : 'value', precision: 2, axisLabel : { formatter: function (value) { return value } }, splitLine : { show: false } } ], series : [ { name: '订单量', type: 'bar', data:json.num, itemStyle : { normal: {label : {show: true}}}, }, { name:'金额', type: 'bar', yAxisIndex: 1, data:json.money, itemStyle : { normal: {label : {show: true}}}, }, ] }; // 为echarts对象加载数据 myChart.setOption(option,'monokai'); }); } ); } function dataList_ajax(type) { var url = '{url:/market/dataList_ajax/type/@type@}'; url = url.replace("@type@",type); $.getJSON(url,function(json) { $('#data_list').empty(); var string =''; string += "<dl class='tableDl clearfix'><dd class='tableDd2'>订单量</dd><dd class='tableDd2'>"+(json.num[0]?json.num[0]:0)+"</dd><dd class='tableDd2'>"+(json.num[1]?json.num[1]:0)+"</dd><dd class='tableDd2'>"+(json.num[2]?json.num[2]:0)+"</dd><dd class='tableDd2'>"+(json.num[3]?json.num[3]:0)+"</dd><dd class='tableDd2'>"+(json.num[4]?json.num[4]:0)+"</dd><dd class='tableDd2'>"+(json.num[5]?json.num[5]:0)+"</dd><dd class='tableDd2'>"+(json.num[6]?json.num[6]:0)+"</dd><dd class='tableDd2'>"+(json.num[7]?json.num[7]:0)+"</dd></dl>"; string += "<dl class='tableDl clearfix'><dd class='tableDd2'>金额(元)</dd><dd class='tableDd2'>"+(json.money[0]?json.money[0]:0)+"</dd><dd class='tableDd2'>"+(json.money[1]?json.money[1]:0)+"</dd><dd class='tableDd2'>"+(json.money[2]?json.money[2]:0)+"</dd><dd class='tableDd2'>"+(json.money[3]?json.money[3]:0)+"</dd><dd class='tableDd2'>"+(json.money[4]?json.money[4]:0)+"</dd><dd class='tableDd2'>"+(json.money[5]?json.money[5]:0)+"</dd><dd class='tableDd2'>"+(json.money[6]?json.money[6]:0)+"</dd><dd class='tableDd2'>"+(json.money[7]?json.money[7]:0)+"</dd></dl>"; $('#data_list').append(string); }); } </script>
2、数据用json进行获取，格式为
$data_num = array( $data1[0]['number']?$data1[0]['number']:0, $data2[0]['number']?$data2[0]['number']:0, $data3[0]['number']?$data3[0]['number']:0, $data4[0]['number']?$data4[0]['number']:0, $data5[0]['number']?$data5[0]['number']:0, $data6[0]['number']?$data6[0]['number']:0, $data7[0]['number']?$data7[0]['number']:0, $data8[0]['number']?$data8[0]['number']:0); $data_money = array( $data1[0]['total']?$data1[0]['total']:0, $data2[0]['total']?$data2[0]['total']:0, $data3[0]['total']?$data3[0]['total']:0, $data4[0]['total']?$data4[0]['total']:0, $data5[0]['total']?$data5[0]['total']:0, $data6[0]['total']?$data6[0]['total']:0, $data7[0]['total']?$data7[0]['total']:0, $data8[0]['total']?$data8[0]['total']:0); echo JSON::encode(array('num' => $data_num,'money'=>$data_money));
