网站中使用echart
在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 可以参考这个网址,快速上手
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
可以快速出来一个柱状图
这是我使用这个
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="js/echarts.simple.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="chart" style="height:400px"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
option = {
title: {
text: '积分趋势折线图'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '8%',
bottom: '1%',
containLabel: true
},
color: ['#27AACC'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五'],
axisLine:{
lineStyle: {
type : 'solid',
color : '#666'
},
}
},
yAxis: {
zlevel: 0,
type: 'value',
axisLine : {
show : false,
lineStyle:{
color:'#dfe3e3'
}
},
axisTick : {
show : false
},
boundaryGap: ['20%', '20%'],
scale : false,
min : 0,
type : 'value',
splitLine : {
lineStyle : {
type : 'dotted'
}
}
},
series: [
{
name:'积分趋势图',
type:'line',
stack: '分数',
lineStyle: {
normal: {
width: 1
}
},
data:[0,12,23,23,25]
},
]
};
chart.setOption(option);
window.onresize = chart.resize;
</script>
</body>
可以通过参数配置来修改图标的样式
option = {
title: {
text: '积分趋势折线图'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '10px',
right: '12%',
bottom: '1%',
containLabel: true
},
color: ['#27AACC'],
xAxis: {
type: 'category',
boundaryGap: false,
data: months_array,
axisLine:{
lineStyle: {
type : 'solid',
color : '#666'
},
}
},
yAxis: {
zlevel: 0,
type: 'value',
axisLine : {
show : false,
lineStyle:{
color:'#999'
}
},
axisTick : {
show : false
},
boundaryGap: ['20%', '20%'],
scale : false,
min : 0,
type : 'value',
splitLine : {
lineStyle : {
type : 'dotted'
}
}
},
series: [
{
name:'积分趋势图',
type:'line',
stack: '分数',
lineStyle: {
normal: {
width: 1
}
},
data:sum_point
},
]
};
具体可以参考http://echarts.baidu.com/option.html来修改成咱们设计的图表。
网站中使用echart的更多相关文章
- 针对Linux ASP.NET MVC网站中 httpHandlers配置无效的解决方案
近期有Linux ASP.NET用户反映,在MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404(找不到网页) ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- 关于linux asp.net MVC网站中 httpHandlers配置无效的处理方法
近期有Jexus用户反映,在Linux ASP.NET MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404( ...
- 通过a标签在页面上显示视频网站中的视频
1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- ASP.NET网站中获取当前虚拟目录的应用程序目录的方法(转)
[原创]ASP.NET网站中获取当前虚拟目录的应用程序目录的方法 ASP.NET网站中获取当前虚拟目录的应用程序目录的方法1.问题描述:有时候,某个网页控件会被不同目录下文件使用,此时如果该控件中有一 ...
- Sticker.js – 帮助你在网站中加入贴纸效果
Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
- 将w3cplus网站中的文章页面提取并导出为pdf文档
最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...
- TogetherJS – 酷!在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- C# 模板列在绑定的时候取文本值
查了很多资料,都说模板列无法取文本值, 需要使用FindControl, 对于列数很多的情况就要命了, 使用以下方式, 可以循环列的索引,获取到文本值 前台 <asp:TemplateField ...
- Jsoup问题---获取http协议请求失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.
Jsoup问题---获取http协议请求失败 1.问题:用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不 ...
- HAProxy介绍
简单说明 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需 ...
- 国内优秀的Android资源
因为一些大家都知道的原因,Android很多官方出品的优秀开发资源在国内无法访问. 国内的同行们对此也做出了很多努力,有很多朋友通过各种手段把很多优秀的资源搬运到了国内,为国内android开发者提供 ...
- NodeJS使用formidable实现文件上传
最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实 ...
- SQL操作符
Oracle中的操作符算术操作符:无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异. Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle ...
- mongodb集群安装及到现在遇到的一些问题
集群搭建 只有3台服务器,开始搭建mongodb集群里主要参照的是http://www.lanceyan.com/tech/arch/mongodb_shard1.html,端口的设置也是mongos ...
- [LeetCode] K-th Smallest in Lexicographical Order 字典顺序的第K小数字
Given integers n and k, find the lexicographically k-th smallest integer in the range from 1 to n. N ...
- [LeetCode] Compare Version Numbers 版本比较
Compare two version numbers version1 and version1.If version1 > version2 return 1, if version1 &l ...
- xwalk_core_library-15.44.384 .13.aar 百度云分享
xwalk_core_library-15.44.384.13.aar 这玩意下载很慢 特意放到百度,需要的可以通过百度下载 http://pan.baidu.com/s/1nt0Cmbn 下完后放到 ...