Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie eine benutzerdefinierte Kreisdiagrammkomponente (Echarts) in vue2.0

亚连
Freigeben: 2018-06-02 09:21:35
Original
3599 Leute haben es durchsucht

Jetzt werde ich Ihnen eine Methode zum Anpassen der Kreisdiagrammkomponente (Echarts) in vue2.0 vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

1. Benutzerdefinierte Diagrammkomponente

Echarts.vue

rrree

2. Seitenaufruf

Diagram.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>
Nach dem Login kopieren

3. Renderings

Das habe ich hoffentlich für alle zusammengestellt in Zukunft besser sein.

Verwandte Artikel:

Probleme mit benutzerdefinierten Anweisungen in Vue.directive gefunden

Erläutern Sie die JavaScript-Bildverarbeitung im Detail und die Synthese Technologie (ausführliches Tutorial)

So implementieren Sie die Back-Force-Refresh-Funktion auf der WeChat-Webseite (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine benutzerdefinierte Kreisdiagrammkomponente (Echarts) in vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage