【前端统计图】echarts实现单条折线图

五分钟上手：

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

转载于:https://www.cnblogs.com/wangting888/p/9701611.html

【前端统计图】echarts实现单条折线图相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...
echarts 时间曲线图_web前端显示设备实时温度，ECharts实现温度折线图，实时动态温度曲线图生成...
web前端显示设备实时温度, 具体步骤如下: 1.在页面中引入ECharts文件echarts-all.js 2.在body中为ECharts准备一个具备大小(宽高)的Dom 3.具体JS代码如下: ...
vue+axios+echarts实现一个折线图
前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子. Ec ...
echarts柱状图饼图折线图
最近大屏项目里做的首先看看效果这几个图我将其标为七个部分下方成为echarts1,echarts2往后类推有需要可以直接拷贝下方代码推荐一个朋友最近发我的echarts图形地址 ...
android时间轴折线图,echarts时间轴折线图
当使用echarts折线图时,每个数据会打点,在数据量小的时候,美观又快捷,但是当数据量过大时,会非常的卡,以及不美观例如: series: { symbol:'circle', } > EC ...

【前端统计图】echarts实现单条折线图

文末福利：

【前端统计图】echarts实现单条折线图相关推荐

最新文章

热门文章