echarts 视图自适应问题
最近在项目中用到了echarts,在处理视图自适应问题上记录一下;同时比较一下和highcharts的区别;
在echarts中有一个resize的函数,可以直接在监听窗口变化时重新渲染即可;
//在原生代码中
var myCharts = echarts.init(document.getElementById('#myCharts'))
window.onresize = function (){
myCharts.resize()
}
如果是在vue项目中用到(我的项目是vue框架)
//在vue中,将init的函数封装在methods对象中,然后在该方法中调用resize函数
methods:{
initChart(){
this.chart = echarts.init(document.getElementById('chart'))
let options = {}//省略
this.chart.setOption(options) //resize的函数可在这里调用
window.onresize = function (){
this.chart.resize()
}
}
}
在HighCharts中,有一个专门的函数可以直接设置。在highCharts的官方文档中,有一个函数reflow()重新适应函数
reflow()让图表自适应容器,默认情况下,图表会自动响应window.resize时间来自适应图表容器(默认chart.reflow的配置是true),在图表中没办法响应事件时,则需要手动调用该函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> </head>
<body> <div id="pieContainer"></div> <script src="js/highCharts/highcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="js/highCharts/exporting.js" type="text/javascript" charset="utf-8"></script>
<script src="js/highCharts/highcharts-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var chart = Highcharts.chart('pieContainer', {
chart: {
spacing: [40, 0, 40, 0]
},
title: {
floating: true,
text: ' '
},
subtitle:{
text:'节点总数20个',
align:'center',
verticalAlign:'middle',
y:-10,
style:{
fontSize:14,
color:'#212121'
} },
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
point: {
events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题
// 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({
text: e.target.name + '\t' + e.target.y + ' %'
});
}
//,
// click: function(e) { // 同样的可以在点击事件里处理
// chart.setTitle({
// text: e.point.name+ '\t'+ e.point.y + ' %'
// });
// }
}
},
events:{
mouseOut:function(e){
console.log(e)
$('tspan').html('节点总数20个')
}
}
}
},
series: [{
type: 'pie',
innerSize: '80%',
name: '市场份额',
data: [{
name: 'Firefox',
y: 45.0,
url: 'http://bbs.hcharts.cn'
},
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
url: 'http://www.hcharts.cn'
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
}, function(c) { // 图表初始化完毕后的会掉函数
// 环形图圆心
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
// 动态设置标题位置
c.setTitle({
y: centerY + titleHeight / 2
});
});
</script>
</body>
</html>
echarts 视图自适应问题的更多相关文章
- Angular echarts图表自适应屏幕指令
关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...
- vue echarts 大小自适应
窗口大小时候 ,echarts图自适应 在创建图表的方法中直接,用resize方法 let myChart=this.$refs.myChart; let mainChart = echarts.in ...
- Echarts图标自适应问题(已解决)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- 多个echarts图自适应屏幕大小
当一个echarts图时,可以这样做 //下面my_charts是html中echarts的ID var myChart= echarts.init(document.getElementById(& ...
- echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- echarts 图表自适应外部盒子大小
项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...
- 一起来玩echarts系列(二)------echarts图表自适应问题
为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...
- swift3 循环滚动视图 自适应横竖屏 reload数据源
一句话创建banner图,可时时刷新 用到了 SnapKit.SDWebImage两个第三方库 实现步骤------------------------------------------------ ...
随机推荐
- hdu3518 Boring counting(后缀数组)
Boring counting 题目传送门 解题思路 后缀数组.枚举每种长度,对于每个字符串,记录其最大起始位置和最小起始位置,比较是否重合. 代码如下 #include <bits/stdc+ ...
- [Codeforces 729F] Financiers Game
题意: 两个人分别从长度为n的数列的两端开始取数,如果前一 个人取了k个数,后一个人必须取k或k+1个. 第一个人最 开始可以取1个或2个,不能操作时结束. 两个人都希望自 己取到的数字之和尽量大,并 ...
- urllib爬取实例
#汉字转码.多个参数拼接 from urllib import request base_url = "http://www.baidu.com/s?" content = inp ...
- [LeetCode] 196.删除重复的电子邮箱
编写一个 SQL 查询,来删除 Person 表中所有重复的电子邮箱,重复的邮箱里只保留 Id 最小 的那个. +----+------------------+ | Id | Email | +-- ...
- kubernetes集群的安装异常汇---docker的驱动引擎
异常[kubelet cgroup driver:cgroupfs跟docker cgroup driver:systemd不一致] 异常描述 error: failed to run Kubelet ...
- Idea maven项目不能新建package和class的解决【转】
如图,新建的maven项目不能新建package 这是因为java是普通的文件夹,要设置为 现在就可以了 博客原链接:http://blog.csdn.net/qq_24949727/article/ ...
- 2019-9-2-win10-uwp-隐私声明
title author date CreateTime categories win10 uwp 隐私声明 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 1 ...
- deep features for text spotting 在linux,windows上使用
做文本检测这个方向的同学应该都知道 deep features for text spotting 这篇ECCV14的文章. 用的是Matconvnet这个是深度学习框架来做文本检测,同时他还提供了代 ...
- java中的成员变量、类变量,成员方法、类方法 属性和方法区别
成员变量:包括实例变量和类变量,用static修饰的是类变量,不用static修饰的是实例变量,所有类的成员变量可以通过this来引用. 类变量:静态域,静态字段,或叫静态变量,它属于该类所有实例共有 ...
- MariaDB 创建表
在本章中,我们将学习如何创建表. 在创建表之前,首先确定其名称,字段名称和字段定义. 以下是表创建的一般语法: CREATE TABLE table_name (column_name column_ ...