html
<div
id="performaceLineChart"
ref="performaceLineChartRef"
style="width: 100%; height: 500px"
></div>
javascript
initLineChart() {
var chartDom = document.getElementById("performaceLineChart");
this.chart = echarts.init(chartDom);
let that = this
let option = {
color: [],
toolbox: {
top: "0",
right: "10",
itemSize: 18,
iconStyle: {
borderColor: "#aeaeae",
borderWidth: 2,
},
feature: {
brush: {
type: ['rect'], // ['rect','polygon','lineX', 'lineY','keep','clear'],
title: {
rect: '矩形选择',
},
xAxisIndex: 0,
},
saveAsImage: {
title: "导出图片",
name: `${this.basicInfoData.shortName}-业绩表现(${this.selectLabel})`
},
// dataZoom: [{ // 区域缩放
// type: 'inside',
// start: 0,
// end: 100,
// }],
// restore: {}, // 还原
},
},
brush: {
toolbox: ['rect'], // ['rect','polygon','lineX', 'lineY','keep','clear'],
xAxisIndex: 0,
},
tooltip: {
trigger: "axis",
backgroundColor: 'rgba( 0, 0, 0,0.7)',
borderColor: 'rgba( 0, 0, 0,0.7)',
formatter: function (params) {
var str = params[0].name + "</br>";
for (let item of params) {
str =`
<span style='color: #fff;'>${str}</span>
${item.seriesName === '单位净值' ? '</br>' : ''}
<div style='display:flex;justify-content:space-between;'>
<div style='display:flex;'>
<div>${item.marker}</div>
<div style='color: #fff;width: 200px;white-space: normal;'>${item.seriesName}</div>
</div>
<div style='color: #fff;'>${item.value}${item.seriesName !== '单位净值' ? '%' : ''}</div>
</div>`;
}
return str;
},
},
legend: {
x: "center",
y: "bottom",
icon: "circle",
textStyle: {},
data: this.lengengData,
},
grid: {
left: "0.5%",
right: "1%",
bottom: "15%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {},
axisLine: {
show: true,
lineStyle: {},
onZero: false, // X轴线始终位于底部
},
splitLine: {
show: false,
},
data: this.performaceLineChartData.dataDates,
},
yAxis:[
{
type: "value",
scale: true,
splitNumber: 5,
alignTicks: true,
axisLabel: {
show: true,
formatter: (value) => {
return `${value.toFixed(1)}%`
}
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dotted",
},
},
},
{
type: "value",
splitNumber: 5,
axisLabel: {
show: true,
formatter: (value) => {
return `${value}%`
}
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dotted",
},
},
},
{
type: "value",
splitNumber: 5,
alignTicks: true,
axisLabel: {
show: true,
formatter: (value) => {
return `${value.toFixed(1)}%`
}
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dotted",
},
},
},
{
type: "value",
splitNumber: 5,
axisLabel: {
show: true,
formatter: (value) => {
return `${value}%`
}
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dotted",
},
},
},
],
series: this.seriesData,
}
this.chart.setOption(option, true);
this.chart.on('brushEnd', function (params) {
// console.log(params,'brushEnd');
if (params.areas && params.areas.length > 0) {
let xData = params.areas[0].coordRange[0]
// 拿到框选的开始日期和结束日期
that.selectStartDate = that.performaceLineChartData.dataDates[xData[0]]
that.selectEndDate = that.performaceLineChartData.dataDates[xData[1]]
if (that.selectStartDate && that.selectEndDate) {
let params1 = {
fundCode: that.fundCode,
dataDate: that.dateValue,
displayType: '0', // displayType 固定传 '0'
indexCode: that.flag ? '' : '0', // indexCode 默认传 ''，切换超额收益后 indexCode 传 '0'
startDate: that.selectStartDate, // 框选的开始日期
endDate: that.selectEndDate, // 框选的结束日期
}
// 获取框选日期区间数据
getPortfolioNameApi.getCustomize(params1).then((res) => {
if(res.code === 200) {
that.selectIntervalData = res.data
// 区间数据框处于图表中间位置
let defaultDialog = document.querySelector('#intervalStyle')
let chartWidth = that.$refs.performaceLineChartRef.offsetWidth
defaultDialog.style.left = chartWidth / 2 - 182 + 'px'
defaultDialog.style.top = 40 + 'px'
that.intervalVisible = true
// that.chart.setOption(option,true); // 手动清除框选状态
}
})
}
}
});
},关键代码是：
javascript
brush: {
toolbox: ['rect'], // ['rect','polygon','lineX', 'lineY','keep','clear'],
xAxisIndex: 0,
},
this.chart.on('brushEnd', function (params) {
// console.log(params,'brushEnd');
if (params.areas && params.areas.length > 0) {
let xData = params.areas[0].coordRange[0]
// 拿到框选的开始日期和结束日期
that.selectStartDate = that.performaceLineChartData.dataDates[xData[0]]
that.selectEndDate = that.performaceLineChartData.dataDates[xData[1]]
if (that.selectStartDate && that.selectEndDate) {
let params1 = {
fundCode: that.fundCode,
dataDate: that.dateValue,
displayType: '0', // displayType 固定传 '0'
indexCode: that.flag ? '' : '0', // indexCode 默认传 ''，切换超额收益后 indexCode 传 '0'
startDate: that.selectStartDate, // 框选的开始日期
endDate: that.selectEndDate, // 框选的结束日期
}
// 获取框选日期区间数据
getPortfolioNameApi.getCustomize(params1).then((res) => {
if(res.code === 200) {
that.selectIntervalData = res.data
// 区间数据框处于图表中间位置
let defaultDialog = document.querySelector('#intervalStyle')
let chartWidth = that.$refs.performaceLineChartRef.offsetWidth
defaultDialog.style.left = chartWidth / 2 - 182 + 'px'
defaultDialog.style.top = 40 + 'px'
that.intervalVisible = true
// that.chart.setOption(option,true); // 手动清除框选状态
}
})
}
}
});