Echarts在线免费图表

 
            var colors = ['#81d0d7', '#81d0aa'];
var data1 = [421, 356, 719, 658, 458,421, 356, 719, 658, 458,421, 356, 719, 658];
var data2 = [87, 146, 174, 129, 124, 165, 176, 319, 124, 125, 46, 129, 174, 95];
var xData = ['南宁市行政审批局','柳州市行政审批局','梧州市行政审批局'
,'北海市行政审批局','钦州市行政审批局','防城港市行政审批局','百色市行政审批局',
'桂林市行政审批局','来宾市行政审批局','河池市行政审批局','崇左市行政审批局'
,'贵港市行政审批局','贺州市行政审批局','玉林市行政审批局'];
option = {
    backgroundColor:'#fff',
    title: {
        text: '单位审批申请办结情况',
        textStyle: {
            fontSize: '15'
        }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },
     grid: {
        top:80,
        left:'10%',
       right:'47%',
        bottom:'65%'
    },
    legend: {
        data: ['审批申请数', '发证数'],
        align: 'left',
        left: '10%',
        top:45
    },
    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#000'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            interval: {default: 0},
            rotate:50,
            textStyle: {
                fontSize: 10
            },
            formatter : function(params){
               var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params.length;// 实际标签的个数
                var provideNumber = 4;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                    /** 循环每一行,p表示行 */
                    var tempStr = "";
                    tempStr=params.substring(0,4);
                    newParamsName = tempStr+"...";// 最终拼成的字符串
                } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
            }

        },
        "data": xData,
    }],
    yAxis: [{
        type: 'value',
        name: '',
        min: 0,
        max: 1000,
        position: 'left',
        axisLine: {
            lineStyle: {
                color: '#000'
            }
        },
        axisLabel: {
            formatter: '{value} '
        }
    }],
    series: [{
            name: '审批申请数',
            type: 'bar',
            color: colors[0],
            barWidth: 10,
            data: data1
        },
        {
            name: '发证数',
            type: 'bar',
            color: colors[1],
            barWidth: 10,
            data: data2
        },
       /* {
            name: '不予受理率',
            type: 'pie',
            radius: ['10%', '14%'],
            color: ['#ff0000','#00EE76'],
            center: ['43%', '10%'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: data2[0],
                name: '不予受理数',

                label: {
                    normal: {
                        formatter: '{d} %',
                        textStyle: {
                            fontSize: 12
                        }
                    }
                }
            }, {
                value: data1[0] - data2[0],
                name: '受理数',

                label: {
                    normal: {
                        formatter: '\不予受理率',
                        textStyle: {
                            color: '#555',
                            fontSize: 10
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#aaa'
                    },
                    emphasis: {
                        color: '#aaa'
                    }
                },
            }]
        }*/
    ]
};
// 点击事件
/*myChart.on('mouseover', function(params) {
    if (params.componentType === 'series' && params.seriesType === 'bar') {
        var dataIndex = params.dataIndex;
        myChart.setOption({
            series: [{
                    name: '审批申请数',
                    type: 'bar',
                    color: colors[0],
                    barWidth: 10,
                    data: data1
                },
                {
                    name: '不予受理数',
                    type: 'bar',
                    color: colors[1],
                    barWidth: 10,
                    data: data2
                },
                {
                    name: '不予受理率',
                    type: 'pie',
                    radius: ['10%', '14%'],
            color: ['#ff0000','#00EE76'],
            center: ['43%', '10%'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: data2[dataIndex],
                        name: '不予受理数',

                        label: {
                            normal: {
                                formatter: '{d} %',
                                textStyle: {
                                    fontSize: 12
                                }
                            }
                        }
                    }, {
                        value: data1[dataIndex] - data2[dataIndex],
                        name: '受理数',

                        label: {
                            normal: {
                                formatter: '\不予受理率',
                                textStyle: {
                                    color: '#555',
                                    fontSize: 10
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#aaa'
                            },
                            emphasis: {
                                color: '#aaa'
                            }
                        },
                    }]
                }
            ]
        })
    }
});*/