最近在项目中用到了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>
原文地址：https://www.cnblogs.com/bllx/p/11765423.html
时间： 2024-08-01 08:33:32