Echarts——饼状图

北安栖梧

于 2022-11-20 16:13:24 发布

阅读量411

点赞数

分类专栏：开发经验文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_44973583/article/details/127950272

版权

开发经验专栏收录该内容

9 篇文章 2 订阅

订阅专栏

<template>

  <div class="home">

    <!-- 根据传递的id显示不同的dom节点，这是一个饼形图 -->

    <div :id="id" style="width: 500px;height: 300px;" v-if="id=='myChart'"></div>

    <div :id="id" style="width: 500px;height: 300px;" v-if="id=='myChartTwo'"></div>

    <div :id="id" style="width: 500px;height: 300px;" v-if="id=='myChartThree'"></div>

    <div :id="id" style="width: 500px;height: 300px;" v-if="id=='myChartFour'"></div>

  </div>

</template>




<script>



export default {



 props:{

  opinion:{

          required:true,

      },

  opinionData:{

      required:true,

  },

  title:{

      required:true,

  },

  id:{  required:true,},

  echarsOptionsName:{required:false,}

 },

 watch:{

  opinion:{

        handler(newValue,oldValue){

          // opinion变化才会触发

          this.$nextTick(function () {

      this.drawPie(this.id);

  })



          },

          deep:true,//深度监听

          immediate:true, //打开页面立即监听一次

      },

 },

  data(){return{

      charts: "",

  }},

  created(){

  },

  methods:{

    drawPie(id) {

      //确定一个挂载点

      this.charts = this.$echarts.init(document.getElementById(id));



      this.charts.setOption({

        //标题

        title: {

                        text: this.title,

                        x: 'left',

                        y:'top',

                    },

        //提示组件，

        tooltip: {

          trigger: "item",

        },

        //颜色组件

        legend: {

          orient: "vertical",

          x: "left",

          y:'bottom',

          data: this.opinion,

        },

        //饼状图

        series: [

          {

            name: this.title,

            type: "pie",

            avoidLabelOverlap: true,

            center: [284.97, 160.71],

            label: {

              normal: {

                position: "outside",

                show : true,

              },

              emphasis: {

                show: true,

                textStyle: {

                  fontSize: "30",

                  fontWeight: "blod",

                },

              },

         



            },

            //提示组件，item主要用于散点图和饼形图，params参数在组件的移入触发，

            tooltip:{

                trigger:'item',

                formatter:(parmas)=>{

                  return this.title+'<br/>'+this.echarsOptionsName[parmas.dataIndex]+':'+'&nbsp'+parmas.data.value

                }



              },

            data: this.opinionData,

          },

        ],

      });

    },



  },

   //调用

   mounted() {

    // console.log(this.opinion)

    //   console.log(this.opinionData)

   



},

}

</script>