echarts绘多条曲线多个颜色,配置存图等
bandChartOption = {
toolbox: {
feature: {
saveAsImage: {
}
},
right: 90,
top: 15
},
title: {
text: 'Band Structure',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
right: 10,
bottom: 5,
padding: [0, 40],
type: 'scroll',
data: []
},
dataZoom: [
{
type: 'inside',
xAxisIndex: [0]
},
{
type: 'inside',
yAxisIndex: [0]
}
],
xAxis: {
name: 'kPoints',
nameLocation: 'center',
nameTextStyle: {
padding: [10, 0]
},
min: 0,
max: 1,
type: 'value',
axisLine: {
onZero: false },
splitLine: {
show: false
}
},
yAxis: {
name: 'E-Efermi(eV)',
nameLocation: 'center',
type: 'value',
axisLine: {
onZero: false }
},
series: []
};
initChartData(): void {
const LINE_COLOR = [
'#FF1F1F', '#3BFF3B', '#1B1BFF', '#F8F850', '#FF25FF', '#67FFFF', '#AF41F2', '#9F8B29', '#2B9B9E', '#FFC1CC',
'#CACACA', '#B6416D', '#9B4324', '#E1B3E1', '#4F9E71', '#A4BA78', '#B17150', '#FF9665', '#FFD06D'
];
const colorLength = this.bandData.data.length;
this.bandChartOption.series = bands.map((band, index) => {
return {
name: `trace ${
index}`,
type: 'line',
symbol: 'circle',
symbolSize: 2,
smooth: false,
itemStyle: {
color: LINE_COLOR[index % colorLength]
},
data: band.map((v, i) => {
return a value you need;
})
};
});
this.bandChartOption.legend.data = this.bandChartOption.series.map(serie => serie.name);
}