Echarts 百度图表

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script type='text/javascript'>
        //折线图
        optionLine = {
            title: {
                text: ''
            },
            legend: {
                data: ['本周客流', '上周客流'],
                align: 'left',
                top:'4'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                name: '单位(万)',
                type: 'value',
            },
            series: [{
                name:'本周客流',
                data: [2.2, 2.5, 3.5, 2.8, 2.0, 4.5, 5.2],
                type: 'line'
            },{
                name:'上周客流',
                data: [1.2, 2.1, 2.9, 3.5, 2.4, 5.6, 4.8],
                type: 'line'
            }],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                show: false,
                borderColor: '#ebebeb',
                x: 22,
                x2: 0,
                y: 36,
                y2:0,
                height: 128//170-100(198-128)
            },

        };
        var domLine = document.getElementById("line");
        var chartLine = echarts.init(domLine, 'theme-ax');
        chartLine.setOption(optionLine, true);
</script>
                        

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script type='text/javascript'>
        //柱状图
        optionBar = {
            title: {
                text: ''
            },
            legend: {
                data: ['安防', '养护', '环卫'],
                align: 'left',
                top:'4',
                itemWidth:12,
                itemHeight:12,

            },
            xAxis: {
                type: 'category',
                data: [ '6月', '7月', '8月', '9月', '10月', '11月']
            },
            yAxis: {
                name: '单位(万)',
                type: 'value',
            },
            series: [ {
                name:'安防',
                type:'bar',
                barWidth : 10,
                data:[332, 301, 334, 390, 330, 320],
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0],
                },
            },
                {
                    name:'养护',
                    type:'bar',
                    barWidth : 10,
                    data:[132, 101, 134, 90, 230, 210],
                    itemStyle: {
                        barBorderRadius: [10, 10, 0, 0],
                    },
                },
                {
                    name:'环卫',
                    type:'bar',
                    barWidth : 10,
                    data:[182, 191, 234, 290, 330, 310],
                    itemStyle: {
                        barBorderRadius: [10, 10, 0, 0],
                    },
                }],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                show:false,
                x: 32,
                x2: 0,
                y: 36,
                y2:0,
                height: 128//170-100(198-128)
            },

        };
        var domBar = document.getElementById("bar");
        var chartBar = echarts.init(domBar, 'theme-ax');
        chartBar.setOption(optionBar, true);
</script>
                        

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../src/plugins/baidu/percentBar.js" type="text/javascript"></script>
<script type='text/javascript'>
        //进度条
        var optionProgress = {
            yData:['绿化率','就业率','土地使用率'],
            labelData:[36,49,70],
            domEle:document.getElementById("progress")
        };
        var progress = new PercentBar(optionProgress);
        progress.init();
</script>
                        

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../src/plugins/baidu/percentBar.js" type="text/javascript"></script>
<script type='text/javascript'>
        //进度条，跟随的标签
        var optionProgress01 = {
            yData:['绿化率','就业率','土地使用率'],
            labelData:[36,49,70],
            follow:true,
            domEle:document.getElementById("progress01")
        };
        var progress01 = new PercentBar(optionProgress01);
        progress01.init();

        //进度条，进度条在上方
        var optionProgress02 = {
            yData:['绿化率','就业率','土地使用率'],
            labelData:[36,49,70],
            position:'top',
            domEle:document.getElementById("progress02")
        };
        var progress02 = new PercentBar(optionProgress02);
        progress02.init();
        //进度条，进度条居中
        var optionProgress03 = {
            yData:['绿化率','就业率','土地使用率'],
            labelData:[36,49,70],
            position:'middle',
            leftGap:80,
            domEle:document.getElementById("progress03")
        };
        var progress03 = new PercentBar(optionProgress03);
        progress03.init();
        //进度条，自定义文字
        var optionProgress04 = {
            name:'人',
            yData:['在职老师','在校学生','市局领导'],
            labelData:[53,124,13],
            maxData:[200,200,200],
            position:'middle',
            rightGap:40,
            domEle:document.getElementById("progress04")
        };
        var progress04 = new PercentBar(optionProgress04);
        progress04.init();
        //进度条，居中跟随
        var optionProgress05 = {
            name:'人',
            yData:['在职老师','在校学生','市局领导'],
            labelData:[53,124,13],
            maxData:[200,200,200],
            position:'middle',
            follow:true,
            domEle:document.getElementById("progress05")
        };
        var progress05 = new PercentBar(optionProgress05);
        progress05.init();

        //进度条，改变颜色
        var optionProgress06 = {
            yData:['绿化率','就业率','土地使用率'],
            labelData:[36,49,100],
            leftGap:80,
            startColor:'#b2d956',
            endColor:'#41a358',
            domEle:document.getElementById("progress06")
        };
        var progress06 = new PercentBar(optionProgress06);
        progress06.init();
</script>
                        

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../src/plugins/baidu/percentCircle.js" type="text/javascript"></script>
<script >
        //环形图
        var optionCircle = {
            value:70,
            subText: '合格率',
            domEle:document.getElementById("circle")
        };
        var circle = new PercentCircle(optionCircle);
        circle.init();
</script>
                        

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../src/plugins/baidu/percentCircle.js" type="text/javascript"></script>
<script >
        //修改格式
        var optionCircle01 = {
            value:52,
            fontSize:18,
            itemGap:4,
            formatter:'52分',
            subText: '满分100分',
            top:'34%',
            domEle:document.getElementById("circle01")
        };
        var circle01 = new PercentCircle(optionCircle01);
        circle01.init();
        //超出100限制
        var optionCircle02 = {
            value:169,
            max:2000,
            fontSize:18,
            itemGap:-36,
            formatter:'169人',
            subText: '共2000人',
            top:'46%',
            domEle:document.getElementById("circle02")
        };
        var circle02 = new PercentCircle(optionCircle02);
        circle02.init();
        //修改轨道颜色
        var optionCircle03 = {
            value:87,
            titleColor:'#41a358',
            startColor:'#b2d956',
            endColor:'#41a358',
            domEle:document.getElementById("circle03")
        };
        var circle03 = new PercentCircle(optionCircle03);
        circle03.init();

        //修改宽轨道度
        var optionCircle04 = {
            value:68,
            barWidth:12,
            domEle:document.getElementById("circle04")
        };
        var circle04 = new PercentCircle(optionCircle04);
        circle04.init();
        //修改轨道底色
        var optionCircle05 = {
            value:78,
            trackColor:'#d9ecff',
            domEle:document.getElementById("circle05")
        };
        var circle05 = new PercentCircle(optionCircle05);
        circle05.init();
        //修改尺寸
        var optionCircle06 = {
            value:88,
            fontSize:18,
            zoom:'140%',
            domEle:document.getElementById("circle06")
        };
        var circle06 = new PercentCircle(optionCircle06);
        circle06.init();
</script>