1.先下载echarts.js.我在百度下载的是 echarts-2.2.7 (from Baidu).压缩包里面的build->dist中的echarts.js或者echarts-all.js文件和build->dist->chart里面的各种图表js我才取来用。

2.引入echarts.js文件

  第一种:模块化单文件引入(推荐)

  1)最重要的第一步是引入echarts.js。

  2)主文件引入后你将获得一个AMD环境,然后就开始配置require.config

<script type="text/javascript">
require.config({
paths: {
echarts: 'js' //我的echarts.js是放在js目录下的。如果是在js另外个文件夹ech里的 js/ech 写成这样就可以了
}
});
require(
[
'echarts',          
'echarts/chart/radar'      //我的radar雷达图js是放在js/chart下面的,为什么/chart前面会是echarts我也不太清楚,我猜是表示echarts文件的同级目录吧。。。。我尝试过吧radar.js放在和echarts.js文件同级目录下,然后修改这里的路径,没报错,但是没效果
],
function (ec) {
var myChart = ec.init(document.getElementById('box')); //绑定装echart图表的盒子
var option = {
... //设置各种参数
}
myChart.setOption(option);        //为echart对象加载数据  
}
);
</script>

  3)给装图表的盒子添加宽高

  第二种:标签式单文件引入

  1)第一步引入echarts-all.js。这个文件要大一半。。。

  2)

var myChart = echarts.init(document.getElementById('box'));          //绑定装echart图表的盒子
  option = {
   ...                   //设置各种参数
  };
  myChart.setOption(option);        //为echart对象加载数据

  3)给装图表的盒子添加宽高

  还有个模块化包引入。http://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts1  自己看文档吧。

  option配置项里的参数,在文档->配置项查找工具里面可以搜索各个配置的信息

  

  这里有个http://ecomfe.github.io/echarts-builder-web/在线构建echarts的,但是只适用于echarts2.选择所需图表,然后在线打包成js文件,然后就可以直接用第二种方式引入并使用了。

百度echart初用总结的更多相关文章

  1. 百度echart使用心得,百度图表。

    百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...

  2. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  3. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

  4. 百度 Echart 的使用

    百度 Echarts 的使用 一.Echarts 简介 官方网站:http://echarts.baidu.com/ 下载地址:http://echarts.baidu.com/download.ht ...

  5. 线形,柱形,条形数据表(百度Echart插件)

    [获取资源]进入官网,    http://echarts.baidu.com/导航,下载,下拉框下载,常用303k.就是这么简单,就个一个js.[项目使用]新建项目,MyChart具体使用的过程中, ...

  6. echart初体验 动态加载数据

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 百度Echart 地图

    使用百度地图做一个全国地图数据分析的功能,如下图 代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...

  8. WPF 和 百度 eChart 交互

    https://blog.csdn.net/defrt4/article/details/52689052

  9. react native使用百度echarts显示图表

    echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...

随机推荐

  1. #个人博客作业Week2——关于代码规范的讨论

    <1> 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 反驳:官僚制度在一定程度下维持了社会的和谐稳定,一个没有法律.没有拥有完善的管理体制.完全崇尚 ...

  2. 团队项目 NABCD分析java音乐播放器

    NABCD分析java音乐播放器 程设计题目:java音乐播放器 一.课程设计目的 1.编程设计音乐播放软件,使之实现音乐播放的功能. 2.培养学生用程序解决实际问题的能力和兴趣. 3.加深java中 ...

  3. 第七组团队项目——专业课程资源共享平台——需求分析&原型设计

    一.项目目标.定位需求: (1)目标:在教师.学生之间建立一个综合的.全面的.快捷的.高效的免费课程和学习资源共享.交流与推荐的开放性平台,实现多维和动态的推荐与分类检索服务. (2)定位:学生与教师 ...

  4. shell脚本--文件包含

    首先介绍一下shell中包含文件的方法,在C,C++,PHP中都是用include来包含文件,Go和Java使用import来包含(导入)包,而在shell中,很简单,只需要一个点“.”,然后跟着文件 ...

  5. Export OracleDB Schema To Doc

    叶正盛先生做的mini工具. https://github.com/rgqancy/DBExportDoc 使用中遇到过两个小问题: 1.数据库的表名不能带.(我一个很初级的同事建立的数据库是demo ...

  6. HTML 5 Canvas vs. SVG

    pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...

  7. php 7.1 openssl_decrypt() 代替 mcrypt_module_open() 方法

    公司开发微信第三方平台,之前用着一直是没有问题的.后来服务器到期进行项目搬迁就怎么也接收不到微信每10分钟的ticketle. 经过调试发现php版本由原来的7.0升到了7.1(该死....为什么没人 ...

  8. React 表单受控组件

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. python对redis的常用操作 下 (无序集合,有序集合)

    无序集合: 首先介绍增加,删除和获得所有元素的方法.我将会用第二部分来讨论集合的特殊操作: In [136]: x.sadd("challenge", 1,2,3,4,5,6,7, ...

  10. 计算机cpu、寄存器、内存区别

    1.寄存器是中央处理器内的组成部份.它跟CPU有关.寄存器是有限存贮容量的高速存贮部件,它们可用来暂存指令.数据和位址.在中央处理器的控制部件中,包含的寄存器有指令寄存器(IR)和程序计数器(PC). ...