<!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. bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级【分层图+spfa】

    至死不用dijskstra系列2333,洛谷上T了一个点,开了O2才过 基本想法是建立分层图,就是建k+1层原图,然后相邻两层之间把原图的边在上一层的起点与下一层的终点连起来,边权为0,表示免了这条边 ...

  2. （数论）51NOD 1136 欧拉函数

    对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler's totient function.φ函数.欧拉商数等.例如:φ(8) = 4(Phi( ...

  3. hdu6195 cable cable cable

    cable cable cable Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. 题解报告：poj 1094 Sorting It All Out（拓扑排序）

    Description An ascending sorted sequence of distinct values is one in which some form of a less-than ...

  5. 10046 trace and sql

    1.   SQLT 下载 从metalink上下载SQLT工具,参考文档 (以下大部分(SQL可以在sqlt\utl 目录下找到)) 1.1 SQLT 安装 SQLT安装在自己的schema SQLT ...

  6. 转发：吐血总结，彻底明白 python3 编码原理

    吐血总结,彻底明白 python3 编码原理 写的不错,转发学习一下,侵删.. 原文地址https://zhuanlan.zhihu.com/p/40834093 防止原文看不到了 这里粘贴复制一下: ...

  7. Java虚拟机内存详解

    概述 Java虚拟机会自动管理内存,不容易出现内存泄漏和内存溢出问题.Java虚拟机会在执行过程中将管理的内存分为若干个不同的数据区域. 运行时数据区域 在jdk1.8之前的版本与1.8版本略有不同, ...

  8. 北工大2017校赛 1101:要打车的FanZzz

    题目链接: http://bjutacm.openjudge.cn/lianxi/1101/ 思路: 二分 + 二分图最大匹配. 开始的时候我想直接用最小费用流模型,后来发现这样是错误的.因为这道题实 ...

  9. 仿ofo单车做一个轮播效果

    github地址 首先我是利用swiper.js做的,因为这个很强大,哈哈~~,上代码 html很简单 <body> <div class="swiper-containe ...

  10. npm install的时候报错 npm err code 1

    在学习vue的时候,npm install的时候报错  npm err code 1,当时很郁闷,是‘vue init webpack my-project’命令新建的模版项目 ,怎么会报错,第一次遇 ...