前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >百度开源e-chart初探

百度开源e-chart初探

作者头像
云海谷天
发布2022-08-09 14:33:45
1.3K0
发布2022-08-09 14:33:45
举报
文章被收录于专栏:技术一点点成长

前言:

  近年来,在数据服务的公司中,数据可视化越来越重要。随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架。而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~


echart自我介绍:

“基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。”

1资源下载

下载路径(http://echarts.baidu.com/build/echarts-2.2.7.zip)

2文件目录说明

echart-2.2.7

   -build js总文件夹(diss,src)

   -doc 使用说明文档

   -extension 地图相关拓展

   -src  js源码细节

   -test 测试

3 使用说明

解压后,用浏览器打开文件'./doc/start.html'

4 实战

step1:新建 echart-test.html 文件,为ECharts准备一个具备大小(宽高)的Dom。

直接调用在线的js,无需本地加载echart相关资源文件

step2:新建<script>标签引入模块化单文件echarts.js

step3:新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)

step4:编辑html,修改数值并保存,可以观察到图的实时变化(支持下载保存)

echart-test.html的完整html代码

代码语言:javascript
复制
 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>

结语:

     以上实战只是10分钟的echart小demo,后续还将通过动态加载数据对接后台数据。尽请关注!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-02-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档