百度echart初用总结
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初用总结的更多相关文章
- 百度echart使用心得,百度图表。
百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...
- 百度echart如何动态生成图表
百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
- 百度 Echart 的使用
百度 Echarts 的使用 一.Echarts 简介 官方网站:http://echarts.baidu.com/ 下载地址:http://echarts.baidu.com/download.ht ...
- 线形,柱形,条形数据表(百度Echart插件)
[获取资源]进入官网, http://echarts.baidu.com/导航,下载,下拉框下载,常用303k.就是这么简单,就个一个js.[项目使用]新建项目,MyChart具体使用的过程中, ...
- echart初体验 动态加载数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 百度Echart 地图
使用百度地图做一个全国地图数据分析的功能,如下图 代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...
- WPF 和 百度 eChart 交互
https://blog.csdn.net/defrt4/article/details/52689052
- react native使用百度echarts显示图表
echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...
随机推荐
- left join 右表数据不唯一的情况解决方法
https://blog.csdn.net/u010089432/article/details/52165026
- 软件项目第一次sprint评论
软件项目第一次sprint评论 组名:天线宝宝四人组 姓名:高长志 1. 组名:9-652组 项目:炸弹人游戏 对于炸弹人游戏,首先 ...
- Python学习笔记——Python Number(数字)
Python Number 类型转换 int(x, y) #将x转换为一个整数,y为进制数.如 int('11',2)将二进制数的11转成十进制数的整数,结果为3 long(x, y) #将x转换为一 ...
- Visual Studio 2017 激活密钥 [复制记录]
Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...
- python 授权
1.“包装”意思是一个已经存在的对象进行包装,不管他是数据类型还是一段代码,可以是对一个已经存在的对象增加新的,删除不要的或者修改其他已经存在的功能 2.包装 包括定义一个类,他的实例拥有标准类型的核 ...
- js Dom 编程
1. 节点及其类型: 1). 元素节点 2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的 ...
- target存放的是编译后的.class文件地方 默认情况下不会讲非class文件放入进入 如果要使用非.class文件 需要通过增加配置方式自动加入文件
target存放的是编译后的.class文件地方 默认情况下不会讲非class文件放入进入 如果要使用非.class文件 需要通过增加配置方式自动加入文件
- 概率dp总结 正在更新
借bin神一句话 概率DP主要用于求解期望.概率等题目. 转移方程有时候比较灵活. 一般求概率是正推,求期望是逆推.通过题目可以体会到这点. 先推公式 多个 -> 一个 明确dp[i]代表什么意 ...
- 向git添加和提交文件
状态 git status 可以知道有哪些文件被修改,哪些文件待提交 当前无待提交文件 分区 三个分区:工作区,缓存区,版本库 三个分区之间的联系: 工作区 >> git add > ...
- MT【27】对数方程组求范围
解答:3 评论:此类题目通性通法为换元后化归为线性规划问题.当然不等式凑配也是常见技巧,只是容易范围扩大或者缩小.