echarts适配移动端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./echarts.simple.min.js"></script> <script> var d = document.documentElement; var cw = d.clientWidth || 750; document.documentElement.style.fontSize = (cw/750 * 100) + 'px'; </script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height: 4.5rem;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); function remToPx(rem) { var fontSize = document.documentElement.style.fontSize; return Math.floor(rem * fontSize.replace('px', '')); } // 指定图表的配置项和数据 var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name:'访问来源', type:'pie', selectedMode: 'single', radius: [0, '45%'], center: ['50%', '49%'], label: { normal: { position: 'inner', textStyle : { fontWeight : 'normal', fontSize : '0.18rem', } } }, labelLine: { normal: { show: false } }, data: [ {value:335, name:'A', selected:true}, {value:309, name:'B'}, ], }, { name:'访问来源', type:'pie', radius: ['60%', '80%'], center: ['50%', '49%'], label: { normal: { backgroundColor: '#eee', borderColor: '#aaa', rich: { a: { color: '#999', lineHeight: remToPx(0.22), align: 'center' }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 1, height: 0 }, b: { fontSize: '0.32rem', lineHeight: '0.66rem', }, per: { color: '#eee', backgroundColor: '#334455', padding: ['0.04rem', '0.08rem'], borderRadius: '0.04rem' } } } }, data: [ {value:235, name:'A'}, {value:100, name:'B'}, {value:209, name:'A'}, {value:100, name:'B'}, ], } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
https://www.cnblogs.com/shiyunfront/articles/7686942.html