찾다

집  >  기사  >  웹 프론트엔드  >  vue.js에서 echart를 사용할 수 있나요?

vue.js에서 echart를 사용할 수 있나요?

青灯夜游
青灯夜游원래의
2020-12-21 11:43:532059검색

vue.js는 echarts를 사용할 수 있습니다. 1. 콘솔에 "npm install echarts --save" 명령을 입력하여 echarts 종속성을 설치합니다. 2. main.js에서 전역으로 가져오고 사용할 수 있습니다. 차트를 생성하는 echarts.

vue.js에서 echart를 사용할 수 있나요?

이 튜토리얼의 운영 환경: 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(&#39;echarts/lib/echarts&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/bar&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/pie&#39;);
 require(&#39;echarts/lib/component/tooltip&#39;);
 require(&#39;echarts/lib/component/title&#39;);


export default {
 name: "WelcomePage",
 data () {
 return { }
 },
 mounted(){
 this.drawBar();
 this.drawPie();
 },
 methods:{
 drawBar(){
  // 基于dom，初始化echarts实例
  let barGraph = echarts.init(document.getElementById(&#39;barGraph&#39;));
  // 绘制图表
  barGraph.setOption({
  title: {
   text: &#39;全年产量趋势图&#39;,
   left: &#39;center&#39;
  },
  tooltip: {
   trigger: &#39;item&#39;,
   formatter: &#39;{a} <br/>{b} : {c}&#39;
  },
  legend: {
   left: &#39;center&#39;,
   data: [&#39;本年&#39;, &#39;上年&#39;],
   bottom:0
  },
  xAxis: {
   type: &#39;category&#39;,
   name: &#39;x&#39;,
   splitLine: {show: false},
   data: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
  },
  grid: {
   left: &#39;1%&#39;,
   right: &#39;2%&#39;,
   bottom: &#39;8%&#39;,
   containLabel: true
  },
  yAxis: {
   type: &#39;category&#39;,
   name: &#39;y&#39;,
   splitLine: {show: true},
   data:[&#39;10%&#39;,&#39;20%&#39;,&#39;30%&#39;,&#39;40%&#39;,&#39;50%&#39;,&#39;60%&#39;,&#39;70%&#39;,&#39;80%&#39;,&#39;90%&#39;,&#39;100%&#39;]
  },
  series: [
   {
   name: &#39;本年&#39;,
   type: &#39;line&#39;,
   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: &#39;上年&#39;,
   type: &#39;line&#39;,
   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(&#39;pieGraph&#39;));
  pieGraph.setOption({
  title : {
   text: &#39;某站点用户访问来源&#39;,
   subtext: &#39;纯属虚构&#39;,
   x:&#39;center&#39;
  },
  tooltip : {
   trigger: &#39;item&#39;,
   formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
   orient: &#39;vertical&#39;,
   left: &#39;left&#39;,
   data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
  },
  series : [
   {
   name: &#39;访问来源&#39;,
   type: &#39;pie&#39;,
   radius : &#39;55%&#39;,
   center: [&#39;50%&#39;, &#39;60%&#39;],
   data:[
    {value:335, name:&#39;直接访问&#39;},
    {value:310, name:&#39;邮件营销&#39;},
    {value:234, name:&#39;联盟广告&#39;},
    {value:135, name:&#39;视频广告&#39;},
    {value:1548, name:&#39;搜索引擎&#39;}
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
    }
   }
   }
  ]
  })
 }
 }
}
</script>

구현 효과는 다음과 같습니다.

vue.js에서 echart를 사용할 수 있나요?

두 번째 구현 방법(컴포넌트 형식)

부모 구성 요소 아버지를 만듭니다. 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: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
  }
 }
 }
</script>

자식 만들기 barGraph.vue

 <div>
 <p>{{ msg }}</p>
 <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
 </div>
 </div>
<script>
 let echarts = require(&#39;echarts/lib/echarts&#39;);
 // 引入柱状图
 require(&#39;echarts/lib/chart/bar&#39;);
 require(&#39;echarts/lib/component/tooltip&#39;);
 require(&#39;echarts/lib/component/title&#39;);

 // import echarts from &#39;echarts&#39;

 export default {
  name: "bargraph",
  // props:[&#39;id&#39;], // 第一种接收父亲传过来的值的方式
  props: {
  id: {
   type: String,
   default: &#39;chart&#39;
  }
  },
  data(){
   return {
   msg: "我是第一个子组件--bar",
   chart: null,
   }
  },
  mounted(){
  this.drawBar();
  },
  methods:{
  drawBar(){
   this.chart = echarts.init(document.getElementById(this.id));
   let colors = [&#39;#5793f3&#39;, &#39;#d14a61&#39;, &#39;#675bba&#39;];
   this.chart.setOption(
   {
    color: colors,

    tooltip: {
    trigger: &#39;axis&#39;,
    axisPointer: {
     type: &#39;cross&#39;
    }
    },
    grid: {
    right: &#39;20%&#39;
    },
    toolbox: {
    feature: {
     dataView: {show: true, readOnly: false},
     restore: {show: true},
     saveAsImage: {show: true}
    }
    },
    legend: {
    data:[&#39;蒸发量&#39;,&#39;降水量&#39;,&#39;平均温度&#39;]
    },
    xAxis: [
    {
     type: &#39;category&#39;,
     axisTick: {
     alignWithLabel: true
     },
     data: [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
    }
    ],
    yAxis: [
    {
     type: &#39;value&#39;,
     name: &#39;蒸发量&#39;,
     min: 0,
     max: 250,
     position: &#39;right&#39;,
     axisLine: {
     lineStyle: {
      color: colors[0]
     }
     },
     axisLabel: {
     formatter: &#39;{value} ml&#39;
     }
    },
    {
     type: &#39;value&#39;,
     name: &#39;降水量&#39;,
     min: 0,
     max: 250,
     position: &#39;right&#39;,
     offset: 80,
     axisLine: {
     lineStyle: {
      color: colors[1]
     }
     },
     axisLabel: {
     formatter: &#39;{value} ml&#39;
     }
    },
    {
     type: &#39;value&#39;,
     name: &#39;温度&#39;,
     min: 0,
     max: 25,
     position: &#39;left&#39;,
     axisLine: {
     lineStyle: {
      color: colors[2]
     }
     },
     axisLabel: {
     formatter: &#39;{value} °C&#39;
     }
    }
    ],
    series: [
    {
     name:&#39;蒸发量&#39;,
     type:&#39;bar&#39;,
     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:&#39;降水量&#39;,
     type:&#39;bar&#39;,
     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:&#39;平均温度&#39;,
     type:&#39;line&#39;,
     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 &#39;echarts&#39;

 export default {
  name: "piegraph",
  props:{
  id: {
   type: String,
   default: &#39;pieChart&#39;
  }
  },
  data(){
   return{
   msg: &#39;我是第二个子组件--pie&#39;,
   pieChart: null
   }
  },
  mounted(){
   this.drawPie();
  },
  methods: {
  drawPie () {
   this.pieChart = echarts.init(document.getElementById(this.id));
   this.pieChart.setOption(
   {
    title : {
    text: &#39;某站点用户访问来源&#39;,
    subtext: &#39;纯属虚构&#39;,
    x:&#39;center&#39;
    },
    tooltip : {
    trigger: &#39;item&#39;,
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    orient: &#39;vertical&#39;,
    left: &#39;left&#39;,
    data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
    },
    series : [
    {
     name: &#39;访问来源&#39;,
     type: &#39;pie&#39;,
     radius : &#39;55%&#39;,
     center: [&#39;50%&#39;, &#39;60%&#39;],
     data:[
     {value:335, name:&#39;直接访问&#39;},
     {value:310, name:&#39;邮件营销&#39;},
     {value:234, name:&#39;联盟广告&#39;},
     {value:135, name:&#39;视频广告&#39;},
     {value:1548, name:&#39;搜索引擎&#39;}
     ],
     itemStyle: {
     emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
     }
     }
    }
    ]
   }
   )
  }
  }
 }
</script>

를 생성합니다. 효과는 다음과 같이 구현됩니다.

vue.js에서 echart를 사용할 수 있나요?

vue.js에서 echart를 사용할 수 있나요?

라우팅 파일은 다음과 같습니다. 

import WelcomePage from &#39;@/components/WelcomePage&#39;
import Father from &#39;@/components/father&#39;

import BarGraph from &#39;@/components/bargraph&#39;
import PieGraph from &#39;@/components/piegraph&#39;

export default new Router({
 routes: [
 {
  path: &#39;/&#39;,
  name: &#39;WelcomePage&#39;,
  component: WelcomePage
 },
 {
  path: &#39;/father&#39;,
  name: &#39;father&#39;,
  component: Father,
  children:[
  {
   path: &#39;/bargraph&#39;,
   name: &#39;bargraph&#39;,
   component: BarGraph
  },
  {
   path: &#39;/piegraph&#39;,
   name: &#39;piegraph&#39;,
   component: PieGraph
  }
  ]
 },
 ]
})

더 많은 프로그래밍을 원하시면 관련 지식이 있으면 프로그래밍 교육을 방문하세요! !

위 내용은 vue.js에서 echart를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

echarts vue.js npm JS
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue에서 CSS를 분리하는 방법다음 기사：Vue에서 CSS를 분리하는 방법

관련 기사

더보기