canvas绘图 echarts 基本使用
同时可参考博客:http://www.uneeded.net http://www.stepday.com/topic/?804
最近项目中要做图形报表,要求使用echarts实现,图形报表有很多中实现之前也接触过,但echarts还是头一次听说,正好可以趁这个机会好好学习一下它。
之前不知道就不知道啦,现在知道了就了不得了,一下子喜欢上了echarts,今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了:1,开源软件,无私的为我们提供漂亮的图形界面;2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts;3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了;4,兼容性好,基于html5动画渲染超棒。
echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。
官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现。这样毕竟比较费时,我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示:
echarts饼状图实现步骤:
1,在简单的html中引入js文件
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- </body>
2,为图形准备容器
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- </body>
就是在html中添加一个div给定id,图表就会显示在div中。
3,模块导入js
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
- </script>
- </body>
4,添加显示数据
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
- ],
- function (ec) {
- // 基于准备好的dom,初始化echarts图表
- var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
- option = {
- title : {
- text: '某站点用户访问来源',
- subtext: '纯属虚构',
- x:'center'
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient : 'vertical',
- x : 'left',
- data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- series : [
- {
- name:'访问来源',
- type:'pie',
- radius : '55%',
- center: ['50%', '60%'],
- data:[
- {value:335, name:'直接访问'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1548, name:'搜索引擎'}
- ]
- }
- ]
- };
- // 为echarts对象加载数据
- myChart.setOption(option);
- }
- );
- </script>
- </body>
5,运行程序显示结果
以上是饼状图的实现步骤,柱状图散点图跟这个类似就是引用js时饼状图是pie,柱状图是bar,对应的option里面的数据不同,程序的架子是一样的。。
点击下载源码: 地址1,地址2
canvas绘图 echarts 基本使用相关推荐
- 解决echarts canvas绘图字体不清晰的问题
转化为svg,会更清晰 // 初始化echartthis.chart = this.$echarts.init(document.getElementById("line1"), ...
- 如何使用canvas绘图
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用can ...
- Android中Canvas绘图之Shader使用图文详解
概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- [转]基于Prototype,利用Canvas绘图实现的web流程图设计器(原型)
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线 刚才 ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Android--使用Canvas绘图
前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...
- canvas 绘制直线 并选中_javascript自学记录:canvas绘图
由于学习js是为爬虫服务,所以canvas绘图学习并不完整. 第15章 使用Canvas绘图 15.1 基本用法 HTML文件中需要有canvas元素,两标签之间的文字是浏览器不支持时显示的. A d ...
最新文章
- bzoj1669 [Usaco2006 Oct]Hungry Cows饥饿的奶牛
- 【CF582E】Boolean Function 树形DP+FWT
- v-model实现数据的双向绑定
- ORA-00911:无效字符 错误及解决
- 32 引脚_函数功能:定时器T0的中断服务子程序,使P3.7引脚输出音频方波
- 天津计算机专业排名2015,2015年南开大学计算机类专业最低分是多少?
- 9203 演练 jsp实现增删改查
- 1. UI Tests简介
- 持续交付模型中文化转型的重要意义
- Pandas系列(二)查询数据
- XML语言以及DTD的详解(方立勋javaweb)
- 代理模式实例与解析--实例一:论坛权限控制代理
- 武汉计算机管理学校,武汉这个区优质初中“多校划片”电脑派位入学,有你家娃想上的学校吗?...
- 琴岛学院java书_​师生共品书 传承优秀传统文化 琴岛学院第十三届金秋读书节开幕...
- 弘辽科技:淘宝新链接要怎么补流量?有没有提升新链接的办法?
- 大型机汇编HLASM - HOOK ISPF命令START(一)
- C语言:使用函数计算一个数的阶乘
- 回到无镜世界 ---- 自动变焦的电子眼镜
- java dozer 官网_Dozer 使用小结
- ios 输入法扩展_搜狗输入法 iOS 版开发与优化实践