美文网首页Vue 组件库
Vue2.5 + e-charts 封装一个饼图组件

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

作者: 阿畅_ | 来源:发表于2018-12-24 19:30 被阅读50次
    • 先解释一下为什么不用 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 上,做一个自己的组件库,如果你感兴趣的话,请关注我.

    相关文章

      网友评论

        本文标题:Vue2.5 + e-charts 封装一个饼图组件

        本文链接:https://www.haomeiwen.com/subject/ybxtlqtx.html