<!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. Tomcat的jvm配置

    Tomcat本身不能直接在计算机上运行,需要依赖于操作系统和一个JAVA虚拟机.Tomcat的内存溢出本质就是JVM内存溢出,JAVA程序启动时JVM会分配一个初始内存和最大内存给程序.当程序需要的内 ...

  2. [App Store Connect帮助]五、管理构建版本（3）在您提交以供审核前选择构建版本

    在提交 App 至“App 审核”前,请(从您为该版本上传的所有构建版本中)选择您想要提交的版本.一个 App Store 版本仅可关联一个构建版本.但是,在提交该版本至“App 审核”之前,您可以任 ...

  3. Django day 34 过滤课程，登录，redis，python操作redis

    一:过滤课程, 二:登录 三:redis, 四:python操作redis

  4. （斯特林公式）51NOD 1058 N的阶乘的长度

    输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3.   Input 输入N(1 <= N <= 10^6) Output 输出N的阶乘的长度 Input示例 6 Out ...

  5. [Qt及Qt Quick开发实战精解] 第1章 多文档编辑器

      这一章的例子是对<Qt Creator快速人门>基础应用篇各章节知识的综合应用, 也是一个规范的实例程序.之所以说其规范,是因为在这个程序中,我们对菜单什么时候可用/什么时候不可用.关 ...

  6. js实现浮动框跟随页面滚动，最后停留在原来位置

    左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...

  7. 网页内容爬取：如何提取正文内容 BEAUTIFULSOUP的输出

    创建一个新网站,一开始没有内容,通常需要抓取其他人的网页内容,一般的操作步骤如下: 根据url下载网页内容,针对每个网页的html结构特征,利用正则表达式,或者其他的方式,做文本解析,提取出想要的正文 ...

  8. Pro ASP.Net Core MVC 6th 第四章

    第四章 C# 关键特征 在本章中,我描述了Web应用程序开发中使用的C#特征,这些特征尚未被广泛理解或经常引起混淆. 这不是关于C#的书,但是,我仅为每个特征提供一个简单的例子,以便您可以按照本书其余 ...

  9. AI：IPPR的数学表示-CNN稀疏结构进化（Mobile、xception、Shuffle、SE、Dilated、Deformable）

    接上一篇:AI:IPPR的数学表示-CNN基础结构进化(Alex.ZF.Inception.Res.InceptionRes). 抄自于各个博客,有大量修改,如有疑问,请移步各个原文.....  前言 ...

  10. js删除局部变量

    alert('value:'+str+'\ttype:'+typeof(str)) //声明变量前,引用 var str="dd"; alert('value:'+str+'\tt ...