<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:300px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例 init：初始化
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts开始啦'
},

tooltip: {},
// 图例
legend: {
data:['销量展示']
},

xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// 轴，轴线
yAxis: {},
// 系列、连续
series: [{
name: '销量展示',
type: 'bar',
data: [10, 15, 20, 30, 40, 10]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

另一种方法：

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

  1. var echarts = require('echarts');
  3. // 基于准备好的dom，初始化echarts实例
  4. var myChart = echarts.init(document.getElementById('main'));
  5. // 绘制图表
  6. myChart.setOption({
  7.     title: { text: 'ECharts 入门示例' },
  8.     tooltip: {},
  9.     xAxis: {
  10.         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  11.     },
  12.     yAxis: {},
  13.     series: [{
  14.         name: '销量',
  15.         type: 'bar',
  16.         data: [5, 20, 36, 10, 10, 20]
  17.     }]
  18. });
  20. 按需引入：http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

Echarts.js使用的更多相关文章

  1. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  4. echarts.js（图表插件）2.0版会导致 ZeroClipboard.js（复制插件）失效，3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  5. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  6. 关于echarts.js 柱形图

    echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...

  7. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  8. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  9. ECharts JS应用：图表页面实现

    因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...

  10. echarts.js应用之map

    最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. [NOI2018]归程(可持久化并查集,Kruskal重构树)

    解法一: 1.首先想到离线做法:将边和询问从大到小排序,并查集维护连通块以及每个连通块中所有点到1号点的最短距离.$O(n\log n)$ 配合暴力等可以拿到75分. 2.很容易想到在线做法,使用可持 ...

  2. Java-Runoob-高级教程-实例-字符串：02. Java 实例 - 查找字符串最后一次出现的位置

    ylbtech-Java-Runoob-高级教程-实例-字符串:02. Java 实例 - 查找字符串最后一次出现的位置 1.返回顶部 1. Java 实例 - 查找字符串最后一次出现的位置  Jav ...

  3. mysql/oracle ip地址比较

    SELECT hub_gid FROM CPP_HUB_IPSEGMENT WHERE IpToLong(#{ip}) BETWEEN IpToLong(ip_begin) AND IpToLong( ...

  4. Java之dom4j的简单解析和生成xml的应用

    一.dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,它的性能超过sun公 ...

  5. Hive新功能 Cube, Rollup介绍

    说明:Hive之cube.rollup,还有窗口函数,在传统关系型数据(Oracle.sqlserver)中都是有的,用法都很相似. GROUPING SETS GROUPING SETS作为GROU ...

  6. 给iOS开发新手送点福利,简述UIControl事件的用法

    UIControl事件 1.UIControlEventTouchDown 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候. 2.UIControlEventTouchDownRepeat ...

  7. python socket 详细介绍

    Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它提供了服务器中心类,可以简化网络 ...

  8. unicat,multicast,broadcast区别

    单播.多播和广播单播”(Unicast).“多播”(Multicast)和“广播”(Broadcast)这三个术语都是用来描述网络节点之间通讯方式的术语.那么这些术语究竟是什么意思?区别何在? 1.单 ...

  9. 高斯白噪声（white Gaussian noise，WGN）

    本文科普一下高斯白噪声(white Gaussian noise,WGN). 百度百科上解释为“高斯白噪声,幅度分布服从高斯分布,功率谱密度服从均匀分布”,听起来有些晦涩难懂,下面结合例子通俗而详细地 ...

  10. C# 中带有中国农历的日期选择控件

    开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...