五分钟上手：
图片.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
![Centos启动卡住，starting auditd: [failed]](https://img-blog.csdnimg.cn/20190412103959251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfeHRo,size_16,color_FFFFFF,t_70)
