前言

之前参加数学建模的时候需要将数据展示成图表形式，当时知道主流是MATLAB，pathon也可以，但是却不知道JS也可以绘制图表，甚至可以做出像地图、雷达图等更高级的东西。

Echart

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

通过一些简单的配置就可以做出丰富的界面。

图表容器

首先我们需要一个容器来放置我们的图表，通常有两种方式：

在HTML中定义有宽度和高度的父容器

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript"> let myChart = echarts.init(document.getElementById('main')); </script>

通过div设置宽高来限制图表，这是官网推荐的方式。

指定图表大小

<div id="main"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), null, {width: 600,height: 400}); </script>

折线图

今天主要讲解一下代码中出现的折线图。

折线图是一个典型的二维图标，具有x轴和y轴，我们首先定义x轴和y轴的数据。

let xDataArr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
let yDataArr = [3000,2800,1000,800,700,140,1300,900,1000,800,600]

这部分根据自己的需求进行定义。

xAxis:{type:'category',data:xDataArr,
},
yAxis:{type:'value',scale:true
}

接下来将xAxis和yAxis填充，scale:true表示缩放，比如数据集中在很大的位置，如果从零开始就会显得可视化很低。

series

series设置一些参数，type:'line'表示这个图是折线图，通过type可以确定这个图表是什么图。

markLine:{data:[{type:'average',name:'平均值'}]
},

markLine配置可以使图表展示平均值，并且不需要自己计算。

后记

Echart有很多有趣的东西，学习Echart既可以丰富自己的技术，也可以提高自己的兴趣。

Echart实现折线图相关推荐

Echart常用折线图
1. 渐变色折线图 <template><div :id="id" style="width: 100%; height: 100%"> ...
echars显示折点数据_Echarts 折线图一个点显示多个实时数据tooltip
在项目开发需要中.有个需求就是在折线图的每一个折点上悬浮窗要显示几条不同的数据而且是跟x轴一样每个点不一样..研究了一下..有点坑.其实很简单,正常的思路来想要想在悬浮窗显示数据一般都会有线才会 ...
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
echart自定义动画_ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
echart折线图连线不显示问题总结
echart折线图,series动态数据不能有空数据,不然,只有数据点,而连线出不来.
echart折线图 -- 每条线分别对应不同x、y轴数据
代码示例 option = {legend: {data:['曲线1', '曲线2']},tooltip : {trigger: 'axis',axisPointer: {type: 'cross', ...
常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip
一.最简单的使用方式引入官方echart.js即可 <script src="js/echarts.js"></script> 二.页面准备一个DOM容器 ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...

Echart实现折线图

前言

Echart

图表容器

折线图

series

后记

Echart实现折线图相关推荐

最新文章

热门文章