在项目中通常不会只显示一个种类的图表,如果在有多种配置的图表要怎么进行显示?如下:
在echarts官网中首先要有一个带有id的和高度的标签,但是往往这个标签并不能在页面中写死,所以就需要动态进行添加。
1.把一个配置作为一个大的对象放到数组对象switchList中。(对配置中的图表显示的标签id循环时把index放入id中拼成新的id,防止出现相同的id值。)
<div class="tubiaoShow" *ngFor="let switchItem of switchList">
<div class="" [ngSwitch]='tableItem.type' *ngFor="let tableItem of switchItem.data;let i = index">
<div class="addArea">
<div [hidden]="switchItem.add"><button class="addCollect bg-169bd5" (click)="addSave(switchItem.saveDt,switchItem)">添加收藏</button></div>
<div [hidden]="!switchItem.add"><button class="cancelCollect bg-bdbdbd" (click)="cancelDeleteSelf(switchItem.saveDt,switchItem)">取消收藏</button></div>
</div>
<div *ngSwitchCase="'4fcf9657-26d3-4239-a8b1-3c415117940b'" id="yibiao{{switchItem.index}}"></div>
<div *ngSwitchCase="'a5346865-4329-4402-b5a3-5826fe66cd29'" id="pile{{switchItem.index}}"></div>
<div *ngSwitchCase="'b37f8c5a-f30d-4200-a592-e2b03e4cf718'" id="column{{switchItem.index}}"></div>
<div *ngSwitchCase="'51ae67ef-5743-4ed4-8ab6-a7001ff153ad'" id="polyline{{switchItem.index}}"></div>
<div *ngSwitchCase="'1b8dccb8-dbc6-49c6-943c-de9aa5456491'" id="pie{{switchItem.index}}"></div>
<div *ngSwitchCase="'3e272915-09c0-424f-b74d-8ad963d17cb3'" id="leida{{switchItem.index}}"></div>
<div *ngSwitchCase="'59ae8514-406c-4774-971a-cb02d94e2ce8'" id="sandian{{switchItem.index}}"></div>
</div>
</div>
2.把每个列表写成一种方法在大循环中进行调用。
对数据进行处理的类似方法如下:
(switchList是获取的配置的数组数据,下面代码中的item.data[j].type == this.chartType.pile是通过type值来判断图表的类型)
//数据处理
tableDataHandle(){
if(this.switchList.length != 0){
this.switchList.forEach((item,index)=>{
for (let j in item.data) {
var chartInfo = item.data[j];
if (item.data[j].type == this.chartType.pile) {
this.getChartPile(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.line){
this.getChartLine(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.column){
this.getChartColumn(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.pie){
this.getChartPie(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.radar){
this.getChartRadar(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.scatter){
this.getChartSanDian(chartInfo,j,index);
}else if(item.data[j].type == this.chartType.yibiao){
this.getChartYibiao(chartInfo,j,index);
}
}
})
}
}
下面以一种图表为例:
(以散点图为例)
//散点
getChartSanDian(data,i,index){
let chartDisplay = 'sandian' + index;
//动态加载
var parent = document.getElementById(chartDisplay);
parent.innerHTML = '';
//添加div
let divName = "sandian"+index+i;
let divName1 = "sandiandataCome"+index+i;//数据来源
let zhexian = document.getElementById(divName);
let source = document.getElementById(divName1);
if(zhexian){
parent.removeChild(zhexian);
}
if(source){
parent.removeChild(source);
}
var div = document.createElement("div");
//设置 div 属性,如 id
div.setAttribute("id",divName);
div.style.height = '400px';
div.style.width = (document.body.clientWidth-20)+'px';
parent.appendChild(div);
//动态添加数据来源数据
var span = document.createElement("span");
span.setAttribute("id",divName1);
span.setAttribute("class",'dataCome');
parent.appendChild(span);
let dataName = document.getElementById(divName1) as HTMLDivElement;
let sourceTxt = '';
for(let t in data.source){
sourceTxt+=data.source[t];
}
dataName.innerText = '数据来源:'+sourceTxt;
document.getElementById(divName).removeAttribute('_echarts_instance_');
var myChart = ECharts.init(document.getElementById(divName) as HTMLDivElement);
myChart.setOption({
title : {
text: data.title
},
tooltip : {
trigger: 'axis',
showDelay : 0,
confine: true,
formatter : function (params) {
if (params.length > 1) {
var returnData = '';
for(let g in params){
returnData += params[g].seriesName + ':'
+ params[g].value[1] + '<br/>';
}
return returnData;
}else {
return params[0].seriesName + ' :<br/>'
+ params[0].value[0] + ':' + params[0].value[1];
}
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
grid: {
left: '2%',
containLabel: true
},
legend: {
// data:data.option.legend.data,//['女性','男性']
bottom : '0px'
},
xAxis : [
{
type : 'category',
scale:true,
data:data.option.xAxis[0].data,
axisLabel : {
formatter: data.option.xAxis[0].data
}
}
],
yAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value}'
}
}
],
series : data.option.series
})
window.addEventListener("resize",function(){
myChart.resize();
});
}
记录一下,以后参考使用!!!