echarts图表的封装

时间:2022-09-07 11:40:12

其实echarts官网有个快速上手的教程,一般人看一遍也知道是怎么回事,先给个传送门吧--五分钟上手

引入方式多种多样就自己去官网看了--这里简单介绍echarts怎么用,下方的封装函数比较重要

1.引入echarts.js文件

<script src="echarts.min.js"></script>

2.定义一个DOM容器,设置宽高

<div id="main" style="width: 600px;height:400px;"></div>
3.通过 echarts.init进行绑定DOM初始化--从这里开始下面的步骤都是在立即执行函数中进行(function(){ })()
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图表的封装的更多相关文章

  1. ECharts图表——封装通用配置

    前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...

  2. 对echarts的简单封装

    看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的封装:http://blog.csdn.net/x ...

  3. 基于HTML5的WebGL实现json和echarts图表展现在同一个界面

    突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

  4. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  5. angular2项目关于Echarts图表的处理

    在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...

  6. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  7. Echarts 的 Java 封装类库 转自 https&colon;&sol;&sol;my&period;oschina&period;net&sol;flags&sol;blog&sol;316920

    转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...

  8. ECharts图表插件&lpar;4&period;x版本&rpar;使用(一、关系图force节点显示为自定义图像&sol;图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  9. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...

随机推荐

  1. DSY1531&ast;Bank notes

    Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...

  2. org&period;hibernate&period;AssertionFailure&colon;collection&lbrack;&period;&period;&period;&period;&period;&period;&rsqb; was not processed by flush&lpar;&rpar;

    八月 12, 2016 11:00:49 上午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() f ...

  3. 使用Xcode6和IOS8SDK以后遇到的问题

    定位.苹果在IOS8里面修改了定位授权协议,也就意味着你原来的app在ios8上很可能无法定位.目前最好的办法就是在app启动的时候调用IOS8的定位授权API来获取用户的授权,这样就不要在其他地方做 ...

  4. Java 默认&sol;缺省 server 还是 client 模式

    不多说,复制官方文档,适用于 Java 5 6 7 Architecture OS Default client VM if server-class, server VM; otherwise, c ...

  5. python 映射列表 学习

    列表映射是个非常有用的方法,通过对列表的每个元素应用一个函数来转换数据,可以使用一种策略或者方法来遍历计算每个元素. 例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  6. SQL SERVER 2012疑难问题解决方法

    问题一: 问题描述 SQL SERVER 2012 尝试读取或写入受保护的内存.这通常指示其他内存已损坏. (System.Data) 解决办法 管理员身份运行 cmd ->  输入 netsh ...

  7. QTcpSocket通信编程时阻塞与非阻塞的问题

    目标,qt程序作为客户端,windows下winsock作为服务器端,实现两端通信. 开始时写了一个小函数测试: [cpp] view plaincopy QTcpSocket tmpSock;  t ...

  8. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  9. Android开源--MenuDrawer

    开放的源地址:https://github.com/SimonVT/android-menudrawer 简单介绍:menudrawer是跟sliderMenu差点儿相同的一种框架,常被应用做设置界面 ...

  10. SQLServer类型与Java类型转换问题解决

    ResultSet 接口提供用于从当前行获取列值的获取 方法(getBoolean.getLong 等).可以使用列的索引编号或列的名称获取值.一般情况下,使用列索引较为高效.列从 1 开始编号.为了 ...