1.echarts学习前言
最近接触到echarts，发现数据可视化真的是魅力无穷啊，各种变幻的曲线交错，以及‘曼妙’的动画效果真是让人如痴如醉！
下面就来一起欣赏她的美...
“ ECharts是中国的，也是世界的。”
—— 浙江大学教授 · 陈为
“ ECharts，发现数据可视化之美！”
——中国传媒大学教授 · 沈浩
大数据时代
重新定义数据图表的时候到了......
2.echarts的demo代码
需求：ajax请求到json格式数据，动态添加到曲线和表格中
jquery：1.8.3版本
bootstrap：2.3.2版本
用代码说话是我们的游戏规则（吼吼）：
echarts/qiyue.html 中 qiyue.html文件:
<html> <head> <title>*echarts*</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/echarts.js"></script> <style type="text/css"> *{ font-family: "微软雅黑"; } .count-title{ padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #ccc; } #main{ width: 100%; height: 500px; margin: 0 auto; } .total-incre{ padding-left: 147px; margin-top: 5px; position: absolute; } .total-incre strong{ color: #e5903a; } .chooseTime{ position: absolute; right: 100px; top:18px; } .table td,.table th{ text-align: center; } .agencyNew{ width: 90%; } </style> </head> <body> <div class="container agencyNew"> <div class="row"> <!-- Split button --> <h1 class="count-title">XX销售情况</h1> <p class="total-incre"> 合计：<strong class="total">888</strong> | 新增 ：<strong class="increase">88</strong> </p> <!--下拉框--> <div class="dropdown chooseTime"> <a class="btn btn-default dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" > 最近一个月 <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#">最近一个月</a></li> <li role="separator" class="divider"></li> <li><a href="#">2017年2月</a></li> <li><a href="#">2017年1月</a></li> </ul> </div> <!--echarts曲线容器--> <div id="main"> </div> <!--表格--> <table class="table table-bordered table-striped table-hover"> <thead> <!--动态获取表头--> </thead> <tbody> <!--动态获取表格--> </tbody> </table> </div> </div> </body> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script src="js/qiyue.js"></script> </html>
echarts/js/qiyue.js 中 qiyue.js文件:
var myChart,option; $(function(){ require.config({ paths: { 'echarts': 'http://echarts.baidu.com/build/dist' } }); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { myChart = ec.init(document.getElementById('main')); option = { title: { text: 'XX销售情况', subtext: '' }, tooltip: { trigger: 'axis' }, legend: { data: [] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis: [ { type : 'category', boundaryGap : false, data : [ ] , axisLabel: { interval:0,//横轴信息全部显示 rotate: 30,//60度角倾斜显示 formatter:function(val){ // return val.split("").join(" "); //横轴信息文字竖直显示 return val; }, textStyle: { color: '#000', align: 'center', fontWeight: 'bold' } } } ], yAxis: [], series: [] }; // myChart = require('echarts').init(document.getElementById('main')); myChart.showLoading({ // text : '数据获取中', effect: 'whirling' }); getData(); }); }); //请求json var fields, itemsMap, seriesItem, yAxis_arr = [], thead = '', tbody = '', tbody_tr = ''; function getData(){ $.ajax({ url : 'data0.json', dataType : 'json', async : false, type : 'get', success : function(json){ // console.log(json.data); console.log(option); fields = json.data.fields; itemsMap = json.data.itemsMap; createEcharts();//动态创建曲线图 createTab();//动态创建表格 myChart.hideLoading(); myChart.setOption(option); }, error : function(XMLHttpRequest, textStatus, errorThrown){ if(textStatus == 'parsererror'){ alert('数据为空或者SQL语句错误！'); } console.log(errorThrown); } }); } /* * 动态创建曲线图 */ function createEcharts(){ // series for(var i=1; i<fields.length; i++){ if(i==1){ itemStyle = { normal: { areaStyle: { type: 'default' } } }; }else{ itemStyle = { normal: { color: '#70bf41' } }; } option.legend.data.push(fields[i]); // legend seriesItem = {}; seriesItem.name = fields[i]; seriesItem.type = 'line'; seriesItem.smooth = false; seriesItem.yAxisIndex= i-1; seriesItem.itemStyle = itemStyle; seriesItem.data = []; for(var key in itemsMap){ seriesItem.data.push(itemsMap[key][i]); } // 填充默认显示曲线的数据 option.series.push(seriesItem); // option.series[0].type = 'line'; // option.series[1].type = 'bar'; // yAxis var yAxis_obj = {}; yAxis_obj.type = 'value'; yAxis_obj.name = fields[i]; yAxis_obj.show = true; yAxis_arr.push(yAxis_obj); } option.yAxis = yAxis_arr; console.log(yAxis_arr); } /* * 动态创建表格 */ function createTab(){ //动态创建表头 for(var i=0; i<fields.length; i++){ thead += '<th>'+fields[i]+'</th>'; $('.table thead').html('<tr>'+thead+'</tr>'); } for(var j in itemsMap){ var tbody_td = ''; option.xAxis[0].data.push(itemsMap[j][0]); // XAxis for(var k=0; k<itemsMap[j].length; k++){ tbody_td += '<td>'+itemsMap[j][k]+'</td>'; } // console.log(tbody_td); tbody_tr += '<tr>'+tbody_td+'</tr>'; } $('.table tbody').html(tbody_tr); }
echarts/data0.json 中data0.json文件:
{ "data": { "itemsMap": { "1": ["2017-03-1", "3", "8"], "2": ["2017-03-2", "18", "20"], "3": ["2017-03-3", "43", "54"], "4": ["2017-03-4", "50", "74"], "5": ["2017-03-5", "39", "41"], "6": ["2017-03-6", "20", "52"], "7": ["2017-03-7", "21", "25"], "8": ["2017-03-8", "16", "26"], "9": ["2017-03-9", "10", "11"], "10": ["2017-03-10", "8", "10"] }, "fields": ["日期", "预购", "成交"], "status": 1 } }
3.运行结果展示
由于鹅的博客还没有直接运行功能，为了浏览方便我就把效果图贴上吧(= =)
tips：所有数据纯属虚构哦。
源代码在github上提供https://github.com/yingliyu/commonDemo.git