Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter un composant de diagramme circulaire personnalisé (Echarts) dans vue2.0

亚连
Libérer: 2018-06-02 09:21:35
original
3600 Les gens l'ont consulté

Maintenant, je vais partager avec vous une méthode de personnalisation du composant camembert (Echarts) dans vue2.0. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Composant de graphique personnalisé

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>
Copier après la connexion

2. Appel de page

Diagramme.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>
Copier après la connexion

3. Rendus

Ce qui précède est ce que j'ai compilé pour vous, J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Problèmes détectés avec les instructions personnalisées dans Vue.directive

Expliquer en détail le traitement des images JavaScript et la synthèse technologie (tutoriel détaillé)

Comment implémenter la fonction de rafraîchissement de la force arrière côté Web WeChat (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal