1、前提说明:项目使用vue + element UI 搭建的,图表使用axios请求后端数据回显到echart中
2、项目要求一条折线上展示多个字段,开始时看文档这样设置错误代码
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const data = this.dataArr; //接收父组件数据
this.chart.setOption({
tooltip: {
trigger: 'axis'
},
series: [{
name: '金币值',
type: 'line',
data: data.map(function (item) {
return item[1]/10000;
})
},{
name: '服务器ID',
type: 'line',
data: data.map(function (item) {
return item[2];
})
},{
name: '游戏服务器',
type: 'line',
data: data.map(function (item) {
return item[3];
})
}]
})
}
}
这样设置是有问题的,会展示3条折线,但我只需要展示一条数据并且中文字符不会显示,原因在type,但type是必填字段,所以想要处理就不能在series中,需要在tooltip中处理,通过下标确定当前值 正确代码
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const data = this.dataArr;
const that = this;
this.chart.setOption({
title: {
text: '金币曲线(万)'
},
tooltip: {
trigger: 'axis',
formatter (params){
let indexId = params[0].dataIndex;
var htmlStr ='<div>时间:';
htmlStr += params[0].name + '<br/>';//x轴的名称
// //为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #096;"></span>金币值:'+that.dataArr[indexId][1]/10000 + '万<br/>'
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #CC0033;"></span>服务器ID:'+that.dataArr[indexId][2] + '<br/>'
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color: #FF9933;"></span>游戏服务器:'+that.dataArr[indexId][3] + '<br/>';
htmlStr += '</div>';
return htmlStr;
}
},
series: [{
name: '金币值',
type: 'line',
data: data.map(function (item) {
return item[1]/10000;
})
}]
})
}
}