echarts饼状统计图、柱状统计图

<div class="pie" style="500px;height:500px;"></div>

<div class="line" style="500px;height:500px;"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.js"></script>
<script>
        //饼状图配置
        var dataPie = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} {d}%" //名字 : 数量 百分比
            },
            legend: {
                orient: 'horizontal',
                x: 'left',
                data:[]
            },
            series: [
                {
                    name:'example pie',
                    type:'pie', //圆形
                    //radius: ['35%', '70%'], //甜甜圈，可选项
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside', //文字位置，inside为扇区，center为正中
                            formatter: '{b} : {c} {d}%'
                        },
                        emphasis: {
                            show: true,
                            textStyle: { //文字样式
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                    {value: 'xxx', name: ''xxx''}, //value数量，name名字
                    {value: 'xxx', name: ''xxx''},
                    {value: 'xxx', name: ''xxx''},
                    ]
                }
            ]
        };
        //柱状图配置
        var dataLine = {
            color: ['#3398DB'], //柱形颜色
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    axisLabel: {
                        textStyle: {
                            fontSize: 10 //x轴标题文字样式
                        },
                        interval: 0 //防止部分标题隐藏
                    },
                    type : 'category',
                    data : ['标题1','标题2','标题3'],// X轴标题
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    name: '(件)', //Y轴纵坐标量词
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'line',
                    type:'bar',
                    barWidth: '60%',
                    data:[123, 456, 789], // 标题对应数量
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: { //圆柱上方数字文字样式
                                    color: 'black',
                                    fontSize: 10
                                }
                            }
                        }
                    }
                }
            ]
        }
        //设置显示
        var pie = echarts.init(document.getElementsByClassName("pie")[0]);
        var line = echarts.init(document.getElementsByClassName("line")[0]);
        pie.setOption(dataPie);
        line.setOption(dataLine);
</script>