位置: IT常识 - 正文

图表库-Echarts(图表库网站)

编辑：rootadmin

图表库-Echarts Echarts一. Echarts1. 概述2. 学习方式三.柱状图 - 应用篇总结: 10-ECharts 使用五步曲11-Echarts-基础配置四.折线图五.饼状图六.图形组件数据可视化项目10-引入图表15-折线图2 播放量模块制作16-饼形图 1年龄分布17-饼形图2 地区分布模块制作（南丁格尔玫瑰图）18-Echarts-社区介绍19-Echarts-map使用（扩展）20- 最后约束缩放一. Echarts1. 概述

推荐整理分享图表库-Echarts(图表库网站)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:图表库是计算机的什么软件,图表库前端,图表库概念是什么,图表库是计算机的什么软件,图表库是计算机的什么,图表库是什么,图表库是什么,图表库是什么,内容如对您有帮助，希望把文章链接给更多的朋友！

常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案等等 Highcharts 和 Echarts 就像是 Ofice 和 WPS 的关系

ECharts,图表库: https://echarts.apache.org/zh/index.html 一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器 (E8/9/10/11，Chrome，Firefox，Safar等)，底层依赖矢量图形库 ZRender，提供直观，交丰富，可高度个性化定制的数据可视化图表。早期由百度开发, 后续开源贡献给 Apache

大白话: 是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制. 折线图、柱状图、散点图、饼图、K线图

2. 学习方式使用手册: 属于基础教程 – 最简单的入门级用法API 和配置项手册: 使用时, 临时查即可

用使用手册中的案例代码时, 必须对照 API和配置项手册, 才能看懂

使用手册

引入js文件概念篇-容器, 坐标轴三.柱状图 - 应用篇

总结: 10-ECharts 使用五步曲

步骤1:下载并引入echarts.js文件 ---------------------------->图表依赖这个is库步骤2:准备一个具备大小的DOM容器--------------->生成的图表会放入这个容器内步骤3:初始化echarts实例对象------------------->实例化echarts对象步骤4:指定配置项和数据(option)---------------->根据具体需求修改配置选项步骤5:将配置项设置给echarts实例对象------------->让echarts对象根据修改好的配置生效

11-Echarts-基础配置

这是要求同学们知道以下配置每个模块的主要作用千什么的就可以了需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

series

系列列表。每个系列通过 type 决定自己的图表类型大白话: 图标数据，指定什么类型的图标，可以多个图表重秃xAxis: 直角坐标系

grid 中的x轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis: 直角坐标系 grid 中的 y 轴 grid: 直角坐标系内绘图网格。 title: 标题组件 tooltip: 提示框组件 legend: 图例组件 color: 调色盘颜色列表数据堆叠，同个类目轴上系列配置相同的 stack 值后后一个系列的值会在前一个系列的值上相加。 2.动态排序柱状图官网找到类似实例，适当分析，并且引入到HTML页面中根据需求定制图表

<body> <div id="main" style="width: 600px; height: 300px"></div>  <script src="./echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 制作假数据 var data = []; for (let i = 0; i < 5; ++i) { // 获取一个0 - 200 之间的随机数, 四舍五入后存储数据到data里 data.push(Math.round(Math.random() * 200)); } var option = { xAxis: { max: 'dataMax', // dataMax: 取数组中最大值作为坐标轴的最大值 }, yAxis: { type: 'category', //自定义坐标轴名称 data: ['A', 'B', 'C', 'D', 'E'], inverse: true, //排序的反向 animationDuration: 300, animationDurationUpdate: 300, // 前3名, 3-1=2 // max:2 max: 4, //如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条 name: '1月热度', nameLocation: 'start', }, // 系列 series: [ { realtimeSort: true, name: '总粉丝数', //系列名称 type: 'bar', data: data, label: { show: true, position: 'right', valueAnimation: true, }, }, ], legend: { show: true, }, animationDuration: 3000, animationDurationUpdate: 3000, animationEasing: 'linear', animationEasingUpdate: 'linear', }; function update() { var data = option.series[0].data; //读取已有的数据 for (var i = 0; i < data.length; ++i) { // 通过随机数字来给不同的数据增加不同的数量, 营造出数据的变更效果 if (Math.random() > 0.9) { data[i] += Math.round(Math.random() * 2000); } else { data[i] += Math.round(Math.random() * 200); } } myChart.setOption(option); } // 定时器每隔3s更新一次数据 setInterval(function () { update(); }, 3000); // 如果不写, 过了3s后启动 // 因为定时器不是立刻启动, 而是运行完后3s中才会启动 myChart.setOption(option); </script> </body> 图表库-Echarts(图表库网站)

