小小的封装了一个pie的echarts

Posted 大圣回来了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小小的封装了一个pie的echarts相关的知识,希望对你有一定的参考价值。

function showData(ele,arr1,arr2){
    var myChart2 = echarts.init(document.getElementById(ele));
    var option2 = {
        tooltip : {
            trigger: ‘item‘,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : ‘vertical‘,
            x : ‘left‘,
            data:[arr1[0],arr1[1],arr1[2],arr1[3],arr1[4]]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: [‘pie‘, ‘funnel‘],
                    option: {
                        funnel: {
                            x: ‘25%‘,
                            width: ‘50%‘,
                            funnelAlign: ‘center‘,
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:‘访问来源‘,
                type:‘pie‘,
                radius : [‘50%‘, ‘70%‘],
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    }

                },
                data:[
                    {value:arr2[0], name:arr1[0]},
                    {value:arr2[1], name:arr1[1]},
                    {value:arr2[2], name:arr1[2]},
                    {value:arr2[3], name:arr1[3]},
                    {value:arr2[4], name:arr1[4]}
                ]
            }
        ]
    };
    myChart2.setOption(option2)
}
    var a = ‘直接访问‘;
    var b = ‘邮件营销‘;
    var c = ‘联盟广告‘;
    var d = ‘视频广告‘;
    var e = ‘搜索引擎‘;
    var arr1 = [a, b, c, d, e];
    var arr2 = [12, 23, 34, 45, 56];
showData("main2",arr1,arr2);

  只需要传入div的id和数据里面的对象数组

以上是关于小小的封装了一个pie的echarts的主要内容,如果未能解决你的问题,请参考以下文章

vue-echarts封装组件

vue-echarts封装组件

ECharts之类型pie

echarts中的小小小小坑(一)

Pie 和 Bar Echart简单样式结构

Pie 和 Bar Echart简单样式结构