<!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. 用C#读取txt文件的方法(转)

    .使用FileStream读写文件 文件头: using System; using System.Collections.Generic; using System.Text; using Syst ...

  2. HTML5牛刀小试

    第一周的HTML5苦逼之路,就这么简单,充实,忙碌的开始了,丝毫不敢有一丢丢懈怠,压力是有的,但更多的是对自己的信心,更是对自己的踏上苦逼之路的意志的肯定. 简单回顾了下这周所学内容.从认识HTML基 ...

  3. bzoj 3498: PA2009 Cakes【瞎搞】

    参考:https://www.cnblogs.com/spfa/p/7495438.html 为什么邻接表会TTTTTTTLE啊...只能用vector? 把点按照点权从大到小排序,把无向边变成排名靠 ...

  4. lodop打印图片

    LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); //LODOP. ...

  5. Hadoop伪分布式模式搭建

    title: Hadoop伪分布式模式搭建 Quitters never win and winners never quit. 运行环境: Ubuntu18.10-server版镜像:ubuntu- ...

  6. Manacher BestCoder Round #49 ($) 1002 Three Palindromes

    题目传送门 /* Manacher:该算法能求最长回文串,思路时依据回文半径p数组找到第一个和第三个会文串,然后暴力枚举判断是否存在中间的回文串 另外,在原字符串没啥用时可以直接覆盖,省去一个数组空间 ...

  7. Android 性能优化（12）网络优化（ 8）Monitoring the Battery Level and Charging State

    Monitoring the Battery Level and Charging State PreviousNext This lesson teaches you to Determine th ...

  8. 236 Lowest Common Ancestor of a Binary Tree 二叉树的最近公共祖先

    给定一棵二叉树, 找到该树中两个指定节点的最近公共祖先. 详见:https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tre ...

  9. github与git常用的一些基本配置与命令

    首次Git设置:ssh-keygen -t ras -C "email@xxx" 生成SSH (共钥)将生成的SSH key复制到文本框中即可(title默认为邮箱名) 你的身份( ...

  10. 【转】WITH AS 用法

    转载自:http://blog.csdn.net/shaochao14/article/details/6223052 一．WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery ...