百度 Echarts 的使用

一、Echarts 简介

　　官方网站：http://echarts.baidu.com/

　　下载地址：http://echarts.baidu.com/download.html

　　使用文档：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

　　官方示例：http://echarts.baidu.com/examples.html

二、Echarts 在 jsp 中的使用（柱状图）

　　1、引入 echarts.js 文件

　　2、jsp 页面代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <script type="text/javascript"

     src="${pageContext.request.contextPath}/js/echarts.js"></script>

 <title>柱状图</title>

 <style type="text/css">

 /* 设置 div 居中 */

 div {

     margin: 0 auto;

 }

 marquee {

     color: red;

     font-size: 30px;

 }

 </style>

 </head>

 <body>

     <marquee>柱状图</marquee>

     <div id="chart" style="width: 500px; height: 400px"></div>

 </body>

 <script type="text/javascript">

     /* 获取 echart 要防止的 div */

     var dom = document.getElementById('chart');

     /* 初始化echarts实例 */

     var myChart = echarts.init(dom);

     /* x 轴的数据 */

     var xAxisData = [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ];

     /* y 轴的数据 */

     var yAxisData = [ 10, 52, 200, 334, 390, 330, 220 ];

     // 指定图表的配置项和数据

     var option = {

         title : {

             text : '柱状图',

             left : 'center'

         },

         toolbox : {

             feature : {

                 /* 数据试图 */

                 dataView : {

                     readOnly : false,

                 },

                 /* 还原图表*/

                 restore : {},

                 /* 保存为图片 */

                 saveAsImage : {}

             }

         },

         color : [ '#3398DB' ],

         tooltip : {

             trigger : 'axis',

             axisPointer : { // 坐标轴指示器，坐标轴触发有效

                 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

             }

         },

         grid : {

             left : '3%',//条形图左边的预留

             right : '10%',//条形图右边的预留

             bottom : '10%',//条形图底部的预留

             containLabel : true

         },

         xAxis : [ {

             type : 'category',

             name:"星期",

             data : xAxisData,//给 x 坐标赋值

             axisTick : {

                 alignWithLabel : true

             }

         } ],

         yAxis : [ {

             name:"数值",

             type : 'value'

         } ],

         series : [ {

             name : '数值',

             type : 'bar',

             barWidth : '50%',//设置条的宽度，如果为 100% 就是条形图

             data : yAxisData

         //给 y 坐标赋值

         } ]

     };

     // 使用刚指定的配置项和数据显示图表。

     if (option && typeof option === "object") {

         myChart.setOption(option, true);

     }

 </script>

 </html>

　　3、效果图

百度 Echart 的使用的更多相关文章

  1. 百度echart使用心得，百度图表。

    百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...

  2. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  3. 百度echart初用总结

    1.先下载echarts.js.我在百度下载的是 echarts-2.2.7 (from Baidu).压缩包里面的build->dist中的echarts.js或者echarts-all.js ...

  4. 线形，柱形，条形数据表（百度Echart插件）

    [获取资源]进入官网,    http://echarts.baidu.com/导航,下载,下拉框下载,常用303k.就是这么简单,就个一个js.[项目使用]新建项目,MyChart具体使用的过程中, ...

  5. 百度Echart 地图

    使用百度地图做一个全国地图数据分析的功能,如下图 代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...

  6. WPF 和 百度 eChart 交互

    https://blog.csdn.net/defrt4/article/details/52689052

  7. react native使用百度echarts显示图表

    echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...

  8. 那些让IE6-8羞愧的替补型js

    1,html5shiv 这个js特别简单,可以让IE8识别一些新的标签,常用的比如 header footor section,就能使用更好的语义的标签了. 引入方式: <!--[if lt I ...

  9. 数据可视化-EChart2.0.0使用中遇到的2个问题

    之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可.然后现在开发的系统需要交付给客户使用.所以现在图表控件不能直接使用FusionChart和HighChart,通 ...

随机推荐

  1. unity常用小知识点

    感觉自己抑郁变得更严重了,超级敏感,经常想崩溃大哭,睡眠超差,实在不想药物治疗,多看看书,多约约朋友,多出去走走. 来几句鸡汤吧,人一定要活得明白一点,任何关系都不要不清不楚,说不定最后受伤的就是自个 ...

  2. JVM总结（一）：概述--JVM对象探秘

    这一节我们来讨论一下JVM对象建立过程. JVM对象探秘 对象的建立 对象的内存布局 对象的访问定位 JVM对象探秘 对象的建立 对象的建立过程   图一:对象建立过程 1.类加载检查. 当JVM检测 ...

  3. 【跟我学apache-commons】【四】commons-io的使用

    commons-io是一款处理io流的工具,封装了很多处理io流和文件的方法,可以大大简化我们处理io流和操作文件的代码.从common-io的官方使用文档可以看出,它主要分为工具类.尾端类.行迭代器 ...

  4. Kafka 0.8 Consumer设计解析

    摘要 本文主要介绍了Kafka High Level Consumer,Consumer Group,Consumer Rebalance,Low Level Consumer实现的语义,以及适用场景 ...

  5. 快速了解yuv4:4:4 yuv4:2:2 yuv 4:1:1 yuv 4:2:0四种YUV格式区别

    四种YUV格式区别如下: 1.YUV  4:4:4抽样方式: Y: Y0 Y1 Y2 Y3 U: U0 U1 U2 U3 V: V0 V1 V2 V3 2.YUV   4:2:2抽样方式: Y   : ...

  6. 设计模式之Mixin模式

    介绍 mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能.在面向对象的语言中,我们会通过接口继承的方式来实现功能的复用.但是在javascript中,我们没办法通过接口继 ...

  7. 20155203 2016-2017-2 《Java程序设计》第7周学习总结

    20155203 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 1.Lambda表达式.(使用interface函数接口) 2.Lambda的方法参考Met ...

  8. Python3之外部文件调用Django程序操作model等文件实现

    import os import sys import django sys.path.append(r'C:\Users\Administrator\PycharmProjects\your pro ...

  9. vb 中recordset提示对象关闭时不允许操作

    vb中执行查询后,一般要判断是否为空,只要执行的查询执行了select,都可以用rs.eof 或者 rs.recordcount来判断, 但是,如果执行的sql中加了逻辑判断,导致没有执行任何sele ...

  10. 关于markdown文件插入图片遇到的小问题和解决办法

    今天用md文件时候发现需要插入图片,以前没做过,所以写下来分享下. 1.先在自己的github上建一个仓库,里面新建个img文件夹存放图片,怎么建仓库可以上网找资料,这里就不详细说明了.建好的仓库如下 ...