对标
实现后效果
代码实现（echarts 核心是itemStyle的设置）
<!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">
td {
justify-content: space-between;
}
#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;
}
.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/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fGetChartFontSize() {
const dpr = window.devicePixelRatio;
let fontSize = 14;
if(dpr == 2) {
fontSize = 19;
} else if(dpr == 3) {
fontSize = 30;
} else if(dpr > 3) {
fontSize = 30;
}
return fontSize;
};
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
}
};
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;
/*-------正式的分割线--------*/
var state = 4; //x轴刻度是否不需要年
var dateList = testData.map(function(item) {
return item.dates;
});
var valueList = testData.map(function(item) {
return item.value;
});
console.log(valueList[valueList.length-1])
var lastNew = {
value: valueList[valueList.length-1],
symbolSize: 5,
itemStyle: {
color: '#fff',
borderColor: '#000',
opacity: 1
}
}; //最后一个点的特殊化处理
valueList.splice(valueList.length-1, 1, lastNew);//datalist数组最后一点替换
console.log(valueList);
var myChart = echarts.init(document.getElementById('main'))
myChart.showLoading({
text: '正在努力的读取数据中。。。',
});
myChart.hideLoading();
var xInterval = Math.floor(testData.length / 2);
var option = {
legend: {
left: '1%',
top: '5%',
selectedMode: false,
data: [{
name: '流量',
icon: 'image://../img/dot@3x.png',
textStyle: {
color: 'red'
}
}],
itemWidth: 13,
itemHeight: 7,
},
tooltip: {
trigger: 'axis',
position: [0, 0], //位置
transitionDuration: 0,
backgroundColor: '#F3F6FB',
axisPointer: {
axis: 'x',
lineStyle: {
color: "#ff671b"
}
},
alwaysShowContent: false,
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>',
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: null, //
showMaxLabel: null, //是否显示最大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 = '';
}
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'
}
},
},
series: [{
name: '流量',
type: 'line',
symbol: 'circle',
symbolSize: 5,
lineStyle: {
normal: {
color: '#3367D6',
width: 2,
}
},
itemStyle: {
emphasis: {
color: '#666',
borderColor: '#ff671b',
opacity: 1
},
normal: {
color: '#3367D6',
borderColor: '#fff',
opacity: 0
},
},
markPoint: {
symbol: 'image://../img/dot@3x.png', //初始化时判断，背景图片赋值
symbolSize: 20,
symbolOffset: ['-50%', '-50%'],
label: {
formatter: function(params) {
var html = '22';
//初始化判断来做 flag
if(false) {
html = '+56'
} else {
html = '-11'
}
console.log(params.value);
return html;
},
color: '#fff',
borderColor: '#ff671b'
},
emphasis: {
itemStyle: {
color: '#ff671b',
borderColor: '#ff671b',
}
},
data: [{
type: 'max',
name: 'x轴最大值',
valueDim: 'x',
}]
},
data: valueList
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
9409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
