vue echarts 饼形图

最新推荐文章于 2023-12-20 18:46:03 发布

前端小白123

最新推荐文章于 2023-12-20 18:46:03 发布

阅读量354

点赞数

分类专栏： Vue 文章标签： vue echarts

本文链接：https://blog.csdn.net/zhenmingyue123/article/details/102725264

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<style>
  @import "../../css/style.css";
</style>
<style scoped>
  @import "../../css/vue_half_pie.css";
</style>
<template>

    <div class="half_pie">
      <chart class="pie"  :options="half_pie"></chart>
      <div class="halfBtn">
        <button @click="RoseType">Rose Type</button>
        <button @click="LineChart">Line Chart</button>
      </div>
    </div>

</template>



<script>
  import eCharts from 'vue-echarts/components/ECharts'
    export default {
        data() {
            return {
              style: {}
            }
        },
      created() {

        this.style = {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false
            },
            color: 'rgba(0,0,0,0)',
            borderWidth: 0
          },
          emphasis: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 0
          }

        };
      },
      methods:{
        RoseType(){
          this.$router.push({path:'/rose_pie'})
        },
        LineChart(){
            this.$router.push({path:'/single_line'})
        }
      },

      computed:{

        half_pie(){
          return{
            backgroundColor: '#B5C3BD',
            tooltip : {
              show: true,
              formatter: "{b} : {c}"
            },

            legend: {
              top: "8%",
              x: 'left',
              left: "4%",
              itemWidth:30,
              itemHeight:20,
              data: ['霸王龙','三角龙','弯龙' ,'剑龙'],
              textStyle: {
                color: '#fff',
                align:'left',
                x: 'left',
                textAlign:'top'
              },
              orient: "horizontal",

            },
            grid: {
              right:'0%',
              top: '5%',
              left: '0%',
              bottom: '0%',
              containLabel: false,
            },
            series: [
              {
                name: '霸王龙',
                type: 'pie',
                radius: ['65%', '75%'],
                itemStyle: {
                  normal:{
                    color: '#8936F8'
                  }
                },
                data:
                  [
                  {
                  value: 7645434,
                  name: '霸王龙'
                }, {
                  value: 3612343,
                  name: '总数',
                  tooltip: {
                    show: false
                  },
                  itemStyle:  this.style
                }

                ]
              }, {
                name: '三角龙',
                type: 'pie',
                clockWise: true,
                radius: ['50%', '60%'],
                itemStyle: {
                  normal:{
                    color: '#9957F1'
                  }

                },
                data: [{
                  value: 2632321,
                  name: '三角龙'
                }, {
                  value: 2212343,
                  name: '总数',
                  tooltip: {
                    show: false
                  },
                  itemStyle:  this.style
                }]
              }, {
                name: '弯龙',
                type: 'pie',
                radius: ['35%', '45%'],
                itemStyle: {
                  normal:{
                    color: '#C4A2F3'
                  }

                },

                data: [{
                  value: 1823323,
                  name: '弯龙'
                }, {
                  value: 1812343,
                  name: '总数',
                  tooltip: {
                    show: false
                  },
                  itemStyle:  this.style
                }]
              },
              {
                name: '剑龙',
                type: 'pie',
                clockWise: true,

                radius: ['20%', '30%'],
                itemStyle: {
                  normal:{
                    color: '#E2D6F3'
                  }

                },
                data: [ {
                  value: 1342221,
                  name: '剑龙'
                },{
                  value:1912343,
                  name: '总数',
                  tooltip: {
                    show: false
                  },
                  itemStyle:  this.style
                }

                ]
              }
            ]
          };
        }

      }
    }

</script>

在这里插入图片描述