vue2.0에서 사용자 정의 원형 차트(Echarts) 구성 요소를 구현하는 방법

이제 vue2.0에서 원형 차트(Echarts) 구성 요소를 사용자 정의하는 방법을 공유하겠습니다. 참고할 만한 가치가 있고 모든 분들께 도움이 되기를 바랍니다.

1. 사용자 정의 차트 구성 요소

Echarts.vue

<!-- 自定义 echart 组件 -->
<template>
 <p>
 <!-- echart表格 -->
 <p id="myChart" :style="echartStyle"></p>
 </p>
</template>
 
<script>
 export default {
 props: {
  // 样式
  echartStyle: {
  type: Object,
  default(){
   return {}
  }
  },
  // 标题文本
  titleText: {
  type: String,
  default: &#39;&#39;
  },
  // 提示框键名
  tooltipFormatter: {
  type: String,
  default: &#39;&#39;
  },
  // 扇形区域名称
  opinion: {
  type: Array,
  default(){
   return []
  }
  },
  // 提示框标题
  seriesName: {
  type: String,
  default: &#39;&#39;
  },
  // 扇形区域数据
  opinionData: {
  type: Array,
  default(){
   return []
  }
  },
 },
 data(){
  return {
  //
  }
 },
 mounted(){
  this.$nextTick(function() {
  this.drawPie(&#39;myChart&#39;)
  })
 },
 methods: {
  // 监听扇形图点击
  eConsole(param) {
  // 向父组件传值
  this.$emit("currentEchartData",param.name);
  },
  // 绘制饼状图
  drawPie(id){
  this.charts = this.$echarts.init(document.getElementById(id));
  this.charts.on("click", this.eConsole);
  this.charts.setOption({
   title: {
   text: this.titleText, // 标题文本
   left: &#39;center&#39;
   },
   tooltip : {
   trigger: &#39;item&#39;,
   formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
   },
   legend: {
   bottom: 20,
   left: &#39;center&#39;,
   data: this.opinion // 扇形区域名称
   },
   series : [
   {
    name:this.seriesName, // 提示框标题
    type: &#39;pie&#39;,
    radius : &#39;65%&#39;,
    center: [&#39;50%&#39;, &#39;50%&#39;],
    selectedMode: &#39;single&#39;,
    data:this.opinionData, // 扇形区域数据
    itemStyle: {
    emphasis: {
     shadowBlur: 10,
     shadowOffsetX: 0,
     shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
    }
    }
   }
   ]
  })
  }
 }
 }
</script>
 
<style lang="less" scoped>
 #myChart{
 width: 100%;
 }
</style>

2. 페이지 호출

Diagram.vue

<!-- 图表 -->
<template>
 <p>
 <!-- 标题栏 -->
 <mt-header title="图表">
  <router-link to="/" slot="left">
  <mt-button icon="back">返回</mt-button>
  </router-link>
 </mt-header>
 <!-- 内容 -->
 <m-echarts
  :echartStyle="s"
  :titleText="a"
  :tooltipFormatter="b"
  :opinion="c"
  :seriesName="d"
  :opinionData="e"
  v-on:currentEchartData="getEchartData"
 ></m-echarts>
 </p>
</template>
 
<script>
 import mEcharts from &#39;../components/Echarts&#39;
 
 export default {
 name: &#39;Diagram&#39;,
 components: {
  mEcharts
 },
 data(){
  return {
  a:&#39;水果销售统计&#39;,
  b:&#39;销售数量&#39;,
  c:[&#39;香蕉&#39;,&#39;苹果&#39;,&#39;橘子&#39;],
  d:&#39;销售统计&#39;,
  e:[
   {value:3, name:&#39;香蕉&#39;},
   {value:3, name:&#39;苹果&#39;},
   {value:3, name:&#39;橘子&#39;}
   ],
  s: {
   height: &#39;&#39;
  }
  }
 },
 created(){
  // 获取屏幕高度
  this.s.height = document.documentElement.clientHeight - 44 + &#39;px&#39;;
 },
 methods: {
  getEchartData(val){
  console.log(val);
  }
 }
 }
</script>
 
<style lang="less" scoped>
 //
</style>

3 . 렌더링

은 제가 여러분을 위해 편집한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Vue.directive에서 사용자 정의 명령 관련 문제 발견

JavaScript 이미지 처리 및 합성 기술에 대해 자세히 설명(자세한 튜토리얼)

WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법 기능(자세한 튜토리얼)

위 내용은 vue2.0에서 사용자 정의 원형 차트(Echarts) 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!