<!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。

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 绘制图表

myChart.setOption({

    title: { text: 'ECharts 入门示例' },

    tooltip: {},

    xAxis: {

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        data: [5, 20, 36, 10, 10, 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. 浅析网站建设的PHP，JAVA语言分析

    编程绝对是一件不轻松的活儿.随着电子商务在国内成功的推广,京东.苏宁等大型B2C综合网上商城的成功运营,一批批以产业分类的独立网店也如火如荼发展起来.伴随着这股热潮,网店系统等相关衍生开店平台行业也出 ...

  2. 智能家居入门DIY——【六、使用OneNet后台处理数据】

    OneNet使用起来要比lewei50复杂一些,它没有前台需要自己开发.命令下发也和之前介绍的lewei50有一些区别,这里着重介绍一下使用MQTT协议来进行通讯. 一.准备 1.Esp8266开发板 ...

  3. <只看这个就够了。。。>Android自动化测试及性能优化

    Android自动化测试及性能优化 分类: Android Java Tools2012-12-09 23:31 4300人阅读 评论(0) 收藏 举报 软件自动化测试对于程序员来说能够确保软件开发的 ...

  4. Thinkphp 查询条件 and 和 or同时使用即复合查询

            thinkphp 3.2快捷查询OR查询&分割表示AND查询讲解         快捷查询方式是一种多字段查询的简化写法,可以进一步简化查询条件的写法,在多个字段之间用|分割表 ...

  5. ES6系列_7之箭头函数和扩展

    1.默认值 在ES6中给我们增加了默认值的操作相关代码如下: function add(a,b=1){ return a+b; } console.log(add(1)); 可以看到现在只需要传递一个 ...

  6. Java常用的转义字符

    以下为常用的转义字符对照表: 字母前面加上捺斜线"\"来表示常见的那些不能显示的ASCII字符.称为转义字符.如\0,\t,\n等,就称为转义字符. 转义字符 意义 ASCII码值 ...

  7. Xcode 中设置部分文件ARC支持

    ARC是什么 ARC是iOS 5推出的新功能,全称叫 ARC(Automatic Reference Counting).简单地说,就是代码中自动加入了retain/release,原先需要手动添加的 ...

  8. vs启动项目提示Web 服务器被配置为不列出此目录的内容。

    解决方法 确认网站或应用程序配置文件中的 configuration/system.webServer/directoryBrowse@enabled 属性已设置为 true. 配置一下web.con ...

  9. [译]2D空间中使用四叉树Quadtree进行碰撞检测优化

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity2017.2.0f3 原文出处 : Quick Tip: Use Quadtrees to Detect Lik ...

  10. Vue-cli webpack模板

    Vue webpack项目开始构建模板使用,关键内容摘要 中文文档 https://loulanyijian.github.io/vue-cli-doc-Chinese/ 官方英文 http://vu ...