<!DOCTYPE html>
 <head>
     <meta charset="utf-8">
     <title>ECharts</title>
 </head>
 <body>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="height:400px"></div>
     <!-- ECharts单文件引入 -->
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
     <script type="text/javascript">
         // 路径配置
         require.config({
             paths: {
                 echarts: 'http://echarts.baidu.com/build/dist'
             }
         });

         // 使用
         require(
             [
                 'echarts',
                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
             ],
             function (ec) {
                 // 基于准备好的dom，初始化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);
             }
         );
     </script>
 </body>

二、第一个ECharts图表的更多相关文章

  1. 【MVVMLight小记】二.开发一个简单图表生成程序附源码

    上一篇文章介绍了怎样快速搭建一个基于MVVMLight的程序http://www.cnblogs.com/whosedream/p/mvvmlight1.html算是简单入门了下,今天我们来做一个稍许 ...

  2. Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...

  3. echarts图表标签（axisLabel）折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  4. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  5. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

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

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

  8. ECharts图表的小工具

    本文介绍一个echarts工具类EChart.js,用来制作统计图表,基于echarts3. 一.工具类特性如下: 包含柱状图.折线图和饼图,可以实现这三类统计图之间的切换: 支持标题和副标题: 支持 ...

  9. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...

随机推荐

  1. 记录利用CSS完美解决前端图片变形问题

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/ ...

  2. 慕课网JavaScript函数1-20 作业：函数的基础封装

    1-20 作业 小伙伴们,掌握了JavaScript的语法.流程控制语句以及函数,接下来让我们运用所学知识完成如gif图所示的效果——计算自己出生那天是该年当中的第几天. gif效果图如下: 任务描述 ...

  3. goalng——time包学习

    1.星期:type Weekday int const ( Sunday Weekday = iota Monday Tuesday Wednesday Thursday Friday Saturda ...

  4. Agar.io 简单但是有趣的网页游戏

    攻略,进阶 上榜第一次 (有点水,九百多分)  上榜第二次 (完成四杀,逆袭上榜) 上榜第三次 (忘写名字,自己补上) 上榜第四次 (人生巅峰!) 上榜第五次 (踩了狗屎运,上榜这么容易了?收了一个小 ...

  5. ACM_Appleman and Card Game（简单贪心）

    Appleman and Card Game Time Limit: 2000/1000ms (Java/Others) Problem Description: Appleman has n car ...

  6. unix_12c_db_init

    sample 1: add a new cdb 1.for the new db  Aprod please apply two new direcotry in Cdb3/Cdb4/Aprod  5 ...

  7. [转]MVC之 自定义过滤器(Filter)

    本文转自:http://www.cnblogs.com/kissdodog/archive/2013/01/21/2869298.html 一.自定义Filter 自定义Filter需要继承Actio ...

  8. [转]TFS下的源代码控制

    本文转自:http://www.cnblogs.com/ajiefj/archive/2010/04/23/1718450.html 以下主要描述了: TFS源代码控制系统的基本场景 如何把一个项目添 ...

  9. SQL优化器简介

    文章导读: 什么是RBO? 什么是CBO? 我们在工作中经常会听到这样的声音:"SQL查询慢?你给数据库加个索引啊".虽然加索引并不一定能解决问题,但是这初步的体现了SQL优化的思 ...

  10. CF540B School Marks

    思路: 贪心. 实现: #include <iostream> #include <cstdio> #include <vector> #include <a ...