可以適用於json數值，將其通過ajax獲取后重新組合成數組的形式然后放入echarts里面可以得到折線圖形：
<!DOCTYPE html>
<html>
<head>
<title>echart00001.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/esl.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<script type="text/javascript">
//引入echarts的一些js文件，這里還有疑問，不知怎么直接引入，只能通過網址引入 require.config({ paths:{ 'echarts' : 'http://echarts.baidu.com/build/echarts', 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts' } }); require( [ 'echarts', 'echarts/chart/line' ], //回調函數 DrawEChart //這里是調用一個函數用於繪制圖表 ); //渲染ECharts圖表 function DrawEChart(ec) { var mymon=new Array(12); var myrain=new Array(12); var myhot=new Array(12); var data=[{"mon":"1月","rain":2.6,"hot":2.0},{"mon":"2月","rain":5.9,"hot":4.9}, {"mon":"3月","rain":9.0,"hot":7.0},{"mon":"4月","rain":26.4,"hot":23.2}, {"mon":"5月","rain":28.7,"hot":25.6},{"mon":"6月","rain":70.7,"hot":76.7}, {"mon":"7月","rain":175.6,"hot":135.6},{"mon":"8月","rain":182.2,"hot":162.2}, {"mon":"9月","rain":48.7,"hot":32.6},{"mon":"10月","rain":18.8,"hot":20.0}, {"mon":"11月","rain":6.0,"hot":6.4},{"mon":"12月","rain":2.3,"hot":3.3}] for(var i=0;i<data.length;i++){ mymon[i]=data[i].mon; myrain[i]=data[i].rain; myhot[i]=data[i].hot; } //圖表渲染的容器對象 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: mymon, name: "月份" } ], //Y軸配置 yAxis: [ { type: 'value', splitArea: { show: true }, name:"數值" } ], //圖表Series數據序列配置 series: [ { name: '蒸發量', type: 'line', data: myhot }, { name: '降水量', type: 'line', data: myrain } ] }); } </script> <div id="main" style="height:400px"></div> </body> </html>
這是示例圖