将echarts图调成响应式的代码

来源：互联网发布：淘宝差评能追加评价吗编辑：程序博客网时间：2024/05/29 11:51

<!doctype html>

<html lang="us">

<head>

<meta charset="utf-8"><title></title><script src="echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>

</body>

</html>

<script src="jquery.js"></script>

<script>

var myChart = document.getElementById('main');

//自适应宽高var myChartContainer = function ()

{

myChart.style.width = window.innerWidth+'px';

myChart.style.height = window.innerHeight+'px';

};

myChartContainer();

var myChart = echarts.init(myChart);

option = {

title: { text: '基础雷达图' },

radar: {

indicator: [

{ name: '销售', max: 6500},

{ name: '管理', max: 16000},

{ name: '信息技术', max: 30000},

{ name: '客服', max: 38000},

{ name: '研发', max: 52000},

{ name: '市场', max: 25000}

],

name:{

formatter:function(v){

console.log(v);return v;

}

},

triggerEvent:true

},

series: [

{

name: '预算vs开销',

type: 'radar',

data : [{

value : [4300, 10000, 28000, 35000, 50000, 19000],

name : '预算分配'

},

{

value : [5000, 14000, 28000, 31000, 42000, 21000],

name : '实际开销'

}]

}]};

myChart.setOption(option);

//浏览器大小改变时重置大小

window.onresize = function ()

{

myChartContainer();

myChart.resize();

};

</script>

阅读全文

1 0