echarts生成图表

1. echarts是一个优秀的js绘图框架

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

千万数据的前端展现

通过增量渲染技术（4.0+），配合各种细致的优化，ECharts
能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。
几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。
因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用
WebSocket 或者对数据分块后加载，加载多少渲染多少！
不需要漫长地等待所有数据加载完再进行绘制

官网
https://echarts.apache.org/
它是百度团队研发的，现在交给阿帕奇管理了。

2. 如何使用echats框架绘图？

导入echats的js包
github下载，dist目录

<script type="text/javascript" src="echarts.js" ></script>

cdn

https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js

具体代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>echart study 01</title><script type="text/javascript" src="echarts.js" ></script></head><body><!-- 为echarts准备一个宽高刚好的dom --><div id="app" style="width: 600px;height:400px;"></div><script>/*基于准备好的dom，初始化echarts对象*/var my_echarts = echarts.init(document.getElementById("app"));/*指定图表的配置项和数据*/var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};  /*使用刚指定的配置项和数据显示图标*/my_echarts.setOption(option);</script></body>
</html>

柱状图效果演示

数据更改

指定echarts对象前，更改了标题，增加了价格这一柱状栏

option.title.text = "嘤嘤嘤";
option.legend.data.push('价格'); // 设置项
option.series.push({"name": "价格", "type": "bar", "data": [10, 20, 30, 40, 50, 60]});
// 设置对应的数据

上面可以看出，给定json数据就能改变图表。所以这个东西
可以和ajax结合，来异步加载对应的图表。

3. 更多彩蛋

更多样式的图表，见官网实例，贴上对应的代码，更改数据。图表就有了。
https://echarts.apache.org/examples/zh/index.html

折线图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>echart study 01</title><script type="text/javascript" src="echarts.js" ></script></head><body><div id="app1" style="width: 400px;height: 400px;"></div><script>/*基于准备好的dom，初始化echarts对象*/var my_echarts = null;my_echarts = echarts.init(document.getElementById("app1"));option = {legend: {data:['val']},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: "val",data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};my_echarts.setOption(option);</script></body>
</html>

echarts生成图表相关推荐

echarts生成图表超出父容器问题解决
问题描述: 前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况. 情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况 ...
echarts生成图表的简单使用
echarts的开发总结 echarts相关js下载(echarts.min.js.echarts-gl.min.js): https://pan.baidu.com/s/1w5M8aHls9B4ti ...
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
介绍在使用echarts生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts的出现正是为了解决这个痛点.基于Vue2.0和echarts封装的v-charts图表插件,只需要 ...
Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院
谷粒学院课程详细页面功能完善一.修改课程详细接口 1.在service_order模块添加接口用于判断订单中status值是否为1,为1则为已支付 @RestController @CrossO ...
利用ECharts在线生成图表
我们可以使用ECharts获取后台数据,通过Ajax,JavaScript在线生成图表. 我们制作测试用例,就不使用自动加载,采用手动方式进行生成,让流程直观. <a href="#& ...
php mysql echarts动态生成图表
php mysql echarts动态生成图表,数据库和表格使用的java Servlet echarts 图表生成的一样数据,不知道的看我前面一篇博文:需要两个文件完成 1. 数据获取文件 week ...
【Axure教程】中继器结合echarts生成可视化图表
echarts是一个基于 JavaScript 的开源可视化图表库,里面包含很多常用且美观的统计图表.但是由于大部分产品经理不太懂代码,导致他们在画原型图的时候,不能直接使用该工具,就算会代码,使用起 ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
hcharts生成图表
借助hcharts插件,可以很方便地在模板页面中生成图表.类似插件还有echarts. 补充... 转载于:https://www.cnblogs.com/Forever77/p/11144346.h ...

echarts生成图表

目录

1. echarts是一个优秀的js绘图框架

2. 如何使用echats框架绘图？

3. 更多彩蛋

echarts生成图表相关推荐

最新文章

热门文章