二、第一个ECharts图表

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts</title>
 5 </head>
 6 <body>
 7     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts单文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
11     <script type="text/javascript">
12         // 路径配置
13         require.config({
14             paths: {
15                 echarts: ‘http://echarts.baidu.com/build/dist‘
16             }
17         });
18
19         // 使用
20         require(
21             [
22                 ‘echarts‘,
23                 ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块,按需加载
24             ],
25             function (ec) {
26                 // 基于准备好的dom,初始化echarts图表
27                 var myChart = ec.init(document.getElementById(‘main‘));
28
29                 var option = {
30                     tooltip: {
31                         show: true
32                     },
33                     legend: {
34                         data:[‘销量‘]
35                     },
36                     xAxis : [
37                         {
38                             type : ‘category‘,
39                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
40                         }
41                     ],
42                     yAxis : [
43                         {
44                             type : ‘value‘
45                         }
46                     ],
47                     series : [
48                         {
49                             "name":"销量",
50                             "type":"bar",
51                             "data":[5, 20, 40, 10, 10, 20]
52                         }
53                     ]
54                 };
55
56                 // 为echarts对象加载数据
57                 myChart.setOption(option);
58             }
59         );
60     </script>
61 </body>

时间: 2024-08-25 04:55:12

二、第一个ECharts图表的相关文章

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript"></script> 二.EChar

***ECharts图表入门和最佳实践

ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图).散点图(气泡图).K线图.饼图(环形图).雷达图(填充雷达图).和弦图.力导向布局图.地图.仪 表盘.漏斗图.事件河流图

ECharts 图表设置标记的大小 symbolSize 和获取标记的值

ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 慕课网 http://www.imooc.com/learn/687 上有学习视频,可快速上手. 公司之前开发的 webapp 中有用到 ECharts 图表,可是在两个问题上一直解决

转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?

一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的.我们更深入的理解,皮肤其实就是一些样式的定义集合. 图表有很多部分组成,比如:标题.坐标轴.Series数据.Legend图例等.每一个部分我们可以为其设置style样式,形如:字体颜色.字体大小.旋转角度.背景图片.背景颜色.是否渐变等. 二.如何将

ECharts 图表工具

详细文档:https://echarts.apache.org 特性 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表. 丰富的可视化类型 ECharts 提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.

HTML在表格中添加echarts图表

在HTML的table中,只要将需要插入echarts图表的格子设定为明确的宽高(不能为百分比),并赋予一个id,就可以插入echarts图表. 如示例所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="te

ECharts-Java使用Java快速开发ECharts图表

ECharts-Java类库地址:http://git.oschina.net/free/ECharts 百度ECharts地址:http://echarts.baidu.com/ 大概在5个月前的时候,有个项目需要用到图表,百度ECharts很不错,就选择了ECharts. 我的项目是SpringMVC + Mybatis,当从数据库获取数据后,我不知道该如何处理这些数据了,是传到前台拼ECharts的Option结构还是在后台拼Option的JSON结构? 两种方式我都尝试了: 第一种在前台

ECharts图表系统 特性总览

最近在玩ECharts,感觉真心不错,在这里把官方的资料收集收集,给大家推荐一下下~ Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. 支持IE6/7/8/9+,chrome.f

转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针对上述所提出的疑问,我琢磨了一下ECharts图表组件.找到官方这样的一个适合的简单关系图:http://echarts.baidu.com/doc/example/force1.html 通过观察ECharts图表组件的简单关系图的数据结构,得出我要实现一个站点地图需要做哪些工作: 1.引入ech