美文网首页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