JS echarts统计

左手的ㄟ右手 2023-08-17 17:17 131阅读 0赞

柱状图

function drawbarFunc(xs, ys) {
        //var xs1 = [];
        //var ys1 = [];
        require.config({
            paths: {
                echarts: '/Script/plugins/echarts/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('pieChart'));
                var option = {
                    title: {
                        text: '评分统计',
                        //subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['平均分']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            //mark: { show: true },
                            //dataView: { show: true, readOnly: false },
                            //magicType: { show: true, type: ['line', 'bar'] },
                            //restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: xs,
                            axisLabel: {
                                interval: 0,
                                rotate: -40
                            }
                        }
                    ],
                    grid: {
                        x: 40,
                        x2: 100,
                        y2: 200
                    },
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '平均分',
                            type: 'bar',
                            data: ys,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );
    }

折线图

function drawbarFunc(xs, ys, linevalue) {
        //var xs1 = [];
        //var ys1 = [];
        require.config({
            paths: {
                echarts: '/Script/plugins/echarts/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line'    // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('pieChart'));
    
                var option = {
                    title: {
                        text: '上座人数统计',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['听众人数']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            //mark: { show: true },
                            //dataView: { show: true, readOnly: false },
                            //magicType: { show: true, type: ['line'] },
                            //restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: xs,
                            //axisLabel: {
         
                            //    interval: 0,
                            //    rotate: -40   //选择-40°
                            //},
                            boundaryGap: false,
                            nameTextStyle: { fontSize: 100 },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 人'
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        }
                    ],
                    visualMap: {
                        show: true,
                        pieces: [
                            {
                                gt: 0,
                                lte: linevalue,          //这儿设置基线上下颜色区分 基线下面为绿色
                                color: '#03d6d6'
                            }, {
    
                                gt: linevalue,          //这儿设置基线上下颜色区分 基线上面为红色
                                color: '#e91642'
                            }]
                    },
                    //grid: {
         
                    //    x: 40,
                    //    x2: 100,
                    //    y2: 200
                    //},
                    series: [
                        {
                            name: '听众人数',
                            type: 'line',
                            data: ys,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 20
                                        }
                                    }
                                }
                            }//,
                            //markLine: {
         
                            //    data: [
                            //        { name: '标线1起点', value: 800, x: xs[0], y: ys[0] },
                            //        { name: '标线1终点', x: xs[ys.length - 1], y: ys[ys.length - 1] }
                            //    ]
                            //}
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );
    }

转载于:https://www.cnblogs.com/kikyoqiang/p/11237922.html

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 柱图分组统计

计按单位统计每个单位下子系统的信息 html <div id="chart" style="height: 100%;"></div> js op...

我会带着你远行/ 2024年04月18日 06:59/ 0 赞/ 66 阅读

相关 echarts统计图表

1、简介 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地

雨点打透心脏的1/2处/ 2024年04月06日 11:13/ 0 赞/ 98 阅读

相关使用echart.js和echarts-gl.js实现旋转地球

今天，无意中看见一个同学写的旋转地球的页面，非常漂亮。因此自己动手也学习编写，现在把代码放在CSDN，和大家一起分享！ ECharts是一款基于[JavaScript][]的

曾经终败给现在/ 2023年10月08日 17:53/ 0 赞/ 14 阅读

相关 JS echarts统计

柱状图 function drawbarFunc(xs, ys) { //var xs1 = []; //var ys1 = [];

左手的ㄟ右手/ 2023年08月17日 17:17/ 0 赞/ 132 阅读

相关 echarts按时间连续统计

按时间统计,如果只是简单的group by来查询可能结果是不连续的. 解决方法有两种,一种是写复杂的sql去查询,第二种就是在代码中去统计. 本文讨论的是第二种方法. 提

旧城等待，/ 2023年01月12日 10:06/ 0 赞/ 242 阅读

相关 Echarts统计图标题居中显示

![cf3e53450f5e7984e75494f5af77eedd.png][] title: { text

偏执的太偏执、/ 2022年12月23日 00:50/ 0 赞/ 305 阅读

相关 vue用echarts写环形统计

1.代码 <template> <div> <el-card class="Ratio-card" shadow="hover">

妖狐艹你老母/ 2022年10月06日 00:53/ 0 赞/ 121 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 734 阅读

相关 Android使用Echart实现统计图

今天给大家分享的是：如何在android端使用echart实现统计图我们来看一下实现效果首界面 ![70][] 折线图 ![70 1][]

本是古典何须时尚/ 2021年09月16日 05:58/ 0 赞/ 526 阅读

相关 Echart统计图-map地图

数据库数据查询 <table> <tbody> <tr> <td> <p>//首页地图统计 /main/json/customerMap</p> <p>@R

你的名字/ 2021年09月07日 06:00/ 0 赞/ 589 阅读