vue.js 는 어떻게 echarts 를 구성 요소 로 봉 하여 원 키 로 사용 하 는 지 상세 하 게 설명 합 니 다.
본 고 는 vue.js 가 echarts 를 구성 요소 원 키 로 봉 하여 사용 하 는 것 에 관 한 내용 을 소개 하고 참고 학습 을 제공 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
설명 하 다.
프로젝트 를 할 때 데 이 터 를 더욱 직관 적 으로 보 여주 기 위해 도표 와 관련 된 컨트롤 을 사용 합 니 다.도표 컨트롤 은 처음에 ECharts 라 는 오픈 소스 프로젝트 를 생각 합 니 다.iview,element-ui 등 구성 요소 들 이 사용 하 는 것 처럼 편리 하지 않 고 작은 커 브 를 돌아 야 합 니 다.그림 의 편 의 를 위해 ECharts 를 한 층 포장 하 였 습 니 다.
컨트롤 데모
컨트롤 사용
개요
문서.
props
속성
설명 하 다.
유형
_id
도표 의 유일한 표 지 는 id 가 중복 되면 오 류 를 보고 합 니 다.
String
_titleText
도표 제목
String
_xText
x 축 설명
String
_yText
y 축 설명
String
_chartData
도표 데이터
Array
_type
도표 유형,세 가지 제공(LineAndBar/LineOrBar/Pie)
호출 예시
<chart
:_id="'testCharts'"
:_titleText="' '"
:_xText="' '"
:_yText="' '"
:_chartData="chartData"
:_type="'Pie'"></chart>
// [[" 1",10],[" 2",20]]
실현 방식렌 더 링 할 dom 만 들 기
<template>
<div :id="_id" class="chart"></div>
</template>
함수 그리 기
function drawPie(chartData,id,titleText,xText,yText) {
var chart = echarts.init(document.getElementById(id))
var xAxisData = chartData.map(function (item) {return item[0]})
var pieData = []
chartData.forEach((v,i)=>{
pieData.push({
name:v[0],
value:v[1]
})
})
chart.setOption({
title : {
text: titleText,
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: xAxisData
},
series : [
{
name: xText,
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
마 운 트 종료,데이터 원본 변경 시 다시 그리 기
watch:{
_chartData(val){
switch (this._type){
case "LineAndBar":
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(val,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
break
}
}
},
mounted() {
switch (this._type){
case "LineAndBar":
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "LineOrBar":
drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
case "Pie":
drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
default:
drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
break
}
}
총결산이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.