美文网首页技术论剑,崛起江湖
如何在Vue.js中使用echarts创建饼图

如何在Vue.js中使用echarts创建饼图

作者: 游海东 | 来源:发表于2019-11-29 13:05 被阅读0次

    1. 功能场景

    在vue.js中,使用echarts组件,创建一个饼图,并且获取饼图的数据和属性

    2. 技术支持

    • vue.js
    • element
    • echarts
    • webpack

    3. 实现源码

    3.1 饼图组件

    <template>
      <el-row :gutter="20">
        <el-col :span="24">
          <div id="pie_chart"></div>
        </el-col>
      </el-row>
    </template>
    
    <script>
      import echarts from 'echarts'
      export default {
        data() {
          return {
    
          }
        },
        mounted() {
          this.buildPie()
        },
        methods: {
          buildPie() {
            let pie = echarts.init(document.getElementById('pie_chart'))
            let data = this.buildData()
            let option = {
              backgroundColor: '#ddd',
              title: {
                text: '销售量统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}  {c} ({d}%)"
              },
              legend: {
                bottom: 10,
                left: 'center',
                data: data.labels
              },
              series: [{
                name: '星期',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: data.values,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            }
    
            pie.setOption(option)
            pie.on('click', function(params) {
              console.log(params.name, params.value, params.percent, params.seriesName, params.seriesType)
            })
          },
          buildData() {
            let labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            let values = []
            for (let i = 0; i < labels.length; i++) {
              values.push({
                value: parseInt(Math.random() * 10000),
                name: labels[i],
                color: this.randomColor()
              })
            }
    
            return {
              labels,
              values
            }
          },
          randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
            return color;
          }
        }
      }
    </script>
    
    <style scoped>
      #pie_chart {
        width: 800px;
        height: 800px;
      }
    </style>
    
    

    3.2 index.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App'
    import router from './router'
    import echarts from 'echarts'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    Vue.use(echarts)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    3.3 路由配置

    import Vue from 'vue'
    import Router from 'vue-router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import Pie from '@/components/charts/pie'
    
    Vue.use(Router)
    Vue.use(ElementUI)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Pie',
          component: Pie
        }
      ]
    })
    
    

    4. 源码说明

    4.1 安装echarts

    npm install echarts
    

    4.2 导入echarts

    import echarts from 'echarts'
    

    4.3 创建饼图容器

    <div id="pie_chart"></div>
    

    4.4 初始化图形数据

    buildData() {
            let labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            let values = []
            for (let i = 0; i < labels.length; i++) {
              values.push({
                value: parseInt(Math.random() * 10000),
                name: labels[i],
                color: this.randomColor()
              })
            }
    
            return {
              labels,
              values
            }
          }
    

    5. 效果预览

    饼图 点击饼图打印结果

    相关文章

      网友评论

        本文标题:如何在Vue.js中使用echarts创建饼图

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