將下載的包解壓，再將包內(nèi)文件copy到C:/inetpub/wwwroot下
在html中做如下引用：
<script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>
注意：：
下面這句在操作圖表的script標(biāo)簽內(nèi)
require.config({
paths: {
echarts: "http://localhost/echarts/build/source" //echarts.js的路徑C:/inetpub/wwwroot/echarts/build/source
//'echarts/chart/line': './js/echarts'
}
});
完整如下
測試代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>ECharts-基本線性圖及其配置要求</title> <!--<script src="js/esl.js" type="text/Javascript"></script>--> <script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script></head><body> <div id="main" style="height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;"> </div> <script type="text/javascript" language="javascript"> // 按需加載 // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 為模塊加載器配置echarts的路徑，從當(dāng)前頁面鏈接到echarts.js，定義所需圖表路徑 require.config({ paths: { echarts: "http://localhost/echarts/build/source" } }); require( [ 'echarts', 'echarts/chart/line'//在這引用自己要用的包即可 ], DrawEChart ); //渲染ECharts圖表 function DrawEChart(ec) { //圖表渲染的容器對象 var chartContainer = document.getElementById("main"); //加載圖表 var myChart = ec.init(chartContainer); myChart.setOption({ //圖表標(biāo)題 title: { text: "ECharts簡單線形圖表及其配置展示實例", //正標(biāo)題 link: "http://www.stepday.com", //正標(biāo)題鏈接 點擊可在新窗口中打開 x: "center", //標(biāo)題水平方向位置 subtext: "From:http://www.stepday.com", //副標(biāo)題 sublink: "http://www.stepday.com", //副標(biāo)題鏈接 //正標(biāo)題樣式 textStyle: { fontSize: 24 }, //副標(biāo)題樣式 subtextStyle: { fontSize: 12, color: "red" } }, //數(shù)據(jù)提示框配置 //tooltip: { // trigger: 'axis' //觸發(fā)類型，默認(rèn)數(shù)據(jù)觸發(fā)，見下圖，可選為：'item' | 'axis' 其實就是是否共享提示框 //}, //圖例配置 legend: { data: ['蒸發(fā)量', '降水量'], //這里需要與series內(nèi)的每一組數(shù)據(jù)的name值保持一致 y: "bottom" }, //工具箱配置 toolbox: { show: true, //是否顯示工具箱 feature: { mark: false, // 輔助線標(biāo)志，上圖icon左數(shù)1/2/3，分別是啟用，刪除上一條，刪除全部 dataView: { readOnly: false }, // 數(shù)據(jù)視圖，上圖icon左數(shù)8，打開數(shù)據(jù)視圖 magicType: ['line', 'bar'], // 圖表類型切換，當(dāng)前僅支持直角系下的折線圖、柱狀圖轉(zhuǎn)換，上圖icon左數(shù)6/7，分別是切換折線圖，切換柱形圖 restore: true, // 還原，復(fù)位原始圖表，上圖icon左數(shù)9，還原 saveAsImage: true // 保存為圖片，上圖icon左數(shù)10，保存 } }, calculable: true, //軸配置 xAxis: [ { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], name: "月份" } ], //Y軸配置 yAxis: [ { type: 'value', splitArea: { show: true }, name: "數(shù)值" } ], //圖表Series數(shù)據(jù)序列配置 series: [ { name: '蒸發(fā)量', type: 'line', 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] } ] }); } </script></body></html>
新聞熱點
疑難解答
