echarts无数据时显示背景图
程序员文章站
2022-06-07 19:42:35
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts无数据时显示背景图</title>
<!-- 引入 echarts.js -->
<script src="js/jquery/1.10.2/jquery.min.js"></script>
<script src="js/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 60%;height: 40vh;"></div>
<div id="main_img" style="width: 60%;height: 40vh;"><img style='width: 100%;height: 100%;' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAC8UlEQVRYR+2WT2jUQBTGvzdZi3/AoojgRRFBrbRqBcX6Dw8iCt1N9lA2EdSjIIgVPIggFC8qgrSg4FEs7aZUbJO2Fr2IghU9WKRalOJFqaAX0WKF3c08iXR30+12k91UENycMpn3vvfLN28mIfxjF4XhcQz1CjP2E9E9JdnfHkYrm1sxkGNo7WA+m4NgblV67I6wUBUBObp2CeDLhcUZdCJi9neGgSobyDHU02Dcmq8og5sjpj1UKVRZQBlDM4i526+YILGHkn3P/eKKzQcGSie0w4L4YcAiUjhooF5rPGB8LiwQECeiOyWJl15xJjwlxm4ANQC+MvCBgCaP8pRg3kym/bkcKF8gTsQ3SpJjM4VntOmUiIgBmXEmAbga08KpWS6V1HUA5zwAk2Ka68i2p4JClQTi4/HVMi3fAVjhefO7StI6yce0XVLyi+xzoaRqqWv4R8ZQnxDjgCd+XGxqbKC2NhkEal4gjkaXymXC7YF1+UOLB4VpR91xRo/FCGTlgMA7yLRH3bGTUEdB2J6dY2AkYlp7QwE5uvoawFaP6LOIae3LjjMJ7SgRP8gBkayn5MBbd8wtLUukknLv1+dfBkPCtJr9oIo6NMd2xpjosbYRwEGA/kAZ0VWSxXsAKwuXuxTUHCCZUPuYoHmSPopFv7ZQ56OfXqFSDuVcTWgbJPEbAIvzUNShJPtb54OaBeToqrtDbniCvwniOkraXwoF0kbsiGAaLrZk3ljWY40S9Kog/4JiWteKQRUCuTDZbZsSwqmn7sGJYolBHMrmpXXtoAA/DuLSLCBuaamVkdRtZl6jKHSGuiz3/Cl6lQPkCrgnPZG8SEwTQtacp97e774O+e2AcnuoHD3PbqwkDSjXoaBVfD8dC7VkVSDhOamDulFt6kqcqja1n2tVh/4jh3Q1TsD93O+H5xfWz4VS8xX3EBvxJslyJA+EtWRan8LAuLkVA7nJjq5eBXAIzHeUHvtmWJjQQAsBUKgRyqEq0N9wwE/zN1CCZzSMWP+PAAAAAElFTkSuQmCC" alt=""></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
arr = [];
var option;
if (arr.length == '0') {
$("#main").hide();
$("#main_img").show();
} else {
$("#main").show();
$("#main_img").hide();
// 指定图表的配置项和数据
option = {
xAxis: {
data: ["1H", "2H", "3H", "4H", "5H", "6H", "7H"],
axisLine: { show: false },
axisTick: {
show: true,
lineStyle: {
color: "#65ABE7",
width: 1
},
},
axisLabel: { //X轴标签
show: true,
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
}
}
},
yAxis: [
{
name: '单位(数)',
type: 'value',
min: 0,
max: 1,
interval: 0.2,
axisLabel: {
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
}
},
axisTick: { show: false },
axisLine: { show: false }
},
{
name: '单位(率)',
type: 'value',
min: 0,
max: 100,
interval: 20,
lineStyle: {
color: '#65ABE7',
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#65ABE7',//字体颜色
fontSize: 12 //字体大小
}
},
axisTick: { show: false },
axisLine: { show: false },
splitLine: { //Y轴分隔符
show: true,
lineStyle: {
color: '#65ABE7',
}
}
},
],
series: [
{
name: '未开始',
xAxisIndex: 0,
data: [0.23, 0.20, 0.34, 0.56, 0.43, 0.66, 0.84],
type: 'pictorialBar',
barGap: '-100%',
symbol: 'roundRect',
symbolRepeat: 'fixed',
symbolClip: true,
symbolSize: [16, 4],
label: {
normal: {
textStyle: {
normal: {
color: '#0A9EF3',
},
},
},
},
itemStyle: {
normal: {
color: '#0A9EF3',
},
},
},
{
yAxisIndex: 1,//根据右边轴显示
name: '抛料率',
type: 'line',
data: [23, 20, 34, 56, 43, 66, 84],
itemStyle: {
normal: {
color: '#e75e66',
label: {
show: false, //开启显示
formatter: '{c}%',
position: 'bottom', //在下方显示
textStyle: { //数值样式
color: '#65ABE7',
fontSize: 16
}
}
}
}
}
]
};
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
}
</script>
</body>
</html>