Vue 에서 echarts 시각 화 구성 요 소 를 사용 하 는 방법
1.비계 항목 이 있 는 주 소 를 찾 아 cnpm install echarts 를 실행 하고 echarts 구성 요 소 를 설치 합 니 다.(비계 의 주 소 는 vue 프로젝트 의 주소 입 니 다)
(E:\demo\vuepro)이것 은 제 프로젝트 주소 입 니 다.vuepro 는 프로젝트 이름 입 니 다.
2.필요 에 따라 가 져 오기,열기 속도 가속 화
// echarts
import echarts from "echarts"
//
let echart = require('echarts/lib/echarts')
//
require('echarts/lib/chart/bar')
// title
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')div 의 id 는 echarts 플러그 인 을 연결 하 는 데 사 용 됩 니 다.
<div id="chart" style="width: 50%; height: 400px;">
</div>
// echarts
import echarts from "echarts"
//
let echart = require('echarts/lib/echarts')
//
require('echarts/lib/chart/bar')
// title
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default{
name: 'App',
data(){
return{
chartColumn:null
}
},
methods:{
initData(){
let dt=document.querySelector("#boss")
this.chartColumn=echart.init(dt)
this.chartColumn.setOption(
//Examples
)
}
},
mounted(){
this.initData()
}
}
<template>
<div id="boss" style="width: 500px;height: 500px;">
</div>
</template>
<script>
// echarts
import echarts from "echarts"
//
let echart = require('echarts/lib/echarts')
//
require('echarts/lib/chart/bar')
// title
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default{
name: 'App',
data(){
return{
chartColumn:null
}
},
methods:{
initData(){
let dt=document.querySelector("#boss")
this.chartColumn=echart.init(dt)
this.chartColumn.setOption(
//Examples
)
}
},
mounted(){
this.initData()
}
}
</script>
<style>
</style>
<template>
<div id="boss" style="width: 500px;height: 500px;">
</div>
</template>
<script>
import echarts from "echarts"
//
let echart = require('echarts/lib/echarts')
//
require('echarts/lib/chart/bar')
// title
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default{
name: 'App',
data(){
return{
chartColumn:null
}
},
methods:{
initData(){
let dt=document.querySelector("#boss")
this.chartColumn=echart.init(dt)
this.chartColumn.setOption(
// echarts
{
tooltip: {
trigger: 'axis',
axisPointer: { // Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
}
//
)
}
},
mounted(){
this.initData()
}
}
</script>
<style>
</style>
Vue 가 echarts 시각 화 구성 요 소 를 사용 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue echarts 시각 화 구성 요소 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
