echarts统计视图的样式和实时动态数值解决方案

echarts统计视图的样式和动态数值解决方案

1.标题样式,y轴x轴样式,坐标样式,数值样式,下面代码有详细注释
2.从数据库读取数据显示在统计图中的解决方案

1.标题样式,y轴x轴样式,坐标样式,数值样式,下面代码有详细注释

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>清城测试</title>
    <script type="text/javascript" src="../../../plugin/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="padding-left: 30px;width: 600px;height:400px;"></div>

<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '清城测试',//标题
            left:'center',//标题居中
            textStyle:{
                //文字颜色
                color:'#ccc',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                //字体系列
                fontFamily:'sans-serif',
                //字体大小
                fontSize:18
            }
        },
        tooltip: {
            trigger: 'axis'//鼠标移动轴触发
            //trigger: 'item'//点击触发
        },
        legend: {
            y: 100,//调整数组描述离坐标轴的距离
            padding: [0, 200, 0, 0]//内边距
        },
        //设置坐标轴上下左右的编剧
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true//显示完整
        },
        xAxis: {
            type: 'category',
            //boundaryGap: false,
            //boundaryGap:["0.5","1"],//调节轴值的大小
            data: ['10-08', '10-09', '10-10', '10-11', '10-12', '10-13', '10-14', '10-15'],
            axisLabel: {
                show: true,//轴数组是否显示
                textStyle: {
                    color: '#ACA1AE'//x轴数值的颜色
                    //fontSize: 18//x轴数值的大小
                }
            },
            //默认显示
            //x 轴刻度线
            axisTick: {
                show: true //显示
                //show: false //不显示
            },
            // x 轴线
            axisLine: {
                show: true //显示
                //show: false //不显示
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: false,
            //boundaryGap:["0.5","0"],//调节y轴值的大小
            //boundaryGap:["0.5","1"],//调节y轴值的大小
            //y轴分割线
            splitLine: {
                show: true, //显示
                //show: false, //不显示
                lineStyle: {
                    type: 'dashed' //虚线
                    //type: 'solid' //实线线
                }
            },
            //y 轴刻度线
            axisTick: {
                //show: true //显示
                show: false //不显示
            },
            // y 轴线
            axisLine: {
                //show: true //显示
                show: false //不显示
            }
            /*axisLabel: {
                show: true,//y轴数组是否显示
                textStyle: {
                    color: '#ACA1AE',//y轴数值的颜色
                    fontSize: 18//y轴数值的大小
                }
            }*/
        },
        series: [
            {
                name: '销售额',
                type: 'line',//折线
                //type: 'bar',//柱状
                //样式颜色
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#496CFD',
                                fontSize: 12
                            }
                        },
                        color: '#496CFD'
                    }
                },
                data: [620, 1220, 1300, 334, 690, 930, 320, 900]//数值
            },
            {
                name: '付款金额',
                type: 'line',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#60D5FD',
                                fontSize: 12
                            }
                        },
                        color: '#60D5FD'
                    }
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320, 600]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

echarts统计视图的样式和实时动态数值解决方案

2.从数据库读取数据显示在统计图中的解决方案

<script type="text/javascript">

    var dlstat = [];//定义数组
    //使用ajax给数组赋值
    $.ajax({
            url: getContextPath() + "/statnth/getByMonth.do",
            data: {
                staMonth: (new Date()).getFullYear(),
                entityName: $('#gsName').val()
            },
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.success == true) {
                    if (dataList.length > 0) {
                        for (var i = dataList.length-1; i >= 0; i--) {
                            var sjElec = dataList[i].sjElec;//实际销售额
                              //使用ajax给数组赋值
                            dlstat.push(sjElec);
                         }
                    }
             }
    });

//赋值给统计图的date
 series: [
            {
                name: '销售额',
                type: 'line',//折线
                //type: 'bar',//柱状
                //样式颜色
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#496CFD',
                                fontSize: 12
                            }
                        },
                        color: '#496CFD'
                    }
                },
                data: dlstat //数值
            },

</script>
匿名

发表评论

匿名网友