Vue中导入echarts图表,如何修改legend图例组件中的name和value值显示位置的修改,
mounted: function () {
//初始化画布大小
/*this.$refs['workshopViewContainer'].style.width = this.width+"px";
this.$refs['workshopViewContainer'].style.height = this.height+"px";*/
this.addListenShapeSelectedEvent();
console.log('mounted', this.workshopId)
this.startLoadRealtimeData();
this.loadWorkshopRealtimeState();
this.realTime();
this.getPicture();
},
mthods:{
getPicture() {
let that = this;
let myChart = Echarts.init(this.$refs.yChart);m
let data = [
{
value: 350,
name: '',
},
{value: 800, name: '运行',number:this.RealTimeData.runningNum, label: { show: false }},
{value: 150, name: '待机',number:this.RealTimeData.standbyNum,label: { show: false } },
{value: 200, name: '停机',number:this.RealTimeData.stopNum,label: { show: false } },
];
myChart.setOption({
// tooltip: {
// trigger: 'item',
// formatter:function () {
// return 'data.number'
//
// }
// },
title: {
text: "设备状态",
// x:'center',
// y: 'center',
left:'15',
top:15,
color: "#333333",
fontSize: 14,
fontWeight:700,
},
legend: {
// orient: '',
left: 'center',
y:'bottom',
icon: "circle",
data: [
{name: '运行',value:800,},
{name: '待机',value:150,},
{name: '停机',value:200,},
// '运行', '待机', '停机'
],
formatter:function(name){
let target;
for(let i=0;i<data.length;i++){
if(data[i].name===name){
target=data[i].number
}
}
let arr=["{a|"+target+"}","{b|"+name+"}"]
return arr.join("\n")
},
textStyle:{
rich:{
a:{
fontSize:24,
color:"#333",
position:'top',
padding:[0,0,-35,-20],
margin:[0,0,0,20],
// padding:10
},
b:{
fontSize:14,
color:"#333"
}
}
}
},
color: ['#ffffff','#98d881', '#ffbe00', '#a4a8af'],
graphic: {
type: 'text',
left:'center',
top:210,
z: 2,
zlevel: 100,
style:{
text:'总设备数',
fontWeight:400,
fontSize:14,
color:'#626366',
textAlign: 'center'
},
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
show: false,
display:null,
position: 'inner',
fontSize:0,
normal: {
position: 'center',
formatter:function (argument) {
var html;
html='280';
return html;
},
textStyle:{
fontSize: 40,
color:'#333333'
}
}
},
minAngle: 15,
startAngle:313,
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
},
},
labelLine: {
show: false
},
selectedOffset: 30,
data: [
{
value: 350,
name: '',
},
{
value: 800, name: '运行',number:140, label: { show: false }
},
{value: 150, name: '待机',number:80,label: { show: false } },
{value: 200, name: '停机',number:300,label: { show: false } },
]
},
]
});
setTimeout(function () {
window.addEventListener("resize", () => {
myChart.resize();
});
}, 500);
},
}