프로젝트 vue 에서 echarts 를 사용 하 는 작업 절차

1.구성 요소 에 이 모듈 만 들 기

<template>
 <div id = "testChart"></div>
</template>

2.echarts 가 져 오기
전제:프로젝트 에 echarts 를 설정 한 적 이 있 습 니 다.
에서 echarts 가 져 오기

<script>
import {echartInit} from "../../../utils/echartUtils"
</script>

3.이 모듈 초기 화

 export default {
  name: 'Test',  //vue     Test.vue
  mounted() {
   this.testChart = echartInit('testChart');  //    echarts 
   /*this.testChart.setOption(this.option); */  //         ，     setOption()   
  },
}

4.data 의 option 데 이 터 를 되 돌려 줍 니 다.
되 돌아 오 는 데이터(요청 한 데이터)에 성공 한 후 setOption()을 추가 합 니 다.
죽은 데 이 터 를 쓰 는 경우 mounted 에 setOption()을 직접 넣 어 결 과 를 볼 수 있 습 니 다.
다음 동적 데이터 가 져 오기

export default{
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)
var res='';
var name='';
for (var i = 0; i < datass.length; i++) {
if (datass[i].name == params.name) {
name=<p class="big">+datass[i].name+</p>
if(datass[i].value==''){
res=''
}else{
datass[i].value.forEach(element => {
res+=<p class="small">+element+</p>
});
}
}
}
return name+res
},
y      
axisLabel: {
formatter: ‘{value}%'
}

이상 프로젝트 vue 에서 echarts 를 사용 하 는 작업 절 차 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.