其实echarts官网有个快速上手的教程,一般人看一遍也知道是怎么回事,先给个传送门吧--五分钟上手
引入方式多种多样就自己去官网看了--这里简单介绍echarts怎么用,下方的封装函数比较重要
1.引入echarts.js文件
<script src="echarts.min.js"></script>
2.定义一个DOM容器,设置宽高
<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项
var option = {
title: { text: 'ECharts 入门示例' },
tooltip: {}, legend: { data:['销量'] },
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20] }]
};
5.将其两者进行结合,把option的数据渲染到mychart内
myChart.setOption(option);
6.做好适配工作,进行缩放
window.addEventListener("resize",function(){
myChart.resize()
})
**当然你也可以给echarts封装成一个函数**
/**
* title: 图表显示设置
* obj:指定对象,必须为id
* data:图表数据
* themeStyle:图表主题
**/
function chartSet(obj, data, themeStyle) {
themeStyle = themeStyle || '';// 判断是否拥有主题,一般可以不用写,echarts方法init中第二个参数
if ($(obj).length == '0') { // jq判断是否存在这个对象
return 0;
}
that.ratio(obj); // 设置对象的宽高
var docObj = document.getElementById(obj.replace('#', ''));//拿到对象的id进行转换
var myChart = echarts.init(docObj, themeStyle);//初始化echarts图表
myChart.setOption(data, true);// 将data数据渲染到图表中
myChart.resize();// echarts的图表缩放自适应
$(window).on('resize', function () { //resize不能off否则其他地方失效
if ($(obj).is(':visible')) {
ratio(obj);
myChart.setTheme(themeStyle);
myChart.resize();
}
});
return myChart;
}
/**
* title: 定义图表宽高
* obj:指定对象
* callback:回调函数,默认为空
**/
function ratio(obj, callback) {
var $obj = $(obj);
callback = callback || null;
if ($obj.length == '0') {
return;
}
var objH, objW, HH;
objH = $obj.parent().height();// echarts需要判断父元素是否有宽高从而做出判断
objW = $obj.parent().width();
HH = objH > objW ? objW : objH; //按最小值计算
$obj.css({
"height": HH,
"width": "100%"
});
callback && callback(objH, objW);
};
对于上表的数据data,就是正常编写的option数据格式,如下--官网找了个最简单的option数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
echarts图表的封装的更多相关文章
-
ECharts图表——封装通用配置
前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...
-
对echarts的简单封装
看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的封装:http://blog.csdn.net/x ...
-
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
-
【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
-
angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
-
vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
-
Echarts 的 Java 封装类库 转自 https://my.oschina.net/flags/blog/316920
转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...
-
ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
-
echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
随机推荐
-
DSY1531*Bank notes
Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...
-
org.hibernate.AssertionFailure:collection[......] was not processed by flush()
八月 12, 2016 11:00:49 上午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() f ...
-
使用Xcode6和IOS8SDK以后遇到的问题
定位.苹果在IOS8里面修改了定位授权协议,也就意味着你原来的app在ios8上很可能无法定位.目前最好的办法就是在app启动的时候调用IOS8的定位授权API来获取用户的授权,这样就不要在其他地方做 ...
-
Java 默认/缺省 server 还是 client 模式
不多说,复制官方文档,适用于 Java 5 6 7 Architecture OS Default client VM if server-class, server VM; otherwise, c ...
-
python 映射列表 学习
列表映射是个非常有用的方法,通过对列表的每个元素应用一个函数来转换数据,可以使用一种策略或者方法来遍历计算每个元素. 例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
-
SQL SERVER 2012疑难问题解决方法
问题一: 问题描述 SQL SERVER 2012 尝试读取或写入受保护的内存.这通常指示其他内存已损坏. (System.Data) 解决办法 管理员身份运行 cmd -> 输入 netsh ...
-
QTcpSocket通信编程时阻塞与非阻塞的问题
目标,qt程序作为客户端,windows下winsock作为服务器端,实现两端通信. 开始时写了一个小函数测试: [cpp] view plaincopy QTcpSocket tmpSock; t ...
-
实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
-
Android开源--MenuDrawer
开放的源地址:https://github.com/SimonVT/android-menudrawer 简单介绍:menudrawer是跟sliderMenu差点儿相同的一种框架,常被应用做设置界面 ...
-
SQLServer类型与Java类型转换问题解决
ResultSet 接口提供用于从当前行获取列值的获取 方法(getBoolean.getLong 等).可以使用列的索引编号或列的名称获取值.一般情况下,使用列索引较为高效.列从 1 开始编号.为了 ...