在网站开发中，可能会使用折线图，圆饼图，等等 来丰富网页对数据的展示，可以使用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的更多相关文章

  1. 针对Linux ASP.NET MVC网站中 httpHandlers配置无效的解决方案

    近期有Linux ASP.NET用户反映,在MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404(找不到网页) ...

  2. [译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  3. 关于linux asp.net MVC网站中 httpHandlers配置无效的处理方法

    近期有Jexus用户反映,在Linux ASP.NET MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404( ...

  4. 通过a标签在页面上显示视频网站中的视频

    1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  5. ASP.NET网站中获取当前虚拟目录的应用程序目录的方法（转）

    [原创]ASP.NET网站中获取当前虚拟目录的应用程序目录的方法 ASP.NET网站中获取当前虚拟目录的应用程序目录的方法1.问题描述:有时候,某个网页控件会被不同目录下文件使用,此时如果该控件中有一 ...

  6. Sticker.js – 帮助你在网站中加入贴纸效果

    Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...

  7. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  8. 将w3cplus网站中的文章页面提取并导出为pdf文档

    最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...

  9. TogetherJS – 酷！在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

随机推荐

  1. 使用WebRTC搭建前端视频聊天室——信令篇

    博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址 ...

  2. 网络安全——数据的加密与签名,RSA介绍

    一. 密码概述 发送者对明文进行加密然后生成密文,接受者再对密文解密得到明文的过程. 现在使用的所有加密算法都是公开的!但是密钥肯定不是公开的. 1 散列(哈希)函数 通常有MD5.SHA1.SHA2 ...

  3. JavaScript基本知识

    如何把 JavaScript 放入 HTML 页面 如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言 ...

  4. hdfs以及hbase动态增加和删除节点

    一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...

  5. java、easyui-combotree树形下拉选择框

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

  6. CentOS7中防火墙的一些常用配置

    # 启动 systemctl start firewalld # 查看状态 systemctl status firewalld # 停止关闭 systemctl disable firewalld ...

  7. SCNU ACM 2016新生赛初赛 解题报告

    新生初赛题目.解题思路.参考代码一览 1001. 无聊的日常 Problem Description 两位小朋友小A和小B无聊时玩了个游戏,在限定时间内说出一排数字,那边说出的数大就赢,你的工作是帮他 ...

  8. 【原】移动web资源整理

    2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...

  9. JQuery 滚动轮播

    css: *{margin: 0;padding: 0;}body{font-size: 12px;line-height: 24px;text-algin: center; }a{color: #f ...

  10. HTML5使用jplayer播放音频、视频

    首先推上神器 jPlayer:基于HTML5/Flash的音频.视频播放器 jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto ...