echarts 视图自适应问题
Posted bllx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 + ‘ ‘ + e.target.y + ‘ %‘ }); } //, // click: function(e) { // 同样的可以在点击事件里处理 // chart.setTitle({ // text: e.point.name+ ‘ ‘+ 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 视图自适应问题的主要内容，如果未能解决你的问题，请参考以下文章