Echarts的简单使用
因为要做软件杯的项目,了解了一下现在比较热门的统计图库,有以下几种:
MSChart
这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定。
ichartjs
是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。
Chart.js
也是一款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程文档没有ichartjs的详细。不过感觉在对于移动的适配上感觉比ichartjs要好一点。
ECharts.js
这是我准备在这个项目中使用的图形库,这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。
下面来简单说明一下EChart.js的使用。
第一步,引用Js文件
<script type="text/javascript" src="js/echarts.js"></script>
js文件有几个版本,可以根据实际需要引用需要的版本。
第二步,准备一个放图表的容器
<div id="chartmain" style="width:600px; height: 400px;"></div>
第三步,设置参数,初始化图表
<script type="text/javascript">//指定图标的配置和数据var option = {title:{text:'ECharts 数据统计'},tooltip:{},legend:{data:['用户来源']},xAxis:{data:["Android","IOS","PC","Ohter"]},yAxis:{},series:[{name:'访问量',type:'line',data:[500,200,360,100]}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartmain'));//使用制定的配置项和数据显示图表myChart.setOption(option);</script>
这样简单的一个统计图表就出来了,官网使用的柱状图,我这边改用了折线图。
柱状图其实也很简单,只要修改一个参数就可以了。把series里的type 值修改为"bar"
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标,数据绑定上也是采用value 和name对应的形式。
var option = {title:{text:'ECharts 数据统计'}, series:[{name:'访问量',type:'pie', radius:'60%',data:[{value:500,name:'Android'},{value:200,name:'IOS'},{value:360,name:'PC'},{value:100,name:'Ohter'}]}]};
转载于:https://www.cnblogs.com/gxt-/p/9313925.html
Echarts的简单使用相关推荐
- django chart mysql,docker Django+mysql+ECharts+AngularJS简单搭建数据可视化
前面已经搭建了基于docker的Django+MySQL环境 下面用ECharts+AngularJS简单在HTML页面上展示MySQL数据库里的数据. 效果图.png {% load static ...
- Mapbox + ECharts 实现简单迁徙图
文章目录 概述 预览效果 实现代码 说明 相关链接 概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果 实现代码 & ...
- Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句
注:以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论 一,柱图显示: HTM页面: <html style="height: 100%" ...
- Echarts象形图简单示例
Echarts象形柱图(山峰图)简单应用 简单示例 代码详述 option = {title: {text: '年龄段',textStyle:{fontSize:14,color:'#444444', ...
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
- vue 使用echarts 进行简单封装统一使用
使用echarts npm install echarts --save || cnpm install echarts --save 定义wkCharts.vue <template>& ...
- Echarts 雷达简单应用
封装雷达图图表显示在首页 目标:封装一个echarts中的雷达图表显示在首页的绩效指数的位置 第一步, 安装echarts图表 ```bash $ npm i echarts ``` > ech ...
- Echarts:简单词云图实现
Echarts是一个开源的可视化图表库,支持丰富的图表,官网中还有大量示例可以选择使用.参考. 其中比较好玩.有趣的是词云,词云就是用关键词组成的一朵云,更广泛的定义是,由关键词组成的任意一种图案均称 ...
- 使用echarts实现简单的疾病知识图谱
var size = 60; var size1 = 30; var yy = 200; var yy1 = 250;var listdata = []; var links = [];var med ...
最新文章
- JavaScript基础(一) 数据类型
- Apache ServiceComb Pack 微服务分布式数据最终一致性解决方案
- 终极解决方案:Emacs+Slime+Lisp启动错误:Polling /tmp/slime.50
- js浏览器和浏览器插件检测的方法总结
- vs2017报错 popen pclose
- LiveVideoStackCon讲师热身分享 ( 三 ) —— Facebook的工具文化与多媒体QoE
- java中1%4是多少,四则运算(java) 王哲文 邹庭和
- c语言将两个文件合成一个,keil中怎么把两个c程序怎么同时同时编译生成一个hex文件...
- 如何创建多个条形图_在R中创建条形图
- 通俗理解Meanshift均值漂移算法
- 拯救我们的健康:戒烟应用大盘点
- Air202入坑指南2---LED闪烁
- 家用计算机音效部件图示,唱吧新版自定义音效设置方法(附上最佳音效设置参数图)...
- CAD对话框不见后要如何调出
- emacs go-mode 设置tab宽度
- 华为手机怎么连接电脑传输
- 笨方法学python 习题25
- Certificate、Provisioning Profile、App ID的介绍及其之间的关系
- Apollo Planning决策规划算法代码详细解析 (5):规划算法流程介绍
- Hexo个人博客NexT主题添加Local Search本地搜索
热门文章
- Cisco PT模拟实验(12) 路由器静态路由的配置
- ios开发证书,描述文件,bundle ID的关系
- RotateAnimation 实现表盘指针转动
- 面试官:我想用Nginx提升系统10倍性能,你有哪些建议?
- 从零单排学Redis【白银】
- 面试字节跳动,我被怼了……
- 我作为开发者犯过的两次愚蠢的错误
- Redis是如何写代码注释的?
- 【报错】No match for argument: mysql-community-server Error: Unable to find a match: mysql-community-s
- C语言 编写程序,求s不超过2000时n的最大值,s=1+2+3+……+n