问题遇到的现象和发生背景
web页面在电脑上面访问页面自适应正常，到高清电视（3840*2160）上面放着布局正常，但是echart图表会被放大两倍
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="echarts.min.js"></script>
<style >
body{
background-color:green;
}
</style>
</head>
<body>
<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
<script type="text/javascript">
//window.onload = function () {
//指定图表的配置项和数据
var dataAxis = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 200];
var yMax = 600;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '',
subtext: ''
},
grid: {
x: 40,
y: 40,
x2: 50,
y2: 20,
},
xAxis: {
data: dataAxis,
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
z: 10
},
yAxis: [{
type: 'value',
name: '产能',
max: 600,
splitNumber: 5,
interval: 600 / 5,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
{
type: 'value',
name: '达成率',
max: 100,
min: 0,
splitNumber: 5,
interval: 20,
splitLine: {//取消网络线
show: false
},
axisLine: {
show: true,
//symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
formatter: '{value}.0%'
}
}
],
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
name: '产能',
yAxisIndex: 0,//对应右侧Y轴
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#0efdff' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#0efdff' }
]
)
}
},
data: data
},
{
name: '达成率',
yAxisIndex: 1,//对应右侧Y轴
type: 'line',
data: [20, 25, 30, 36, 37, 45, 56, 59, 60, 70, 80, 90],
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'white',
fontSize: '60%'
},
formatter: '{c}%'
}
},
},
},
]
};
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//};
</script>
</body>
</html>
我想要达到的结果
可以和电脑上面访问页面一致
