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. ページ呼び出し

3レンダリング

はすべて私が編集したもので、将来的に役立つことを願っています。

関連記事:

Vue.directive のカスタム命令で問題が見つかった

JavaScript の画像処理と合成技術を詳しく説明する (詳細なチュートリアル)

WeChat Web 側でバック フォース リフレッシュを実装する方法関数 (詳細なチュートリアル)

以上がvue2.0 でカスタム円グラフ (Echarts) コンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。