在项目vue中使用echarts的操作步骤
1.在组件中创建该模块
2.导入echarts
前提是：已经在项目中配置过echarts
在中导入echarts
3.初始化该模块
exportdefault{
name:'Test',//vue该组件名称Test.vue
mounted(){
this.testChart=echartInit('testChart');//初始化该echarts表
/*this.testChart.setOption(this.option);*///如果是写死的数据，可以在这儿setOption()看效果
},
}
4.将data中的option数据返回
在返回的数据（请求的数据）成功后加入setOption();
如果是写死的数据，可以在mounted中直接加入setOption()看结果；
如下为动态数据获取
exportdefault{
data(){
return{
option:{
"grid":{
"height":"67%",
"right":"10%",
"top":"8%",
"width":"83%"
},
"legend":{
"data":['新增','完成','未完成'],
bottom:'5%'
},
"series":[
{
name:'新增',
type:'line',
/*areaStyle:{},*/
smooth:false,
data:[]
},
{
name:'完成',
type:'line',
/*areaStyle:{},*///折线下显示填充色
smooth:false,
data:[]//可以写固定的数据
},
{
name:'未完成',
type:'line',
smooth:false,//折线，false不平滑的折线,true平滑的曲线
data:[]//可以写固定的数据
},
],
"toolbox":{
"emphasis":{
"iconStyle":{
"textAlign":"right",
"textPosition":"left"
}
},
"orient":"vertical",
"right":"2%",
"show":true,
"textStyle":{
"align":"left"
}
},
"tooltip":{
"axisPointer":{
"type":"shadow"
},
"trigger":"axis"
},
"xAxis":{
"axisLine":{
"lineStyle":{
"color":"rgb(0,138,205)"
}
},
"boundaryGap":true,
"data":[],//可以写固定的数据
"splitLine":{
"show":false
},
"splitNumber":1,
"type":"category"
},
"yAxis":{
"min":0,
"splitNumber":8,
"type":"value"
}
},
testChart:{}
}
},
}
5.通过getData()向后台获取数据并返回，将获取的数据返回setOption()
this.testChart.setOption(this.option);
补充知识：vue+echarts踩过的坑
vue+echarts踩过的坑
文字显示居中：可以修改label的padding（只限修改个别地区）设置padding
地图只显示某一部分地区四个省份
用到了geo中regions（用了一整张中国地图，放大这四个地区某个中心点）
geo:{
map:“china”,
mapLocation:{
x:‘center'
},
center:[“115.892151”,“28.676493”],
zoom:4.8,
label:{
normal:{
show:false
},
emphasis:{
show:false
}
},
roam:false,
itemStyle:{
normal:{
areaColor:“#fff”,//地图默认的背景颜色
borderColor:“#fff”,//地图默认的边线颜色,
opacity:0
},
emphasis:{
areaColor:“#fff”,//地图触发地区的背景颜色
}
},
regions:[
{
name:“浙江”,
label:{
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[100,4,4,4]
},
emphasis:{
show:true
},
//label:{
//formatter:'{b}',
//}
},
itemStyle:{
normal:{
areaColor:“#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis:{
areaColor:“orange”,//地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff',
}
}
},
{
name:“江西”,
label:{
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[100,20,4,4]
},
emphasis:{
show:false
}
},
itemStyle:{
normal:{
areaColor:“#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis:{
areaColor:“orange”,//地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
},
{
name:“福建”,
label:{
normal:{
show:true,
fontSize:16,
color:'#fff',
padding:[0,70,0,0]
},
emphasis:{
show:false
}
},
itemStyle:{
normal:{
areaColor:“#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis:{
areaColor:“orange”,//地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
},
{
name:“上海”,
label:{
normal:{
show:true,
fontSize:10,
color:'#fff',
padding:[15,0,0,0]
},
emphasis:{
show:false
}
},
itemStyle:{
normal:{
areaColor:“#1FB2A8”,
borderWidth:4,
borderColor:'#fff',
opacity:1
},
emphasis:{
areaColor:“orange”,//地图触发地区的背景颜色
borderWidth:4,
borderColor:'#fff'
}
}
}
]
},
series:[
{
type:‘map',
coordinateSystem:‘geo',
},
{
type:‘map',
geoIndex:0,
data:datass
}
],
显示问题
formatter:function(params){
//console.log(params)
varres='';
varname='';
for(vari=0;i+datass[i].name+
if(datass[i].value==''){
res=''
}else{
datass[i].value.forEach(element=>{
res+=+element+
});
}
}
}
returnname+res
},
y轴显示百分号
axisLabel:{
formatter:‘{value}%'
}
以上这篇在项目vue中使用echarts的操作步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。