echarts图表中饼状图的指示线和百分比

echarts图表中饼状图的指示线和百分比

ECharts是由百度打造的一个纯javascript的图标库，很好用。
下载地址：http://echarts.baidu.com/download.html

1.echarts文件的引入,在javascript块引入，src按需修改

<script type="text/javascript" src="./res/js/echarts.js"></script>

2.基于准备好的dom，初始化echarts

js: var myChart = echarts.init(document.getElementById(\'main\'));
html: <div id="main" style="width:900px;height:500px;"></div>

3.指定图表的配置项和数据

var option = {
    color: [\'#ff7f50\', \'#87cefa\', \'#da70d6\', \'#32cd32\', \'#6495ed\', \'#ff69b4\',],   //饼状图颜色数组
    title: {
        text: \'\',
        text: \'\',
        subtext: \'\',
        x: \'center\'
    },
    tooltip: {    //鼠标移入,显示气泡
        trigger: \'item\',
        formatter: function (p) {
           console.log(p);  //选择自己喜欢的显示
            return str;
        }
    },
    legend: {
        show: false
    },
    series: [
        {
            name: \'\',
            type: \'pie\',   //饼状图
            radius: \'85%\',   //大小
            center: [\'45%\', \'50%\'],    //显示位置
            data: [],   //数据,我们ajax获取

        },
        {
            name: \'\',
            type: \'pie\',
            radius: \'85%\',
            center: [\'45%\', \'50%\'],
            data: [],
            itemStyle: {
                normal: {
                    label: {        //此处为指示线文字
                        show: true,
                        position: \'inner\', //标签的位置
                        textStyle: {
                            fontWeight: 200,
                            fontSize: 10    //文字的字体大小
                        },
                        formatter: function (p) {   //指示线对应文字
                            var data = p.data;
                            return data;
                        }
                    },
                    labelLine: {    //指示线状态
                        show: true,
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                }
            },
        }
    ]
};

4.ajax动态获取数据设置参数

 $.ajax({
                type: \'get\',
                url: URL,
                data: data,
                dataType: "json",
                success: function (res) {   //这里只设置月份          
                   for (var i = 0; i < res.length; i++) {
                               //此处遍历元素
                    }
                   maindata.push();   //保存数组
                }
                var myChart = echarts.init(document.getElementById(\'main\'));
                myChart.setOption({
                    series: [
                        {
                            data: maindata,  //此处传入两遍数组为关键处,百分比和指示线文字为两张饼图,叠加在一起显示效果
                        },
                        {
                            data: maindata,
                        }
                    ]
                });

                }
            });