五分钟上手：
图片.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。