echarts图表编写样本

最新推荐文章于 2024-03-18 11:13:05 发布
最新推荐文章于 2024-03-18 11:13:05 发布
阅读量155 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41611829/article/details/100695280
版权 
<!DOCTYPE html>
<html style="height: 100%;width: 100%;">
<head>
    <meta charset="utf-8">
    <title>规定echarts图表的站用面积</title>
</head>
<body>
        <div id="container" style="height:80%;width:100%;"></div>
</body>


//echarts图表初始化
var MyChart = echarts.init(document.getElementById('container'));

//option里为echarts的图表结构
var option = {
    title:{
        text:'人均记录时长',
    },
    color: ['#0086d0'],
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (objs, index) {
            let obj = objs[0];
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value}%`;
        },
    },
    grid: {
        top: '3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,

    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        data: [],
        interval: 20,
        min: 0,
        max: 500,
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#909396',

            }
        },
        axisLabel: {
            formatter: function (value, index) {
                return value + '%';
            },
            color: '#303439'
        },
        axisTick: {
            show: false,
        }
    },
    yAxis: {
        type: 'category',
        boundaryGap: true,
        splitArea: {
            areaStyle: {
                opacity: 0
            }
        },
        axisLine: {
            lineStyle: {
                color: '#909396',

            }
        },
        data: []
    },
    series: [
        {
            name: 'Scoring Attributes',
            barMaxWidth: 20,
            type: 'bar',
            data: [
                {
                    value: 10,
                    itemStyle: {
                        color: '#0086d0',
                    }
                },
                {
                    value: 20,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
                {
                    value: 40,
                    itemStyle: {
                        color: '#0086d0',
                    }
                },
                {
                    value: 60,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
                {
                    value: 70,
                    itemStyle: {
                        color: '#0086d0',
                    }
                },
                {
                    value: 80,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
                {
                    value: 90,
                    itemStyle: {
                        color: '#0086d0',
                    }
                },
                {
                    value: 100,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
                {
                    value: 100,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
                {
                    value: 100,
                    itemStyle: {
                        color: '#6fccff',
                    }
                },
            ]
        },

    ]
};
//图表赋值
MyChart.setOption(option);
//在页面下需要加载的方法
function getAvgTime(){
//数组清空上次加载的数据，防止重复加载
    namelist=[];
    avghour=[];
//ajax后台请求
    postHttp(baseUrl+"/tm/query/getDepartmentQuery",JSON.stringify(params),function(res){
        for(var i=0;i<res.avgTimedata.length;i++){
            namelist.push(res.avgTimedata[i].org_name);
            avghour.push(res.avgTimedata[i].avg_hour);
        }
//echarts图表异步加载更新
        MyChart.setOption({
            yAxis: {
                data: namelist
            },
            xAxis: {
                data: avghour,
            },
            series: [{
                name: '人均记录时长',
                data: avghour
            }]
        })
    });
}

 

普通小程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用Echarts快速制作表格
qq_44850339的博客
09-03 8896
1.Echarts图表库 https://echarts.apache.org/zh/index.html 2.下载echarts.min.js 3.Echarts图表库里面有快速入门，代码可以直接复制粘贴 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts图表库</title> <!-- 1引入图文库 --&...
echarts制作图表
sj1255897381的博客
07-07 314
echarts echart官方使用说明文档 首先添加本地echarts.js文档或者使用在线链接 根据说明文档添加示例： <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 va
echarts绘制图表
weixin_44543121的博客
05-17 2132
绘制图表
3.18作业，绘制Echarts的常用图表
最新发布
2301_81685623的博客
03-18 607
实现思路及步骤(1）在 Eclipse 中依次创建3个。html 文件，分别为堆积柱状图． html 、标准条形图． html 和瀑布图． html。(2）绘制堆积柱状图。首先，在堆积柱状图． html 文件中引人 echarts . js 库文件。其次，准备一个指定了大小的 div 容器，并使用init0方法初始化容器。最后，设置堆积柱状图的配置项、“性别”“年龄段”数据，完成堆积柱状图绘制。(3）绘制标准条形图。首先，在标准条形图． html 文件中引人 echarts . js 库文件。
数据可视化 -- ECharts 入门
m0_63260018的博客
09-19 3003
ECharts（全称“EchoCharts”）是一个开源的、纯JavaScript实现的图表库，由百度前端团队（EFE）以及社区贡献者共同维护和开发。它提供了一整套丰富的图表类型，包括折线图、柱状图、饼图、雷达图、散点图、地图、热力图、箱线图等，用于各种数据可视化需求。
用ECharts绘制图表
julyclj55555的博客
10-19 782
登陆百度地图开发者平台，http://lbsyun.baidu.com/ 申请百度地图JavaScript API密钥 http://lbsyun.baidu.com/apiconsole/key/create，477rLYQ2vK12ZV8u0MFuQbft36dDCBnL 学习如何开发：http://lbsyun.baidu.com/index.php?title=jspopular/g...
Echarts图表制作
zs1342084776的博客
12-25 620
&lt;1&gt;常用到的参数 1)-i：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 2)-o：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。 3)--min：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。 4)--lang &lt;language shortcut or file path&gt;：...
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
java后台生成echarts图表
11-13
Java 后台生成 ECharts 图表是一种常见的数据可视化方法，特别是在大数据处理和Web应用中。ECharts 是百度推出的一个开源的、基于 JavaScript 的数据可视化库，提供了丰富的图表类型和强大的交互功能。然而，在某些...
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括...echarts Ax
Echarts后台获取数据绑定详细样例
10-09
相信大家百度了很多Echarts如何从后台获取数据进行绑定的demo都没有满意的结果。经过自己的理解，这份文档详细的解释了Echarts怎么从后台获取数据进行绑定。从后台返回json格式字符串，然后转换自己想要的数据，希望这份文档不会让大家失望。
echarts一些常见开发程序
03-28
echarts一些常见开发程序，前端网页制作
echarts图表导出到excel
12-19
echarts图表导出到excel中的解决方法，做个备忘录，以防忘记
jq轮播结合echarts图表
08-13
"jq轮播结合echarts图表"是一个巧妙地将JavaScript库jQuery（jq）的轮播插件与百度开发的ECharts图表库结合的实践案例。这种结合使得数据以动态、直观的方式展示，用户可以轻松浏览和理解大量信息。 首先，我们来...
echarts表的田字格多表格式
笨小蛋的博客
04-24 859
echarts表的田字格多表格式 1,情景描述：echarts想实现如下格式的柱状图 2，代码实现： option = { title: [{ 'text': 'aaa', left: 0, top:0, }, { 'text': 'bbb', left: '50%', top...
echarts的使用与代码编写
悦分享
12-02 4526
echarts的使用与代码编写 引入js <script type="text/javascript" src="${rc.contextPath}/view/cusviews/js/type.js" charset="utf-8"></script> <script type="text/javascript" src="${rc.contextPath}/v...
echarts给数据视图添加表格样式
weixin_30550271的博客
10-17 1978
1，准备好样式 <style>.myTable {margin: 0 auto;/* height: 300px; */width: 700px;} .myTitle {background-color: #F2F3F5;} tr:hover {background: #edffcf;} th {font-size: 16px;font-weight: bold;} ...
ECharts制作报表模板
热门推荐
一直在奋起，一直在路上
10-20 2万+
最近公司的问题汇总平台差不多接近尾声，回顾前段时间领导任命做的报表真是别有一番成长波折；在这之前以为问题汇总平台就差不多完结了，结果原来压轴的在后面呢，报表的设计涵盖了本平台80%的核心内容，既然这么重要就更得放上十足的精神干了O(∩_∩)O~
ECharts图表库开发手册
"ECharts开发手册，提供ECharts的入门教程和详细文档，涵盖了各种图表类型和交互组件，适用于PC和移动设备，支持多种浏览器。" ECharts是一个强大的JavaScript图表库，设计用于创建商业级的数据可视化图表。它能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值