將下載的包解壓,再將包內文件copy到C:\inetpub\wwwroot下
在html中做如下引用:
<script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>
注意::
下面這句在操作圖表的script標簽內
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的路徑,從當前頁面鏈接到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({
//圖表標題
title: {
text: "ECharts簡單線形圖表及其配置展示實例", //正標題
link: "http://www.stepday.com", //正標題鏈接 點擊可在新窗口中打開
x: "center", //標題水平方向位置
subtext: "From:http://www.stepday.com", //副標題
sublink: "http://www.stepday.com", //副標題鏈接
//正標題樣式
textStyle: {
fontSize: 24
},
//副標題樣式
subtextStyle: {
fontSize: 12,
color: "red"
}
},
//數據提示框配置
//tooltip: {
// trigger: 'axis' //觸發類型,默認數據觸發,見下圖,可選為:'item' | 'axis' 其實就是是否共享提示框
//},
//圖例配置
legend: {
data: ['蒸發量', '降水量'], //這里需要與series內的每一組數據的name值保持一致
y: "bottom"
},
//工具箱配置
toolbox: {
show: true, //是否顯示工具箱
feature: {
mark: false, // 輔助線標志,上圖icon左數1/2/3,分別是啟用,刪除上一條,刪除全部
dataView: { readOnly: false }, // 數據視圖,上圖icon左數8,打開數據視圖
magicType: ['line', 'bar'], // 圖表類型切換,當前僅支持直角系下的折線圖、柱狀圖轉換,上圖icon左數6/7,分別是切換折線圖,切換柱形圖
restore: true, // 還原,復位原始圖表,上圖icon左數9,還原
saveAsImage: true // 保存為圖片,上圖icon左數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: "數值"
}
],
//圖表Series數據序列配置
series: [
{
name: '蒸發量',
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>