3.练习

举一反三: 显示20年, 21年, 22年中,1,2,3,4季度的营业综合 20年: [1000万,1200万,1500万,900万] 21年:[700万,1100万,1200万,900万] 22年:[500万,1300万,2000万, 600万]

<body> <div id="main" style="width: 600px; height: 300px"></div>  <script src="./echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: { data: ['第一季度', '第二季度', '第三季度', '第四季度'], }, yAxis: { max: '2000', name: '营业额(万)', }, tooltip: { //鼠标悬停显示 series 的name show: true, }, series: [ { type: 'bar', data: [1000, 1200, 1500, 900], name: '20年', }, { type: 'bar', data: [700, 1100, 1200, 900], name: '21年', }, { type: 'bar', data: [500, 1300, 2000, 600], name: '22年', }, ], legend: { data: ['20年', '21年', '22年'], //必须与series中数据的name相同 }, }; myChart.setOption(option); </script> </body>四.折线图

练习一练习二

练习三: 折现堆叠

五.饼状图

六.图形组件

数据可视化项目

案例适配方案

设计稿是1920pxflexible.js 把屏幕分为 24 等份 `flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展设置–Root Font Size 里面设置。但是别忘记重启vscode软件保证生效

基础设置

body 设置背景图，缩放为 100% ，行高1.15css初始化* { margin: 0; padding: 0;box-sizing: border-box;}ul {list-style: none;}body { background: url(../images/bg.jpg) no-repeat top center; line-height: 1.15;}

04-header布局

高度为100px背景图，在容器内显示缩放比例为 100%h1 标题部分白色 38像素居中显示行高为 80像素 -> 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素header的css样式header { position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; h1 { font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } .showTime { position: absolute; top: 0; right: 0.375rem; line-height: 0.9375rem; font-size: 0.25rem; color: rgba(255, 255, 255, 0.7); }}获取当前时间// 格式：当前时间：2020年3月17-0时54分14秒<script> var t = null; t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script>

05-mainbox 主体模块

需要一个上左右的10px 的内边距 column 列容器，分三列，占比 3: 5: 3

.mainbox { padding: 0.125rem 0.125rem 0; display: flex; .column { flex: 3; } &:nth-child(2) { flex: 5; }}

06-公共面板模块panel

高度为 310px1像素的 1px solid rgba(25, 186, 139, 0.17) 边框有line.jpg 背景图片padding为上为 0 左右 15px 下为 40px下外边距是 15px利用panel 盒子 before 和after 制作上面两个角大小为 10px 线条为 2px solid #02a6b5新加一个盒子before 和after 制作下侧两个角宽度高度为 10px.panel { position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line\(1\).png); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; &::before { position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } &::after { position: absolute; top: 0; right: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } .panel-footer { position: absolute; left: 0; bottom: 0; width: 100%; &::before { position: absolute; bottom: 0; left: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } &::after { position: absolute; bottom: 0; right: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } }}

07柱形图 bar模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px图标内容模块 chart 高度 240px以上可以作为panel公共样式部分 h2 { height: 0.6rem; line-height: 0.6rem; text-align: center; color: #fff; font-size: 20px; font-weight: 400; } .chart { height: 3rem; background-color: pink; }

复制3个, 然后复制到右侧盒子 - 完成以下效果

08-中间布局

上面是no 数字模块下面是map 地图模块 1.数字模块 no 有个背景颜色 rgba(101,132,226,0.1); 有个15像素的内边距 2.注意中间列 column 有个左右 10px 下 15px 的外边距 3.no 模块里面上下划分上面是数字 (no-hd) 下面是相关文字说明(no-bd 4.no-hd 数字模块有一个边框 1px solid rgba(25,186,139,0.17) 5.no-hd 数字模块里面分为两个小i每个小i高度为 80px 文字大小为 70px 颜色为 #feb7b 字体是图标字体 electronicFont 6.no-hd 利用 after 和 before制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px 7.小竖线给第一个小i after 就可以 1px宽背景颜色为 rgba(255,255,255,0.2); 高度 50% top 25% 即可 8.no-bd 里面也有两个小i 高度为 40px 文字颜色为 rgba(255,255,255,.7) 文字大小为 18px 上内边距为 10px/* 引入图标字体,

本文链接地址:https://www.jiuchutong.com/zhishi/299193.html 转载请保留说明！

上一篇：和月薪5W的阿里程序员聊过后，才知道自己一直在打杂...(阿里月薪3万到手多少)

下一篇：Diffusion扩散模型学习1——Pytorch搭建DDPM实现图片生成(diffusion扩散模型训练时间)