Echarts 可视化基础知识

1.ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表。

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

2.ECharts 使用

（1）下载并引入EChart.js文件

<script src="js/echarts.min.js"></script>

（2）准备一个具备大小的DOM容器来装生成的图表

<!-- 注意：这个盒子必须具备大小，生成的图表会放入这个容器内 -->
<div id="main" style="width: 600px;height:400px;"></div>

（3）初始化echarts实例对象

var myChart = echarts.init(document.querySelector('.box'));

（4）根据具体需求修改配置选项（option）

var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

（5）将配置项设置给echarts实例对象

myChart.setOption(option);

3.Echarts 基础配置

(1) title：标题组件

(2) tooltip：提示框组件

(3) legend：图例组件

(4) color：调色盘颜色列表

(5) grid：直角坐标系内绘图网格

containLabel:

①如果left right等设置为 0% ，刻度标签就溢出了，此时决定是否显示刻度标签

②当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签

(6) series：系列列表

type: 每个系列通过 type 决定自己的图表类型，比如 line 是折线 bar 柱形等，可以多个图表重叠
name: 系列名称，用于tooltip的显示，legend 的图例筛选变化
stack: 数据堆叠

①如果设置相同值，则会数据堆叠。

数据堆叠：第二个数据值= 第一个数据值 + 第二个数据值

第三个数据值 = 第二个数据值 + 第三个数据值…. 依次叠加

②如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

(7) xAxis：直角坐标系 grid 中的 x 轴

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

(8) yAxis：直角坐标系 grid 中的 y 轴

4.线形图

