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

发布了26 篇原创文章 · 获赞 2 · 访问量 1414

猜你喜欢

转载自blog.csdn.net/weixin_43633797/article/details/102697831
今日推荐