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图表入门的更多相关文章

  1. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  2. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  3. echart 图表 在.net中生成图片的方法

    经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...

  4. R图表入门

    R图表入门 R语言最强的功能就是统计和作图了,在学习了基本语法之后,博主马上体验了一下R的图表功能 条形图 例1 H = c(7,12,28,3,41) M = c("Mar",& ...

  5. v-if和updated钩子结合使用 渲染echart图表

    项目需求是这样的,用户可以自定选择echart 曲线图 是横向还是竖向显示.我的做法是 写了一个横向的echart图表,也写了一个竖向的echart图表,然后两者共用存在store里的图表数据,就能实 ...

  6. 在同一页面中显示多个echart图表

    整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...

  7. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  8. vuejs中使用echart图表

    首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...

  9. 关于echart 图表自适应问题的解决办法

    <div id="divEnergy" style="width: 100%; height: 300px; border: 5px solid red; &quo ...

随机推荐

  1. [BCB] C++ BUILDER 绘图 随机生成图形

    由于老师要求要实现一个填充算法,而每次填充都需要一个源图形[不规则],用mspaint自己画太麻烦,于是打算自己动手随机生成. 这里用的是 Polygen()函数,但是注意首尾相接,另外,为了保证规则 ...

  2. 关于Cookie的 工具类

    import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.net.URLEncoder; ...

  3. Linear Algebra lecture9 note

    Linear independence Spanning a space Basis and dimension 以上概念都是针对a bunch of vectors, 不是矩阵里的概念   Supp ...

  4. iOS_仿QQ表情键盘

    当UITextFiled和UITextView这种文本输入类控件成为第一响应者时,弹出的键盘由他们的一个UIView类的inputView属性来控制,当inputView为nil时会弹出系统的键盘,想 ...

  5. kickstart+ftp+tftp+dhcp+PXE

    ##########yum less install.log #看安装log yum install system-config-kickstart* -y yum install tftp* -y ...

  6. [课程设计]Scrum 1.7 多鱼点餐系统开发进度

    [课程设计]Scrum 1.7 多鱼点餐系统开发进度(点餐菜式内容添加及美化) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题 ...

  7. Android单元测试实践

    为什么要写单元测试 首先要介绍为什么蘑菇街支付金融这边会采用单元测试的实践.说起来比较巧,刚开始的时候,只是我一个人会写单元测试.后来老板们知道了,觉得这是件 很有价值的事情,于是就叫我负责我们组的单 ...

  8. linux yum命令详解-转

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  9. UIAlertView和UIActivityIndicatorView的使用

    UIAlertView用来显示一个对话框,可以设置对话框的标题.文案.按钮的个数和文案,也可以通过实现delegate来监听按钮的的点击操作. 使用UIAlertView时需要注意: self.ale ...

  10. MyEclipse、Eclipse复制web项目

    假设现在已经有一个Java Web项目 ProjectA,现在想做另外一个项目ProjectB,它里面绝大部分功能和结构都可以复用ProjectA中的: 我们就可以通过复制项目的方法来做,具体步骤如下 ...