插件版本：echarts4.0
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿支付宝七日年化折线图</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<script src="../lib/flexible_new.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<style type="text/css">
#main {
width: 89.4%;
margin: 0 5.3%;
height: 6rem;
background: #fff;
border: 1px solid #9999FF;
}
ul {
width: 89.4%;
margin: 0 5.3%;
display: flex;
}
li {
flex: 1;
text-align: center;
border: 1px solid blue;
height: 30px;
line-height: 30px;
font-size: 24px;
}
.active {
background: greenyellow;
}
</style>
</head>
<body>
<div id="main"></div>
<ul id="tabList">
<li class="active">一月</li>
<li>三月</li>
<li>六月</li>
<li>一年</li>
<li>三年</li>
</ul>
<script src="../lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/echarts1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
dates: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
value: Math.random() * 4-2
}
}
var testData = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for(var i = 0; i < 30; i++) {
testData.push(randomData());
}
console.log(testData)
//tab切换
var beginIndex = 3;
var allLength = 30;
$('#tabList').on('click', 'li', function() {
console.log($(this).index());
$(this).addClass('active').siblings().removeClass('active');
switch($(this).index()) {
case 0:
beginIndex = 2;
state = 0;
allLength = 30;
break;
case 1:
beginIndex = 6; //1
state = 1;
allLength = 90;
break;
case 2:
beginIndex = 14; //1
state = 2;
allLength = 180;
break;
/*3 4 的时候基本是6倍比例*/
case 3:
beginIndex = 58; //1
state = 3;
allLength = 360;
break;
case 4:
beginIndex = 180; //
state = 4;
allLength = 1080;
break;
default:
beginIndex = 2;
state = 0;
allLength = 30;
break;
}
//tab触发新数据获取
testData = [];
for(var i = 0; i < allLength; i++) {
testData.push(randomData());
}
xInterval = Math.floor(testData.length / 2);
dateList = testData.map(function(item) {
return item.dates;
});
valueList = testData.map(function(item) {
return item.value;
});
myChart.setOption({
xAxis: {
data: dateList,
axisLabel: {
interval: 0,
formatter: function(value, index) {
/*当时年记录的时候，使第3个和倒数第三个标为第一个和最后一个即可 其他为空*/
if(index == beginIndex || index == xInterval || index == dateList.length-1) {
if(index == beginIndex) {
value = dateList[0]
}
/*<3 只显示月日 */
if(state < 3) {
value = value.slice(value.indexOf('-') + 1)
}
} else {
value = ' ';//空格与我有仇，空格解决tab切换时视图抖动问题
}
return value;
},
}
},
series: [{
data: valueList
}]
});
})
/*-------正式的分割线--------*/
var state = 4; //x轴刻度是否不需要年
var dateList = testData.map(function(item) {
return item.dates;
});
var valueList = testData.map(function(item) {
return item.value;
});
var myChart = echarts.init(document.getElementById('main'))
myChart.showLoading({
text: '正在努力的读取数据中。。。',
})
// ajax getting data...............
// ajax callback
myChart.hideLoading();
var xInterval = Math.floor(testData.length / 2);
var option = {
tooltip: {
trigger: 'axis',
position: [0, 0], //位置
backgroundColor: '#F3F6FB',
transitionDuration:0,//解决光标移动到某个坐标的时候tooltip像从底部飞出来一样动画效果
//formatter:'<div style="display:flex;justify-content: space-between;"><span >{b0}</span><span >万份收益：{c0}</span></div>',
//formatter: '<div ><span style="float:left;margin-left:8px;">{b0}</span><span style="float:right;margin-right:8px;">万份收益：<span style="color:#FF1F46;">+{c0}%</span></span></div>',
formatter: function(params){
var html = '';
console.log(params,'formatter',params[0].data)
if(params[0].data>0){
console.log('大于0')
html = '<div ><span style="float:left;margin-left:8px;">'+params[0].name+'</span><span style="float:right;margin-right:8px;">万份收益：<span style="color:#FF1F46;">+'+params[0].data+'%</span></span></div>'
}else if(params[0].data<0){
html = '<div ><span style="float:left;margin-left:8px;">'+params[0].name+'</span><span style="float:right;margin-right:8px;">万份收益：<span style="color:#888888;">'+params[0].data+'%</span></span></div>'
}
setTimeout(function(){
myChart.dispatchAction({
type: 'hideTip',
})
},2000)
return html;
},
hideDelay:100,
textStyle: {
color: '#333',
fontSize: 12,
height: '18px',
fontWeight: 500,
fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN'
},
padding: 0,
extraCssText: 'width: 100%;line-height:36px;'
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
top: 54,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,//两边的数据是否到达边界
data: dateList,
axisLine: {
lineStyle: {
opacity: 0
}
},
splitLine: {
show: false,
},
axisTick: {
show: false, //去小头头
length: 3 //坐标轴刻度的长度
},
axisLabel: {
align: 'right',
color: '#666',
fontSize: 10,
fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
interval: 0, //隔几个显示一个分界标
showMinLabel: true, //
showMaxLabel: true, //是否显示最大tick的label(如果标签重叠，不会显示最大tick的label)
formatter: function(value, index) {
var beginIndex = 3;
if(state < 3) {
beginIndex = 1;
}
/*当时年记录的时候，使第3个和倒数第三个标为第一个和最后一个即可 其他为空*/
if(index == beginIndex || index == xInterval|| index == dateList.length-1) {
if(index == beginIndex) {
value = dateList[0]
}
/*<3 只显示月日 */
if(state < 3) {
value = value.slice(value.indexOf('-') + 1)
}
} else {
value = ' ';//空格与我有仇，空格解决tab切换时视图抖动问题
}
return value;
},
}
},
yAxis: {
type: 'value',
min: 0,
max: 6,
splitNumber: 3,
axisLabel: {
color: '#666',
fontSize: 10,
fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
formatter: function(val) {
return val + ".00%";
}
},
axisLine: {
lineStyle: {
opacity: 0
}
},
axisTick: {
show: false, //去小头头
},
splitLine: {
lineStyle: {
color: '#f1f1f1',
type: 'dotted'
}
},
},
axisPointer: {
lineStyle: {
color: "#3367D6"
}
},
series: [{
type: 'line',
symbol: 'circle',
symbolSize: 1,
lineStyle: {
color: '#3367D6',
width: 2,
},
itemStyle: {
color: '#000',
borderColor: '#fff'
},
showSymbol: false, //取消小点的显示
data: valueList
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
6070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
