<!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. AMD的规范使用

    1.解决命名冲突 2.解决繁琐的文件依赖 3. 可读性.可依赖性 参考这里 // foobar.js // 私有变量 var   test = 123: //  公有方法 function  foot ...

  2. Django day 36 支付宝支付，微信推送

    一:支付宝支付, 二:微信推送

  3. C#封装访问修饰符

    C# 封装 封装 被定义为"把一个或多个项目封闭在一个物理的或者逻辑的包中".在面向对象程序设计方法论中,封装是为了防止对实现细节的访问. 抽象和封装是面向对象程序设计的相关特性. ...

  4. C#的装箱与拆箱与基本类型

    装箱:值类型转换为对象类型, 实例: int val = 8; object obj = val;//整型数据转换为了对象类型(装箱) 拆箱:之前由值类型转换而来的对象类型再转回值类型, 实例: in ...

  5. 390 Elimination Game 淘汰游戏

    详见:https://leetcode.com/problems/elimination-game/description/ C++: 方法一: class Solution { public: in ...

  6. [转]iOS WebKit browsers and auto-zooming form controls

    问题描述:https://github.com/jquery/jquery-mobile/issues/2581 本文转自:http://www.456bereastreet.com/archive/ ...

  7. Git学习笔记(0)-错误汇总

    一.LF will be replaced by CRLF 1.发现问题 $ git add welcome.txt warning: LF will be replaced by CRLF in w ...

  8. P1160 队列安排

    题目描述 一个学校里老师要将班上N个同学排成一列,同学被编号为1-N,他采取如下的方法: 1.先将1号同学安排进队列,这时队列中只有他一个人: 2.2-N号同学依次入列,编号为i的同学入列方式为:老师 ...

  9. Maven对不同的测试环境用不同的参数进行打包

    通过mvn package -P ${env} 加载不同配置文件 1.pom.xml中的配置 filter-dev.properties jdbc.properties

  10. POJ_1062_(dijkstra)

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 48126   Accepted: 14343 Descripti ...