五分鍾上手：
圖片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鍾上手之折線圖</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 myChart.setOption({ title: { text: '近七日收益' }, tooltip: { trigger: 'axis' }, legend: { data:['近七日收益'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["1","2","3","4","5"] }, yAxis: { type: 'value' }, series: [ { name:'近七日收益', type:'line', stack: '總量', data:["1","2","3","4","5"] } ] }); // 異步加載數據 /* $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] });});*/ </script>
</body>
</html>
和json數據結合：
如圖所示：
圖片.png
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 900px;height:400px;"></div>
</body>
<!--月收益-->
<script type="text/javascript"> function bb() { // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); $.get('data1.json').done(function(data) { myChart.setOption({ title: { text: '月收益' }, tooltip: {}, // legend: { // data:['收益'] // }, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: '收益', type: 'line', data: data.data }] }); }); } bb(); </script>
</html>
數據：data1.json文件
{
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
820,
932,
901,
9134,
1290,
330,
120
]
}
文末福利：
福利一：前端，Java，產品經理，微信小程序，Python等10G資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程。
【領取方法】
關注 【編程微刊】微信公眾號：
回復【小程序demo】一鍵領取130個微信小程序源碼demo資源。
回復【領取資源】一鍵領取前端，Java，產品經理，微信小程序，Python等資源合集10G資源大放送。
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。