前言
這個必須要有前言，即便很短，對於有強迫症的人來說不容易啊。言歸正傳，之前做圖一直使用rdlc自帶的格式，雖然任務完成，但是一直覺得不太美觀，
空余時間開始找其他的插件，終於找到了Highchart和echarts,這一系列主要是針對echarts.
關於Echarts
百度比我更清楚，我就不說了！
echarts的實例參考地址：http://echarts.baidu.com/doc/example.html
echarts的文檔參考地址：http://echarts.baidu.com/doc/doc.html
echarts(版本2.2.7)下載地址：http://echarts.baidu.com/build/echarts-2.2.7.zip
實例
在項目中新建echarts文件夾，並將下載的echarts-2.2.7.zip解壓，將build下的dist文件夾中所有的文件拷貝到echarts文件夾中,如下圖
根據文檔只需要幾分鍾的功夫，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> <div id="main" style=" height:400px;"></div> <script type="text/javascript" src="echarts/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'echarts' //echarts路徑 } }); // 使用 require( [ 'echarts', //echarts路徑 'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載 'echarts/chart/line' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基於准備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); option = { tooltip: { trigger: 'axis' }, //右側工具欄 /* toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true,*/ legend: { data: ['蒸發量', '降水量', '平均溫度'] }, //橫軸信息 xAxis: [ { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] } ], //縱軸信息 yAxis: [ { type: 'value', name: '水量', axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '溫度', axisLabel: { formatter: '{value} °C' } } ], //數據系列 series: [ { name: '蒸發量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name: '降水量', type: 'line', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name: '平均溫度', type: 'line', yAxisIndex: 1, data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ] }; // 為echarts對象加載數據 myChart.setOption(option); } ); </script> </body> </html>
效果如下圖，效果是不是很棒
使用ajax動態加載數據，請看下回分解。