魁首
🔔一个没有天赋的前端程序员👨💻 💡博客
关注我🔰
🤖Github |🔑CSDN | 💎掘金 | 📖 知乎 | 💡博客 |
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts 上下两个堆叠折线图的实现</title>
</head>
<body>
<div id="rateTable" style="height: 100%; width: 100%;min-height: 470px"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script>
<!--Echarts在这里绘制-->
</script>
</html>
json数据格式
[
{
"dt": "2020-01-02", //x轴日期
"portfolio_net_value": 0.0,//数据1
"SH_net_value": 0.0, //数据2
"alpha_net_value": 0.0, //数据3
"cur_drawdown_rate": 0.0 //数据4
},
{
"dt": "2020-01-03",
"portfolio_net_value": -0.0083730541368796,
"SH_net_value": 0.0008564679888114,
"alpha_net_value": -0.0092295221256908,
"cur_drawdown_rate": -0.0083730541368796
},
{
"dt": "2020-01-06",
"portfolio_net_value": -0.0040413555084052,
"SH_net_value": 0.0109406884571092,
"alpha_net_value": -0.0148841629410285,
"cur_drawdown_rate": -0.0040413555084056
},
{
"dt": "2020-01-07",
"portfolio_net_value": 0.0088552022531673,
"SH_net_value": 0.0230293795826546,
"alpha_net_value": -0.0139078885557082,
"cur_drawdown_rate": 0.0
},
]
复制代码
js部分
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script>
var mychartdd = echarts.init(document.getElementById('rateTable'));
var seriesName1 = '数据1';
var seriesName2 = '数据2';
var seriesName3 = '数据3';
var seriesName4 = '数据4';
var option = {
legend: { // 图例
data: [seriesName1, seriesName2, seriesName3, seriesName4],
right: '10%',
},
dataZoom: [ // 底部红色数据框拖动条
{
id: 'datazoomX',
type: 'slider',
xAxisIndex: [0, 1],
height: 20,
top: '69%',
right: 10,
left: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
fillerColor: "rgba(255, 76, 31,.2)",
dataBackground: {
areaStyle: {
color: ''
},
lineStyle: {
opacity: 1,
color: '#FF4C1F'
}
},
handleStyle: {
color: '#FF4C1F',
},
filterMode: 'weakFilter',
zoomOnMouseWheel: 'false'
},{
id: 'dataZoomY',
type: 'inside',
xAxisIndex: [0, 1],
filterMode: 'weakFilter',
zoomOnMouseWheel: 'false'
}
],
tooltip: { // 鼠标悬停提示框组件
trigger: 'axis',
axisPointer: {
type: 'cross', //十字准星指示器
},
formatter: function (datas) { //提示框浮层内容格式
var res = datas[0].name + '<br/>';
var length = datas.length;
var i = 0;
for (; i < length; i++) {
res += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + datas[i].color + ';"></span>' + datas[i].seriesName + ':' + datas[i].value.toFixed(2) + '%' + '<br/>'
}
return res
}
},
axisPointer: { // 坐标轴指示器
link: {xAxisIndex: 'all'},
label: {
backgroundColor: '#777'
}
},
grid: [ //直角坐标系内绘图网格
{
top: 20,
left: 10,
right: 0,
bottom: 20,
height: '60%',
}, {
left: 10,
right: 0,
bottom: 15,
height: '20%',
}
],
xAxis:[
{
type: 'category',
data: [],
axisLine: {
show: true,
lineStyle: {
color: '#D8D8D8'
}
},
axisTick: {
show: false
},
axisLabel: {
show:true,
textStyle: {
fontSize: 10,
color: '#222831'
},
},
splitLine: {
show: false
},
scale: true,
},
{
type: 'category',
gridIndex: 1,
data: [],
axisLine: {
lineStyle: {
color: "#D8D8D8"
}
},
scale: true,
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: false},
}
],
yAxis: [
{
scale: true,
splitArea: {
show: false
},
splitNumber: 4,
// max: 150,
// logBase:10,
axisLabel: {
show: true,
textStyle: {
fontSize: 10,
color: '#808080',
align: 'left'
},
formatter: '{value} %'
},
axisLine: {
show: false,
lineStyle: {
color: '#D8D8D8'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F5F5'
}
},
offset: -10,
},
{
type: 'value',
gridIndex: 1,
offset: -10,
axisLabel: {
show: true,
textStyle: {fontSize: 10, color: "#808080", align: 'left'},
formatter: '{value} %',
},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {show: false}
}
],
series: [
{
name: seriesName1,
type: 'line',
data: [],
color: "#FF7855",
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'none',
},
{
name: seriesName2,
type: 'line',
data: [],
color: "#009DFF",
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'none'
},
{
name: seriesName3,
type: 'line',
data: [],
color: "#FFBD00",
xAxisIndex: 0,
yAxisIndex: 0,
symbol:'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 189, 0, .5)'
},
{
offset: 1,
color: 'rgba(255, 189, 0, 0)'
}
])
},
},
{
name: seriesName4,
type: 'line',
data: [],
color: '#769CFA',
gridIndex: 1,
xAxisIndex: 1, //使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用
yAxisIndex: 1,
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(115,156,250,0.05)'
}, {
offset: 0.76,
color: 'rgba(115,156,250,0.25)'
}])
},
}
]
};
mychartdd.setOption(option);
/*请求json数据*/
$(function(){
var SoilTemp1 = [], SoilTemp2 = [], SoilTemp3 = [], SoilTemp4 = [];// Y坐标值:各项指标数据
var TM = [];// x坐标值:时间
mychartdd.showLoading({ text: "图表数据正在加载中.....如果加载不出来,建议使用WebStorm工具打开" });
$.ajax({
type: "GET",
// 请求地址
url: "json/html1.json",
// async:true, //是否异步
// dataType: "jsonp", //预期的服务器响应的数据类型。
// jsonp: "callback", //在一个 jsonp 中重写回调函数的字符串。
// xhrFields: {withCredentials: true},
success: function (ret) {
var date = ret;
if (date == null) {
mychartdd.showLoading({ text: "未获取到数据,请选择正确的时间..." });
}
// 遍历上面 '数据1','数据2','数据3'
for (var i = 0; i < date.length; i++) {
TM.push(date[i].dt); //时间
SoilTemp1.push(date[i].portfolio_net_value); //数据1
SoilTemp2.push(date[i].SH_net_value); //数据2
SoilTemp3.push(date[i].alpha_net_value); //数据3
}
// 遍历下面 ‘数据4’ 数据
for (var j = 0; j < date.length; j++) {
SoilTemp4.push(date[j].cur_drawdown_rate); //数据4
}
mychartdd.hideLoading(); //隐藏加载动画
mychartdd.setOption({ //加载数据图表
tooltip: [
{
trigger: 'axis'
},
],
toolbox: { // 工具栏
show: false,
feature: {
saveAsImage: { show: false }, // 保存为图片
restore: { show: false },
},
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: TM
},
{
type: 'category',
boundaryGap: false,
data: TM
},
],
yAxis: [{},{}],//注意一定不能丢了这个,不然图表Y轴不显示
series: [
{
name: seriesName1,
type: 'line',
data: SoilTemp1
},
{
name: seriesName2,
type: 'line',
data: SoilTemp2
},
{
name: seriesName3,
type: 'line',
data: SoilTemp3
},
{
name: seriesName4,
type: 'line',
data: SoilTemp4
}
]
});
}
});
});
</script>
复制代码
看完感觉对你有帮助,记得关注 我 !