Echart图表入门
1、Echart是什么?
Enterprise Charts的缩写,商业级数据图表,一个纯Javascript的图表库。更多的内容可以参考网上的资料
2、使用步骤
a、下载开发包
官网地址:http://echarts.baidu.com/
所需文件:\echarts-2.2.7\build\dist
b、html页面引入需要的js文件并准备放图表的div(一定要设置大小)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>The Chart</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/dist/echarts.js"></script> //这个js用来绘制图表
<script type="text/javascript" src="../js/chart.js"></script> //引入Echart开发包
</head>
<body>
<div id="main" style="height: 400px;width: 400px"> //这个div用来放图表 </div>
</body>
</html>
c、JavaScript绘制图表
echart.js
$(function(){ //配置Echart路径
require.config({
paths: {
echarts:'../js/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom(即html页面中的div),初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
})
d、效果图
Echart图表入门的更多相关文章
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- echart 图表 在.net中生成图片的方法
经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...
- R图表入门
R图表入门 R语言最强的功能就是统计和作图了,在学习了基本语法之后,博主马上体验了一下R的图表功能 条形图 例1 H = c(7,12,28,3,41) M = c("Mar",& ...
- v-if和updated钩子结合使用 渲染echart图表
项目需求是这样的,用户可以自定选择echart 曲线图 是横向还是竖向显示.我的做法是 写了一个横向的echart图表,也写了一个竖向的echart图表,然后两者共用存在store里的图表数据,就能实 ...
- 在同一页面中显示多个echart图表
整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- vuejs中使用echart图表
首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...
- 关于echart 图表自适应问题的解决办法
<div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; &quo ...
随机推荐
- 一次失败的Selenium chromedriver切换
背景 Selenium webdriver一直使用Firefox作为浏览器来跑webtest, 但是最近发现ff有时会报超时的错误,于是想到使用chromedriver来提升稳定性.本想只把.fire ...
- dentry与inode有什么联系和区别
我们在进程中要怎样去描述一个文件呢?我们用目录项(dentry)和索引节点(inode).它们的定义如下: struct dentry {struct inode ...
- 在不安装mysql-connector-net的情况下使用FluentData框架
最近在开发项目中使用了FluentData框架,通过使用这个框架减少了很多开发的工作量,FluentData是一个轻量级的框架操作起来的自由度很大也少了很多负责的配置.但是在开发的时候发现一个问题就是 ...
- 单元测试 – ASP.NET MVC 4 系列
在开发可测试软件的过程中,单元测试已成为确保软件质量的一个不可或缺部分.测试驱动开发(Test-Driven Development,TDD)是编写单元测试的一种方法,采用该方法的开发人 ...
- golang,liteide设置 windows7(64)
1.安转go的环境,exe安装包 2.下载liteide27.2.1 3.打开liteide开始开发,在里面添加gopath,无法读取windows里面的gopath设置,不知道什么原因,以管理员运行 ...
- cookie 和session 的区别:
1.cookie数据存放在客户的浏览器上,session数据放在服务器上.2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session.3. ...
- 在CentOS中安装中文支持
执行命令: # yum groupinstall chinese-support 修改配置文件: # vim /etc/sysconfig/i18n LANG="zh_CN.UTF-8&qu ...
- A 最熟悉的陌生人 (纪念当年就读的梅州市江南高级中学)
最熟悉的陌生人 作者:张慧桥 “枪与玫瑰” 就象瘟98有时会死机天有时会下雨枪有时会走火美国战机有时会掉下来那样,我上网聊天也只是个偶然. 都是栀子那死丫头惹的祸.让每天都觉得是情人节的我那天我自己都 ...
- 关于redis的主从复制
redis主从复制需要注意的一个问题 这两天我朋友在使用redis偶尔会遇见一个问题,就是所有的缓存莫名其妙会不见,找了好久都没找到,他一直以为 有人错误执行了什么命令 他跟我说的时候我估计是主从复制 ...
- 拥有的50个CSS代码片段(上)
1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...