Vue encapsulates a pie chart, dashboard, and status chart

The previous note encapsulates the column chart and line chart
This is a wrapper pie chart, dashboard, and state chart
First, pie chart:

<template>
  <div>
    <div
     ref='piechart'
     class='echartbox'>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// Import pie components
require('echarts/lib/chart/pie')
// Introduction of prompt box and title Component
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  name: 'Pie',
  props: {
    // texttitle: String,
    // legenddata: Array,
    // seriesdata: Array,
    textlink: {
      type: String,
      required: false,
      default: ''  
    },
    clicklink: {
      type: Boolean,
      required: false,
      default: false
    },
    piedata: Object
  },
  data () {
    return {
      link: this.textlink,
      click_link: this.clicklink,
      title: '',
      legend_data: [],
      series_data: []
    }
  },
  watch: {
    piedata (val) {
      this.title = val.title
      this.legend_data = val.legend_data
      this.series_data = val.series_data
      this.drawPie()
    }
  },
  mounted () {
    // this.drawPie()
  },
  methods: {
    drawPie () {
      let myCharts = echarts.init(this.$refs.piechart)
      myCharts.setOption({
        color: ['#83d0d5', '#f1cb48', '#188ae2', '#E8830B', '#7460ae', '#fc4b6c', '#31ce77', '#eae0bc', '#e732cb', '#9dce8a'],
        title: {
          text: this.title,
          left: '35',
          top: '20',
          link: this.link,
          textStyle: {
            color: '#B6B6B6'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: this.legend_data,
          textStyle: {
            color: '#B6B6B6'
          }
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: '55%',
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            data: this.series_data,
            label: {
              normal: {
                formatter: '{c}'
              }
            }
          }
        ]
      })
      myCharts.on('click', this.clickEchats)
    },
    clickEchats (param) {
      console.log(param)
      if (this.click_link) {
        this.click_link = 'https://www.baidu.com/'
        window.location.href = this.click_link
      }
    }
  }
}
</script>

Note:
1. There is no axis data in the pie chart. The parameters returned by the seat background are usually three, title, legend_data,series, we put them together directly in piedata and pass them to the child components. Apart from the fact that the parent component can't see the redundancy when passing parameters together, there is another important reason. We only need to monitor the changes of piedata in the child components, and then we will draw the chart again, or we need to monitor the three parameters
2. Other default values are the same as bar chart, so there is no need to waste words. The pie chart is not adaptive, because the size difference is not much
3. The pie chart adds a click function, that is, clicking the part of the pie chart will jump, but not all pie charts will jump, so a Boolean value is set, which is false by default, false by default if no value is passed, and you can't click. If you pass a value, you can click if you pass a true value.

      myCharts.on('click', this.clickEchats)
    },
    clickEchats (param) {
      console.log(param)
      if (this.click_link) {
        this.click_link = 'https://www.baidu.com/'
        window.location.href = this.click_link
      }
    }
  }

Add a click event to echarts. If the value of click is true, a jump will be implemented.

Posted on Fri, 31 Jan 2020 07:09:02 -0800 by snidog