jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
18 浏览量
2020-10-20
06:58:05
上传
评论
收藏 44KB PDF 举报
jQuery插件插件Echarts实现的双轴图效果示例【附实现的双轴图效果示例【附demo源码下载】源码下载】
主要介绍了jQuery插件Echarts实现的双轴图效果,结合完整实例形式分析了Echarts插件制作双轴图效果的操作步骤与相关实现技巧,并附
带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了jQuery插件Echarts实现的双轴图效果。分享给大家供大家参考，具体如下：
1、问题描述：、问题描述：
利用Echarts制作一个折线图，条件是：三条折线，一条代表可利用率，另外两条代表数量。
2、实现源码：、实现源码：
<!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(' ', '')
})
}
],
yAxis: [
{
name: '可利用率',
type: 'value',
max: 100,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
}
资源评论
