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

ECharts是由百度打造的一个纯javascript的图标库，很好用。

下载地址：

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

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

js: var myChart = echarts.init(document.getElementById('main'));html:

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

这里写图片描述