溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果”文章能幫助大家解決問題。
1、問題描述：
利用Echarts制作一個折線圖，條件是：三條折線，一條代表可利用率，另外兩條代表數(shù)量。
2、實現(xiàn)源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-雙軸圖</title>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="echarts.js" ></script>
<style>
body,html{
width: 99%;
height: 99%;
font-family: "微軟雅黑";
font-size: 12px;
}
#double{
width: 100%;
height: 100%;
font-family: "agency fb";
font-weight: bolder;
}
</style>
<script>
$(function(){
var chart = document.getElementById('double');
var echart = echarts.init(chart);
var option = {
title : {
text: '可利用率',
subtext: '',
x: 'center',
align: 'right'
},
grid: {
bottom: 80
},
tooltip : {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: function (params) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++)
{
if(i==0)
{
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%";
}
else
{
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
}
return res;
}
},
legend: {
data:['可利用率','A','B'],
x: 'left'
},
xAxis : [
{
type : 'category',
axisLabel: {
rotate: 45
},
boundaryGap : false,
axisLine: {onZero: false},
data : ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function (str) {
return str.replace(' ', '\n')
})
}
],
yAxis: [
{
name: '可利用率',
type: 'value',
max: 100,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
}
},
{
name: 'A',
nameLocation: 'start',
type: 'value',
inverse: true
},
{
name: 'B',
nameLocation: 'start',
type: 'value',
inverse: true
}
],
series: [
{
name:'可利用率',
type:'line',
hoverAnimation: false,
itemStyle: {
normal: {
label : {
show:false,
position:'top',
formatter:'{c} %'
}
}
},
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data:[12,78,34,67,88,45,65,77,31,21,90,54]
},
{
name:'A',
type:'line',
yAxisIndex:1,
hoverAnimation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data: [1,4,5,8,3,2,7,6,9,2,4,3]
},
{
name:'B',
type:'line',
yAxisIndex:1,
hoverAnimation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data: [0,2,3,7,1,0,5,2,6,1,2,1]
}
]
};
echart.setOption(option);
});
</script>
</head>
<body>
<div id="double"></div>
</body>
</html>3、實現(xiàn)效果圖：
關(guān)于“怎么用jQuery插件Echarts實現(xiàn)雙軸圖效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