vue.js는 echarts를 사용할 수 있습니다. 1. 콘솔에 "npm install echarts --save" 명령을 입력하여 echarts 종속성을 설치합니다. 2. main.js에서 전역으로 가져오고 사용할 수 있습니다. 차트를 생성하는 echarts.
이 튜토리얼의 운영 환경: windows7 시스템, vue2.9 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
관련 추천: "vue.js Tutorial"
프로젝트가 vue-cli를 사용하여 개발되었기 때문에 최근 작업에 echart를 사용해야 합니다. 인터넷에서 vue로 합성된 vue-echarts를 찾았지만 vue에 지정된 데이터 형식을 사용하고 싶지 않았기 때문에 네이티브 echart를 참조하는 vue 프로젝트의 간단한 데모를 만들었습니다. 구현 과정은 다음과 같습니다. 메소드가 사용됩니다
준비
1.echarts 종속성 설치
콘솔 입력: npm install echarts --save
2.전역 소개
main.js에 도입됨
import echarts from 'echarts' Vue.prototype.$echarts = echarts
차트 만들기
첫 번째 방법
하나에서 vue 파일에 여러 차트를 도입합니다.
Create WelcomePage.vue
<template> <div> <h1>第一种在vue中使用echart的方式</h1> <div class="charts"> <div id="barGraph" style="height: 350px;"></div> </div> <div class="charts"> <div id="pieGraph" style="height: 350px;"></div> </div> </div> </template>
<script> // 引入基本模板,按需加载 let echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入柱状图 require('echarts/lib/chart/pie'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); export default { name: "WelcomePage", data () { return { } }, mounted(){ this.drawBar(); this.drawPie(); }, methods:{ drawBar(){ // 基于dom,初始化echarts实例 let barGraph = echarts.init(document.getElementById('barGraph')); // 绘制图表 barGraph.setOption({ title: { text: '全年产量趋势图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}' }, legend: { left: 'center', data: ['本年', '上年'], bottom:0 }, xAxis: { type: 'category', name: 'x', splitLine: {show: false}, data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, grid: { left: '1%', right: '2%', bottom: '8%', containLabel: true }, yAxis: { type: 'category', name: 'y', splitLine: {show: true}, data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'] }, series: [ { name: '本年', type: 'line', data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56] }, { name: '上年', type: 'line', data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12] }, ] }) }, drawPie(){ let pieGraph = echarts.init(document.getElementById('pieGraph')); pieGraph.setOption({ title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) } } } </script>
구현 효과는 다음과 같습니다.
두 번째 구현 방법(컴포넌트 형식)
부모 구성 요소 아버지를 만듭니다. vue
<div> <h1>{{ msg }}</h1> <p>第二种方式:通过组件的方式进行页面渲染</p> <div class="container" > <bar-graph></bar-graph> </div> <div class="container"> <pie-graph></pie-graph> </div> </div>
<script> // 引入两个子组件 import BarGraph from "./bargraph"; import PieGraph from "./piegraph"; export default { name: "father", components:{ BarGraph, PieGraph, }, data(){ return{ msg: '我是爸爸,想看我的儿子,眼睛请往下移', } } } </script>
자식 만들기 barGraph.vue
<div> <p>{{ msg }}</p> <div class="charts"> <div :id="id" style="min-height: 350px;"></div> </div> </div>
<script> let echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // import echarts from 'echarts' export default { name: "bargraph", // props:['id'], // 第一种接收父亲传过来的值的方式 props: { id: { type: String, default: 'chart' } }, data(){ return { msg: "我是第一个子组件--bar", chart: null, } }, mounted(){ this.drawBar(); }, methods:{ drawBar(){ this.chart = echarts.init(document.getElementById(this.id)); let colors = ['#5793f3', '#d14a61', '#675bba']; this.chart.setOption( { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { right: '20%' }, toolbox: { feature: { dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['蒸发量','降水量','平均温度'] }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '蒸发量', min: 0, max: 250, position: 'right', axisLine: { lineStyle: { color: colors[0] } }, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '降水量', min: 0, max: 250, position: 'right', offset: 80, axisLine: { lineStyle: { color: colors[1] } }, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '温度', min: 0, max: 25, position: 'left', axisLine: { lineStyle: { color: colors[2] } }, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', yAxisIndex: 1, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 2, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ] } ) } } } </script>
구성 요소는 PieGraph.vue
<template> <div> <p>{{ msg }}</p> <div class="charts"> <div :id="id" style="min-height: 350px;"></div> </div> </div> </template>
<script> import echarts from 'echarts' export default { name: "piegraph", props:{ id: { type: String, default: 'pieChart' } }, data(){ return{ msg: '我是第二个子组件--pie', pieChart: null } }, mounted(){ this.drawPie(); }, methods: { drawPie () { this.pieChart = echarts.init(document.getElementById(this.id)); this.pieChart.setOption( { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } ) } } } </script>
를 생성합니다. 효과는 다음과 같이 구현됩니다.
라우팅 파일은 다음과 같습니다.
import WelcomePage from '@/components/WelcomePage' import Father from '@/components/father' import BarGraph from '@/components/bargraph' import PieGraph from '@/components/piegraph' export default new Router({ routes: [ { path: '/', name: 'WelcomePage', component: WelcomePage }, { path: '/father', name: 'father', component: Father, children:[ { path: '/bargraph', name: 'bargraph', component: BarGraph }, { path: '/piegraph', name: 'piegraph', component: PieGraph } ] }, ] })
더 많은 프로그래밍을 원하시면 관련 지식이 있으면 프로그래밍 교육을 방문하세요! !
위 내용은 vue.js에서 echart를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!