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,
                        }
                    ]
                });

                }
            });