var option = {color: ['pink', 'blue', 'green', 'skyblue', 'red'],title: {text: '我的折线图'},tooltip: {trigger: 'axis'},legend: {data: ['直播营销', '联盟广告', '视频广告', '直接访问']},grid: {left: '3%',right: '3%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',       boundaryGap: false,data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']},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]}]};

4.饼状图

option = {// 提示框组件tooltip: {// trigger 触发方式。非轴图形，使用item的意思是放到数据对应图形上触发提示trigger: 'item',// 格式化提示内容：// a 代表series系列图表名称  // b 代表series数据名称 data 里面的name    // c 代表series数据值 data 里面的value   // d代表  当前数据/总数据的比例formatter: "{a} <br/>{b} : {c} ({d}%)"},// 控制图表series: [{// 图表名称name: '点位统计',// 图表类型type: 'pie',// 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%// 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）radius: ['10%', '70%'],// 图表中心位置 left 50%  top 50%  距离图表DOM容器center: ['50%', '50%'],// radius 半径模式，另外一种是 area 面积模式roseType: 'radius',// 数据集 value 数据的值 name 数据的名称data: [{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]}]
};

5.柱状图

var option = {// 工具提示tooltip: {// 触发类型  经过轴触发axis  经过轴触发itemtrigger: 'axis',// 轴触发提示才有效axisPointer: {    // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       type: 'shadow'        }},// 图表边界控制grid: {// 距离 上右下左 的距离left: '3%',right: '4%',bottom: '3%',// 是否包含文本containLabel: true},// 控制x轴xAxis: [{// 使用类目，必须有data属性type: 'category',// 使用 data 中的数据设为刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度设置axisTick: {// true意思：图形在刻度中间// false意思：图形在刻度之间alignWithLabel: true}}],// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: 'value'}],// 控制x轴series: [{// 图表数据名称name: '用户统计',// 图表类型type: 'bar',// 柱子宽度barWidth: '60%',// 数据data: [10, 52, 200, 334, 390, 330, 220]}]};

6.雷达图

var option = {tooltip: {show: true,// 控制提示框组件的显示位置position: ["60%", "10%"]},radar: {indicator: [{ name: "机场", max: 100 },{ name: "商场", max: 100 },{ name: "火车站", max: 100 },{ name: "汽车站", max: 100 },{ name: "地铁", max: 100 }],// 修改雷达图的大小radius: "65%",shape: "circle",// 分割的圆圈个数splitNumber: 4,name: {// 修饰雷达图文字的颜色textStyle: {color: "#4c9bfd"}},// 分割的圆圈线条的样式splitLine: {lineStyle: {color: "rgba(255,255,255, 0.5)"}},splitArea: {show: false},// 坐标轴的线修改为白色半透明axisLine: {lineStyle: {color: "rgba(255, 255, 255, 0.5)"}}},series: [{name: "北京",type: "radar",// 填充区域的线条颜色lineStyle: {normal: {color: "#fff",width: 1,opacity: 0.5}},data: [[90, 19, 56, 11, 34]],// 设置图形标记 （拐点）symbol: "circle",// 这个是设置小圆点大小symbolSize: 5,// 设置小圆点颜色itemStyle: {color: "#fff"},// 让小圆点显示数据label: {show: true,fontSize: 10},// 修饰我们区域填充的背景颜色areaStyle: {color: "rgba(238, 197, 102, 0.6)"}}]};

7.饼状图

 var option = {series: [{name: "销售进度",type: "pie",radius: ["50%", "70%"],//是否启用防止标签重叠策略// avoidLabelOverlap: false,labelLine: {normal: {show: false}},data: [{ value: 100 }, { value: 100 }, { value: 200 }]}]};

5.Echarts 社区介绍

在Echarts 社区可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

(1) 模拟飞机航线例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM

(2) 实现步骤：

首先需要下载china.js提供中国地图的js文件
由于代码比较多，因此新建一个新的js文件 myMap.js 引入
使用社区提供的配置即可。

Echarts可视化基础知识相关推荐

ECharts可视化基础——散点图
ECharts可视化基础--散点图 ECharts可视化基础1 ECharts可视化基础2 ECharts可视化基础3 散点图的实现. 绘制运动员身高体重的散点图,分析身高与体重两变量的关系.所给的数 ...
Python数据分析与可视化(基础知识)
Python基础本文首先介绍一下做数据分析与可视化所必备的Python基础,涉及Python的组合数据类型.控制流以及常用的内置函数. 数据类型我们将讨论数据处理常见的数据类型. Python中的 ...
Python数据分析与可视化(基础知识)Python基础
Python基础本文首先介绍一下做数据分析与可视化所必备的Python基础,涉及Python的组合数据类型.控制流以及常用的内置函数. 数据类型我们将讨论数据处理常见的数据类型. Python中的 ...
数据可视化系列-01大数据可视化基础
文章目录 1.概述 2.大数据可视化基础 2.1 数据可视化基础知识 1.数据可视化简史: 2.数据可视化是什么: 3.数据可视化的分类: 4.数据可视化流程: 5.数据可视化的意义: 2.2 认识B ...
echarts结合react开发基础知识学习
echarts基础知识学习 1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...
数据可视化系列-04数据大屏基础知识
文章目录 5.销售数据看板 5.1 了解数据大屏基础知识 1.数据大屏简介: 2.数据大屏使用场景 3.数据大屏分类 5.2 数据大屏的设计: 1.大屏前端设计流程 2.数据大屏设计尺寸解析 3.可视 ...
R语言可视化绘图基础知识详解
R语言可视化绘图基础知识详解图形参数:字体.坐标.颜色.标签等: 图像符号和线条: 文本属性: 图像尺寸及边界: 坐标轴.图例自定义等: 图像的组合: #install.packages(c(&qu ...
CV：计算机视觉技术之图像基础知识(二)—图像内核的可视化解释
CV:计算机视觉技术之图像基础知识(二)-图像内核的可视化解释目录图像内核的可视化解释测试九种卷积核官方Demo DIY图片测试 DIY实时视频测试相关文章 CV:计算机视觉技术之图像基础知 ...
python爬虫数据可视化_python 爬虫与数据可视化--python基础知识
摘要:偶然机会接触到python语音,感觉语法简单.功能强大,刚好朋友分享了一个网课<python 爬虫与数据可视化>,于是在工作与闲暇时间学习起来,并做如下课程笔记整理,整体大概分为4个 ...

Echarts可视化基础知识