Echarts学习扇形图之环形图

Echarts学习扇形图之环形图

(声明:本教程仅供本人学习使用,如有人使用该技术触犯法律与本人无关)

function show_pie(x, data1) {
	// x 为array形式如同python的列表为 “所有数据的列表形式”
	// data1 如:
	// [{'name':【x中对应的值】, 'value': 【真实对应的值】},{'name':【x中对应的值】, 
	// 'value': 【真实对应的值】},{'name':【x中对应的值】, 'value': 【真实对应的值】}, 
	// {'name':【x中对应的值】, 'value': 【真实对应的值】}]
	
    // 路径配置
    require.config({
        paths: {
            echarts: '/static/js/echarts-2.2.7/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
        ],
        function (ec) {
            // 基于准备好的dom,初始化echarts图表
            var myPieChart = ec.init(document.getElementById('pieChart'));
            option = {
                backgroundColor: '#fff',
                legend: {
                    x: 'left',
                    y: 'bottom',
                    data: x,
                },
                calculable:false,
                series: [{
                    name: ' ',
                    type: 'pie',
                    radius: ['20%', '45%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b}: ({d}%)',
                            },
                            labelLine: {
                                show: true
                            },

                            borderWidth: 5,
                            borderColor: '#fff',
                        }
                    },

                    data: data1
                }]
            };
            // 为echarts对象加载数据
            myPieChart.setOption(option);
        }
    );
}

如要显示扇形图的外边框,修改参数calculable:false 改为true
如要显示扇形图的外边框,修改参数calculable:false 改为true

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts环形是一种常用的数据可视化表类型,用于展示数据的占比关系。它通常由一个圆环和多个扇形组成,扇形的大小表示数据的比例。以下是创建Echarts环形的步骤: 1. 首先,导入Echarts库并创建一个容器来放置表。可以使用HTML中的div元素作为表的容器。 2. 接下来,定义一个JavaScript变量来存储表的配置选项。配置选项包括表的类型、标题、例、数据等。 3. 在配置选项中,设置表的类型为环形。可以使用"pie"或者"pie"的别名"饼"来表示环形。 4. 设置表的标题和副标题,以便更好地描述表的含义。 5. 添加例,例用于标识不同扇形的含义。可以根据数据的类别或者名称来设置例。 6. 定义表的数据。数据可以是一个数组,每个元素代表一个扇形。每个扇形包括名称和对应的数值。 7. 对于环形,可以设置内外半径来调整环的大小。可以使用"radius"或者"innerRadius"和"outerRadius"来设置半径值。 8. 设置其他样式选项,如背景颜色、字体样式、边框样式等。 9. 最后,使用Echarts的API将容器和配置选项绑定在一起,并渲染出表。 总结一下,创建Echarts环形的步骤包括导入库、创建容器、定义配置选项、设置表类型、标题、例和数据、调整半径和样式,最后将容器和配置选项绑定并渲染表。 了解更多关于Echarts环形的详细信息,可以参考Echarts的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值