sr-iHealthApp/html/tuandui/js/draw-charts.js

function drawPie(el, seriesData, seriesName, colors){
    var myCharts = echarts.init(document.getElementById(el));
    var options = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: colors,
        series : [
            {
                name: seriesName,
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                label: {
                    formatter: '{b}: {c} ({d}%)'
                },
                data: seriesData,
                hoverAnimation: false
            }
        ]
    };
    document.getElementById(el).removeAttribute("_echarts_instance_");
    myCharts.setOption(options);
}

function drawLine(el, xData, yDatas, color, legend){
    var myCharts = echarts.init(document.getElementById(el));
    var options = {
        tooltip: {
            trigger: 'axis'
        },
        color: color,
        grid: {
            left: '10px',
            right: '25px',
            bottom: '10px',
            top: '10px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData,
            boundaryGap: false,
            splitLine:{show: false}
        },
        yAxis: {
            type: 'value',
            splitLine:{show: false}
        },
    };
    var series = [];
    for(i=0; i<yDatas.length; i++){
        var data = yDatas[i];
        series.push({
            name: data.name,
            data: data.data,
            type: 'line'
        })
    }
    options.series = series;
    
    if(legend){
        options.legend = legend;
        options.grid.top = '30px';
    }
    document.getElementById(el).removeAttribute("_echarts_instance_");
    myCharts.setOption(options);
}

function drawBar(el, xData, yData, name, color, formatter){
    var myCharts = echarts.init(document.getElementById(el));
    var options = {
        color: color,
        tooltip : {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '8%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : xData,
                splitLine:{show: false},
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [{
            type : 'value',
            splitLine:{show: false}
        }],
        series : [{
            name: name,
            type:'bar',
            barWidth: '30%',
            data: yData,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: formatter ? formatter : "",
                    textStyle: {
                        color: 'black',
                    }
                }
            }
        }]
    };
    document.getElementById(el).removeAttribute("_echarts_instance_");
    myCharts.setOption(options);
    myCharts.on('click',function(a){
        var name = a.name;
        console.log(name);
        switch(name){
            case "咨询":
                openWebview('tuanduizixunxiangqing.html', {
                    teamCode: teamCode,
                    type: dateType
                })
                break;
            case "随访":
                openWebview('tuanduisuifangxiangqing.html', {
                    teamCode: teamCode,
                    type: dateType
                })
                break;
            case "代预约":
                openWebview('tuanduidaiyuyuexiangqing.html', {
                    teamCode: teamCode,
                    type: dateType
                })
                break;
            case "指导":
                openWebview('tuanduizhidaoxiangqing.html', {
                    teamCode: teamCode,
                    type: dateType
                })
                break;
            case "教育":
                openWebview('tuanduijiaoyuxiangqing.html', {
                    teamCode: teamCode,
                    type: dateType
                })
                break;
            default:
                break;
        }
    });
}