美文网首页
Echarts模板(六):馅饼图

Echarts模板(六):馅饼图

作者: ZhenKuanJiang | 来源:发表于2019-04-28 18:21 被阅读0次

本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤繁琐,最后我选择使用Echarts画图,它不仅操作简单,而且图像美观,只需要一点点代码基础就能实现。接下来,我向大家分享以下我用到的几个图的模板代码,你在使用的时候均可通过以下代码进行修改,由于本人没有学过JS,不对的地方还请大家多多指教

option = {
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    backgroundColor: '#FDFEFE',
    title: {
        text: '',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 30,
        max: 130,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '75%',
            center: ['50%', '50%'],
            
            data:[
                {value:93, name:'年卡'},
                {value:82, name:'季卡'},
                {value:62, name:'半年卡'},
                {value:62, name:'月卡'},
                {value:53, name:'单次体验卡'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    formatter: '{b}({d}%)',
                    textStyle: {
                        color: 'rgba(0, 0, 0)',
                        fontSize:20
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(0, 0, 0, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

以下是效果图

相关文章

  • Echarts模板(六):馅饼图

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤...

  • echarts使用

    echarts使用模板

  • Echarts模板(四):环形图

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤...

  • Echarts模板(五):树状图

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤...

  • Vue项目中使用Echarts

    Echarts 官网 安装Echats 使用 在main.js中引入Echarts 在模板中加入挂载Echarts...

  • Echarts模板(一):南丁格尔玫瑰图

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤...

  • Echarts模板(三):分裂饼图

    本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤...

  • Echarts

    http://echarts.baidu.com/api.html#echarts 柱状图: 饼状图: 饼状图2:...

  • vue中引入echarts关系图

    完成图 安装echarts 页面局部引入 注意这里如果import echarts from "echarts"引...

  • vue echarts 中国地图

    效果图 vue模板语法块 echarts 中国地图 china 初始化格式数据。要数据的私信我,字节数太多不能...

网友评论

      本文标题:Echarts模板(六):馅饼图

      本文链接:https://www.haomeiwen.com/subject/hfvjnqtx.html