Vue2.5 + e-charts 封装一个饼图组件

• 先解释一下为什么不用 v-charts，原因有两点（我只说一下我个人的观点）

  1. 我觉得只写官方提供的组件是比 e-charts 相对来说要用一些，当我觉得可控制性没有 e-charts 那么高，并且它只提供了一些基础的 API ，其它的 API 还是要看 e-charts ，所以从学习的角度来说，还是学 e-charts 好一些。
  2. 就是个人想法，我觉得你的使用场景对于我来说不是很友好，扩展性不高，所以就自己封装了一个组件。

• 分享一下组件源码:

    <template>
        <div class="pie-container">
            <div ref="pcPie" :style="{width: chartWidth,height: chartHeight}"> 
           </div>
        </div>
    </template>
    <script>
      import charts from 'echarts'
       export default {
          name: 'pc-pie',
           props: {
          chartWidth: {
            type: [String, Number],
            default: '400px'
          },
          chartHeight: {
            type: [String, Number],
            default: '400px'
          },
          title: Object,
          legend: Object,
          chartData: [Object, Array],
          name: String,
          chartColor: {
            type: Array,
            default: () => []
          }
        },
        mounted() {
          this.initChart()
        },
        methods: {
          initChart() {
            let datas = [] 
            if (Object.prototype.toString.call(this.chartData)=='[object Array]') {
              datas = this.chartData
            } else {
              const keyArray = this.chartData.columns
              this.chartData.rows.forEach(item => {
              datas.push({
                 value: item[keyArray[1]],
                 name: item[keyArray[0]]
                })
              })
            }
            const initCharts = charts.init(this.$refs.pcPie)
            const chartColor = this.chartColor.length === 0 ? null : this.chartColor
        
            const options = {
              tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
              },
              title: this.title,
              legend: this.legend,
              series:
                {
                  name: this.name,
                  type: 'pie',
                  radius : '55%',
                  data: datas,       
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    color: chartColor
                  }
               }
            }
        
            initCharts.setOption(options)
          }
        },
        watch: {
          chartData: {
            handler(){
              this.initChart()
            },
            deep: true
         }
        }
      }
    </script>
  

• 使用方式这里传递数据支持两种方式: 1. echarts 的方式，手动写 value 和 name 2. 支持 v-charts 的方式，这种方式对做前端来说比较友好一点

 <template>
  <div>
    <pie-charts :title="title" :chartData="data" name="数据名称" :legend="legend"></pie-charts>
  </div>
</template>
<style lang="less"></style>
<script>
  import pieCharts from './pie-charts.vue'
  export default {
    data() {
      return {
        // 也可以支持跟 v-charts 类似的方式传数据
        data:{
          columns: [ '名称' ,'数据' ],
          rows: [
            {'名称':'直接访问', '数据':335,},
            {'名称':'邮件营销', '数据':310,},
            {'名称':'联盟广告', '数据':234,},
            {'名称':'视频广告', '数据':135,},
            {'名称':'搜索引擎', '数据':1548,},
          ]
        },
        // 这种方式也支持
        // data:[
        //   {value:335, name:'直接访问'},
        //   {value:310, name:'邮件营销'},
        //   {value:234, name:'联盟广告'},
        //   {value:135, name:'视频广告'},
        //   {value:1548, name:'搜索引擎'}
        // ],
        title: {
          text: '默认的标题',
          x: 'center'
        },
        // 图例说明
        legend: {
          orient: 'vertical',
          left: 'left',
        },
      }
    },
    components: {
      pieCharts
    },
  }
</script>

• 目前可能不支持特别复杂的场景（但大部分场景还是可以用的），后面我也会做更新

后面我有时间会持续更新一些组件，到时候也会发到 GitHub 上，做一个自己的组件库，如果你感兴趣的话，请关注我.