echarts饼图案例

  1. 效果图
    饼图
  2. vue饼图组件
<template>
    <div id="pie"></div>
</template>

<script>
    import echarts from "echarts";
    import "echarts/lib/chart/pie";
    import "echarts/lib/chart/line";
    import "echarts/lib/chart/bar";
    import "echarts/lib/chart/map";
    import "echarts/lib/chart/effectScatter";
    import "echarts/lib/chart/scatter";
    import "echarts/lib/chart/lines";
    import "echarts/lib/chart/pictorialBar";
    import "echarts/lib/component/markPoint";
    import "echarts/lib/component/geo";
    export default {
        name: "myPie",
        props:{
            pieData:{
                type:Array,
                required:true//必须
            }
        },
        data() {
            return {};
        },
        mounted() {
            this.pie = echarts.init(document.getElementById("pie"));
            this.initPie();
        },
        methods:{
            initPie(){
                let data = this.pieData;
                console.log('饼图数据',data);
                let legendData = [];
                data.forEach(item=>{
                    legendData.push(item.name);
                });
                const option = {
                    color: ['#36A7FE', '#FB765E','#3652e6','#4ea3fa','#19dbff','#ffd12b','#fca800','#fa785f','#c654df','#01ce8d','#ffa922','#46D44F','#76DCCE'],
                    title: {
                        text:'各景点客流占比',
                        x: "25",
                        y: "10",
                        textStyle: {
                            fontWeight: "700",
                            fontSize: 20,
                            color: "#444",
                        },
                    },
                    legend: {
                        data: legendData,
                        orient: 'horizontal',
                        bottom: 0,
                        icon: 'circle',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (val) {
                            return `<div style="text-align:left; position:relative">${val.name}</div>
          <span style="display:inline-block; width:10px;height:10px;background:
            ${val.color};margin:0 10px 0 0; border-radius:3px">  </span>
             ${val.value}人次 (${val.percent}%`
                        },
                        // formatter: '{b} <br/>{c} 人次({d}%)',
                        textStyle: {
                            fontSize: 16,
                            color: '#666'
                        },
                        backgroundColor: '#f1f1f1',
                        borderColor: '#f2f2f2',
                        borderWidth: 1,
                        borderRadius: 5,
                        padding: [10, 20, 10, 20]//上右下左
                    },
                    series: [
                        {
                            // name: '各景点客流占比',
                            name:'',
                            type: 'pie',
                            radius: ['50%', '65%'],
                            hoverOffset: 30,
                            // avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '25',
                                    formatter: '{b}:{d}%',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            center: ['50%', '50%'],
                            data: data
                        }
                    ]
                };
                this.pie.setOption(option);
            }
        }
    }
</script>

<style scoped>
</style>

  1. 页面引用
<my-pie :key="myPie" style="height: 500px;" :pieData="pieData"></my-pie>

import MyPie from "../components/echarts/myPie";
export default {
    components: { MyPie},
  data () {
    return {
        myPie:1,
        pieData: [
        {name:'景点1',value:200},
        {name:'景点2',value:300},
        {name:'景点3',value:400},
        {name:'景点4',value:500},
        {name:'景点5',value:600},
        {name:'景点6',value:700},
        {name:'景点7',value:800}
        ]
      }
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts中配置饼图的参数包括值域设置和图例设置。值域设置包括设置饼状图的大小、位置和样式,以及设置鼠标放到扇形上时的样式和标签显示内容。图例设置包括设置图例的布局方式、位置、图形大小和颜色,以及设置图例之间的间隔和背景颜色。 值域设置的示例代码如下: series: [ { name: '生源地', type: 'pie', radius: ['30%', '60%'], center: ['50%', '50%'], data: [{value:335, name:'北京'}, {value:310, name:'上海'}, {value:234, name:'广州'}, {value:135, name:'深圳'}, {value:148, name:'郑州'}], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(30, 144, 255, 0.5)' } }, labelLine: { normal: { show: false } }, label: { normal: { position: 'inner', formatter: '{c}' } } } ] 图例设置的示例代码如下: legend: { orient: 'vertical', x: 'left', y: 'center', itemWidth: 24, itemHeight: 18, textStyle: { color: '#666' }, itemGap: 30, backgroundColor: '#eee', data: ['北京','上海','广州','深圳','郑州'] } 以上是配置echarts饼图的参数的示例代码。根据需要进行相应的修改即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Echarts饼状图属性设置大全](https://blog.csdn.net/sleepwalker_1992/article/details/82532210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [echarts饼图 配置,及案例](https://blog.csdn.net/qq_41973526/article/details/125180528)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值