Echarts 百度图表

使用说明

本框架推崇百度图表插件echarts，借助百度图表可以制作许多实用的效果。详见百度官网。如果需要定制主题风格请查阅主题构建工具。

折线图

JS HTML

<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>

                                     <div id="line" style="height:200px;"></div>

柱状图

JS HTML

<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>

                                     <div id="bar" style="height:200px;"></div>

进度条

本框架为echarts制作了一个进度条插件，基本用法如下：

JS HTML

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../dist/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>

                                     <div id="progress" style="height:120px;"></div>

当然用户可根据API制作更多效果，演示和参数如下：

JS HTML

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../dist/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>

                                <div class="ax-row">
                                    <div class="ax-col ax-col-6"><div id="progress01" style="height:120px;"></div></div>
                                    <span class="ax-gutter-xxl"></span>
                                    <div class="ax-col ax-col-6"><div id="progress02" style="height:120px;"></div></div>
                                </div>
                                <div class="ax-break-xxl"></div>
                                <hr/>
                                <div class="ax-break-xxl"></div>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-6"><div id="progress03" style="height:120px;"></div></div>
                                    <span class="ax-gutter-xxl"></span>
                                    <div class="ax-col ax-col-6"><div id="progress04" style="height:120px;"></div></div>
                                </div>

                                <div class="ax-break-xxl"></div>
                                <hr/>
                                <div class="ax-break-xxl"></div>
                                <div class="ax-row">
                                    <div class="ax-col ax-col-6"><div id="progress05" style="height:120px;"></div></div>
                                    <span class="ax-gutter-xxl"></span>
                                    <div class="ax-col ax-col-6"><div id="progress06" style="height:120px;"></div></div>
                                </div>

参数汇总

名称	说明	类型	默认值
titleColor	头文字颜色	string	#666666
startColor	进度条起点颜色	string	#6619ff
endColor	进度条终点颜色	string	#198cff
trackColor	轨道颜色	string	#ebebeb
maxColor	极限文字颜色	string	#666666
labelColor	指示文字颜色	string	#198cff
fontSize	文字大小	number	14
labelFont	指示字体	string	"微软雅黑","microsoft yahei","Arial"
lineHeight	文字行高	number	28
formatter	指示文字格式，默认{c}{a}即是：数值+名称	function	{c}{a}
name	进度条名称，本插件将name值用于formatter组合	string	%
barWidth	进度条宽度	number	6
yData	头文字数组，格式：['','','']	array	-
labelData	指示文字数组，格式：['','','']	array	-
maxData	极限文字数组，格式：['','','']	array	[100,100,100]
leftGap	左侧边距，默认值是四个字符的宽度+5px	number	61
rightGap	右侧边距，默认值是三个字符的宽度	number	42
position	进度条相对文字的位置，默认是在下方bottom，可选top和middle	string	bottom
follow	进度条上是否显示指示标签，默认不显示	boolean	false

环形图

本框架为echarts制作了一个环形图插件，基本用法如下：

JS HTML

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../dist/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>

                                     <div id="circle" style="height:200px;"></div>

当然用户可根据API制作更多效果，演示和参数如下：

JS HTML

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="../dist/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>

                                <div class="ax-row">
                                    <div class="ax-col ax-col-4"><div id="circle01" style="height:120px;"></div></div>
                                    <div class="ax-col ax-col-4"><div id="circle02" style="height:120px;"></div></div>
                                    <div class="ax-col ax-col-4"><div id="circle03" style="height:120px;"></div></div>
                                    <div class="ax-col ax-col-4"><div id="circle04" style="height:120px;"></div></div>
                                    <div class="ax-col ax-col-4"><div id="circle05" style="height:120px;"></div></div>
                                    <div class="ax-col ax-col-4"><div id="circle06" style="height:120px;"></div></div>
                                </div>

参数汇总

名称	说明	类型	默认值
titleColor	主标题文字颜色	string	#198cff
startColor	圆环起点颜色	string	#6619ff
endColor	圆环终点颜色	string	#198cff
trackColor	底环颜色	string	#ebebeb
fontSize	主标题文字大小	number	28
value	圆环当前值	number	-
max	圆环极限值	number	100
subText	圆环副标题	string	-
subColor	圆环副标题颜色	string	#909090
fontFamily	圆环字体	string	"微软雅黑","microsoft yahei","Arial"
itemGap	主副标题的上下间距，可以是负值，负值将会使副标题居于主标题上方；	number	0
barWidth	轨道宽度	number	6
formatter	主标题格式，默认是百分数，用户可自定义主标题内容	string	值%
zoom	圆环在容器中的相对大小	string	180%
left	主标题相对容器的左侧位置，可选'auto'，具体数值或者百分比；	string	center
top	主标题相对容器的顶部位置，可选'auto'，具体数值或者百分比；	string	center