站点默认
3年前
学习目录
1.可视化面板介绍
1.1 技术要点
1.2 案例适配方案
1.3 主页面布局
2.Echarts（重点）
2.1 echarts简介
2.2 echarts体验
2.3echarts基本配置
3.Echarts快速使用
3.1 官网示例
3.2. 社区画廊
废话少说，我们先上效果图
看完效果图之后，我就给大家详细讲解一下我们完成这张图需要的具体操作和技巧！
1.可视化面板介绍
针对当前数据可视化的趋势，越来越多的企业需要在很多场景（营销数据、生产数据、用户数据）使用它。 采用可视化图表来展示和突出数据，使数据更加直观，数据特征更加突出。
01-技术要点 div + css 布局 flex 布局 少原生 js + jquery 使用 rem 适配 echarts 基础 02-案例适配方案设计稿为 1920px flexile.js 将屏幕分为 24 等分 cssrem 插件基准值为 80px
插件配置按钮-配置扩展设置-根字体大小。
但别忘了重启vscode软件以确保生效 03页主布局页眉布局主箱布局公共面板模块面板柱形图栏
因为我们明天的主题是echarts部分，所以上面的这些我就给大家写一下框架。 相信以你的能力，里面的布局分分钟就能解决。
2.Echarts（重点）echarts介绍
常用数据可视化库：
ECharts是一个使用JavaScript实现的开源可视化库，可以在PC和中国联通设备上流畅运行，兼容当前大多数浏览器（IE8/9/10/11、Chrome、Firefox、Safari等），并且依赖于矢量图形底层的ZRender库提供直观、交互式和高度可定制的数据可视化图表。
官网地址：
echarts体验
下载echarts bator-echarts/tree/4.5.0
使用步骤（5个主要步骤）：
1.在html页面引入echarts插件文件
2.准备一个DOM容器，大小为
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4.指定配置项和数据（选项）
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5、设置配置项为echarts实例对象
myChart.setOption(option);
echarts基本配置
这是要求同事了解下面配置中各个模块的主要功能。
主要需要了解的配置：series xAxis yAxis grid tooltip title legend color
xAxis：直角坐标系中的x轴 grid yAxis：直角坐标系中的y轴 grid：直角坐标系中的绘图网格。 title：标题组件 tooltip：提示框组件 legend：图例组件 color：调色板颜色列表
数据堆叠，同一个品类轴上的系列配置了相同的堆叠值后，下一个系列的值会乘以上一个系列的值。
option = {
// color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图表的标题
title: {
text: '折线图堆叠123'
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: 'axis'
},
// 图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
// 工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 设置y轴的相关配置
yAxis: {
type: 'value'
},
// 系列图表配置 它决定着显示那种类型的图表
series: [
{
name: '邮件营销',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
3. Echarts快速使用 1. 官网示例
官网默认为我们提供了大量的案例。 我们只需要直接点击打开并复制它们的相关配置，然后按照我前面提到的5大步骤来使用即可。
2. 社区画廊
官方的图例在很多情况下可能不能满足我们的需求。 在社区里可以找到一些基于echart的高度定制化的图表，相当于基于jquery开发的插件。 这里是一个基于echarts开发的第三方图表。
本例引用社区中使用地图模拟飞行的案例。
参考社区的示例：（航线模拟）
实施步骤：
代码已经上传，有需要的小伙伴可以自行下载：
大师.zip
向上滚动，我还写过几篇关于echarts的文章，都是大数据和中期报纸相关的，有兴趣的可以向上滚动。
ps：最后，如果您阅读了作者的文章，认为对echarts的学习和理解有帮助，请路过echarts适配描述，点赞关注！
程序员灯塔
转载请注明原文链接：神奇的百度Echartsecharts适配描述，大数据分析必备工具，文末提供源码
类别： 开发技术, 编程语言
代码：bat、java、load、地图、master、大数据、工具、开发、源代码
