html 开源 折线图,ECharts折线图(一)

1、工程目录

c57437abdf03f74e4d95599b80f87171.png

2、引入插件angular-1.6.9、echarts-2.2.7

af4a1c1629c8f329bf55429ffcee9706.png

3、js编辑

var app = angular.module('app', []);

app.controller('lineCtrl', function($scope) {

$scope.legend = ['QUANTITY','AVG'];

$scope.item = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

$scope.quantity = [29, 21, 19, 32, 26, 24, 25, 16, 17, 14, 9, 3];

$scope.avg = [];

var total = 0;

for(var i=0;i

total +=

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 是百度开源的一个基于 JavaScript 的数据可视化库,可以用于创建各种类型的图表,包括折线图。下面是关于 ECharts 折线图的详解: 1. 折线图概述:折线图是一种常用的统计图表,用于显示数据随时间或其他连续变量的变化趋势。折线图由一系列连续的数据点通过线段连接而成,可以直观地展示数据的波动情况。 2. 折线图的应用场景:折线图适用于多种场景,比如股票指数走势、气温变化、销售额趋势等等。通过折线图,可以清晰地展示数据的变化规律,帮助用户做出合理的决策。 3. ECharts 中创建折线图:使用 ECharts 创建折线图非常简单。首先引入 ECharts 的库文件,然后创建一个容器元素用来放置图表,最后通过配置项和数据来定义折线图的样式和数据源。你可以在 ECharts 官网上找到详细的文档和示例代码来学习如何使用 ECharts 创作折线图。 4. 折线图的主要配置项: - xAxis:横轴配置项,用于定义横轴的类型、刻度等。 - yAxis:纵轴配置项,用于定义纵轴的类型、刻度等。 - series:系列配置项,用于定义折线图的数据和样式。 - tooltip:提示框配置项,用于显示鼠标悬停在折线上时的数据信息。 - legend:图例配置项,用于标识折线图中不同系列的含义。 5. 折线图的样式设置:ECharts 支持灵活的样式定制,可以通过配置项来调整折线图的颜色、线型、标记点形状等。你可以根据自己的需求来选择合适的样式,使折线图更加美观与易读。 总结:ECharts 提供了丰富而强大的功能,能够轻松地创建出各种类型的图表,包括折线图。通过使用 ECharts,你可以展示数据的趋势和变化规律,帮助用户更好地理解数据并作出决策。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值