Echarts饼图实现圆形柱图

一、代码简介

本次主要是在Vue web项目中，利用Echarts中的饼图组件实现圆形柱状图

二、功能预览

三、示例代码

<template>
  <div id="echartsPie" style="width: 450px;height: 450px"></div>
</template>

<script>
  import Echarts from 'echarts'//导入Echarts组件

  export default {
    name: "echartsPie",
    data() {
      return {
        chart: null
      }
    },
    methods: {
      echartsPieInit(){
        // 初始化echarts实例
        this.chart = Echarts.init(document.getElementById('echartsPie'));

        this.chart.setOption({ // 通过setOption来生成饼图
          tooltip: {//提示框组件
            show: true,
            //触发类型[item-数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用]
            trigger: 'item',
            formatter: "{a}:{c}({d}%)"//提示框格式器。
            //饼图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
          },
          series: [//系列列表。每个系列通过 type 决定自己的图表类型
            {
              name:'A',//系列名称
              type:'pie',//饼图
              hoverAnimation: false,//是否开启hover(悬停)在扇区上的放大动画效果
              radius: ['30%', '40%'],//饼图的半径,第一项是内半径，第二项是外半径
              labelLine: {//标签的视觉引导线
                normal: {
                  show: false
                }
              },
              data:[//系列中的数据内容数组
                {
                  value:65,
                  itemStyle:{
                    normal:{
                      color:'#00FFFF'//柱图显示颜色
                    }
                  }
                },
                {
                  value:35,
                  itemStyle:{
                    normal:{
                      color:'RGBA(0,186,255,0)'//柱图透明色
                    }
                  }
                }
              ]
            },
            {
              name:'B',
              type: 'pie',
              hoverAnimation: false,
              radius: ['50%', '60%'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {
                  value:50,
                  itemStyle:{
                    normal:{
                      color:'#00FFFF'
                    }
                  }
                },
                {
                  value:50,
                  itemStyle:{
                    normal:{
                      color:'RGBA(0,186,255,0)'
                    }
                  }
                }
              ]
            },
            {
              name:'C',
              type:'pie',
              hoverAnimation: false,
              radius:['70%','80%'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {
                  value:60,
                  itemStyle:{
                    normal:{
                      color:'#00FFFF'
                    }
                  }
                },
                {
                  value:40,
                  itemStyle:{
                    normal:{
                      color:'RGBA(0,186,255,0)'
                    }
                  }
                }
              ]
            },
            {
              name:'D',
              type:'pie',
              hoverAnimation: false,
              radius:['90%','100%'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {
                  value:70,
                  itemStyle:{
                    normal:{
                      color:'#00FFFF'
                    }
                  }
                },
                {
                  value:30,
                  itemStyle:{
                    normal:{
                      color:'RGBA(0,186,255,0)'
                    }
                  }
                }
              ]
            }
          ]
        })
      }
    },
    mounted() {
      this.$nextTick(function () {
        this.echartsPieInit()
      })
    }
  }
</script>

<style scoped>

</style>

四、附录

在Vue项目中，可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

另外【import Echarts from 'echarts'】导入Echarts组件可以用以下代码代替

var echarts = require('echarts');