针对客户要求,需要做一个下拉选择数据改变视图,但发现数据重新返回后 折线图却不会重新更新渲染 于是查到echarts配置
chart.setOption(option, notMerge, lazyUpdate);
具体可查echarts官网 Documentation - Apache ECharts
贴上整个折线图完成代码
list = [
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104001|fstartyear%3D2019|endyear%3D2022",
"field_value": 1,
"name": "金辉集团股份有限公司",
"value1": 16.28,
"value2": 640.13,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104004|fstartyear%3D2019|endyear%3D2022",
"field_value": 2,
"name": "中骏集团控股有限公司",
"value1": 11.07,
"value2": 435.3,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105035|fstartyear%3D2019|endyear%3D2022",
"field_value": 3,
"name": "融创中国控股有限公司",
"value1": 9.59,
"value2": 377.04,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105033|fstartyear%3D2019|endyear%3D2022",
"field_value": 4,
"name": "金地(集团)股份有限公司",
"value1": 9.19,
"value2": 361.43,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104008|fstartyear%3D2019|endyear%3D2022",
"field_value": 5,
"name": "远洋集团控股有限公司",
"value1": 8.84,
"value2": 347.61,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104003|fstartyear%3D2019|endyear%3D2022",
"field_value": 6,
"name": "世茂地产控股有限公司",
"value1": 5.37,
"value2": 211.02,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105032|fstartyear%3D2019|endyear%3D2022",
"field_value": 7,
"name": "德信中国控股有限公司",
"value1": 5.15,
"value2": 202.68,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104018|fstartyear%3D2019|endyear%3D2022",
"field_value": 8,
"name": "当代置业(中国)有限公司",
"value1": 5.1,
"value2": 200.63,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104009|fstartyear%3D2019|endyear%3D2022",
"field_value": 9,
"name": "大连万达商业管理集团股份有限公司",
"value1": 4.74,
"value2": 186.39,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104011|fstartyear%3D2019|endyear%3D2022",
"field_value": 10,
"name": "北京首都开发股份有限公司",
"value1": 4.65,
"value2": 183,
"total": 3932.69
},
{
"field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dxx|fstartyear%3D2019|endyear%3D2022",
"field_value": 11,
"name": "其他客户",
"value1": 20.02,
"value2": 787.45,
"total": 3932.69
}
]
dataTop(list,chartId){//list:json数据 chartId:id名称
var arr= list.map(item =>{return item.fyear})
var newArr = arr.filter((item,index) => {return arr.indexOf(item) === index})
var json = list;
// var arr = list
var map = {},
dest = [];
for (var i = 0; i < json.length; i++) {
var ai = json[i];
if (!map[ai.customer_name]) {
dest.push({
customer_name: ai.customer_name,
data: [ai.value],
dataList:[ai]
});
map[ai.customer_name] = ai;
} else {
for (var j = 0; j < dest.length; j++) {
var dj = dest[j];
if (dj.customer_name == ai.customer_name) {
dj.data.push(ai.value);
break;
}
}
}
}
console.log(dest,'dest');
this.total_data = dest
var series_data = []
dest.forEach(item => {
series_data.push({
name:item.customer_name,
data:item.data,
type:'line',
label: {
normal: {
show: true,
formatter: function(v) {
// var val = v.data;
return v.value + 'w';
},
color: '#eee',
fontSize:10
}
}
})
})
option = {
colors: ['#3E6FF6','#2BFFDF','#1B2B53','#FFB139','#434348','#7CB5EC','#F7A35C'],
tooltip: {
trigger: 'axis',
//formatter: '{a}<br/> {b} : {c}w',
},
grid:{
left:'5%',
width:'70%'
},
legend: {
data: series_data.name,
textStyle:{
color:'#eee'
}
},
xAxis: {
type: 'category',
data: newArr,
axisLabel: {
color: '#eee'
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
}
}
},
yAxis: {
type: 'value',
axisTick: {
//y轴刻度线
show: true
},
axisLabel: {
color: '#eee'
},
axisLine: {
show: true, // Y轴
lineStyle: {
color: "#ccc",
}
},
},
series: series_data
// {
// name:dest[0].customer_name,
// data: dest[0].data,
// type: 'line',
// label: {
// show: true,
// position: 'top',
// textStyle: { //数值样式
// color: '#eee', //字体颜色
// fontSize: 10 //字体大小
// }
// },
// }
};
var curChart = echarts.init(document.getElementById(chartId));
//echarts.init(document.getElementById(chartId)).setAttribute('echarts_instance', '')
curChart.setOption(option,true, false);
curChart.on('click', function () {
let url = dest[0].dataList[0].field_name
openTab(url, '项目列表');
});
},