1.课程介绍与目标
有句话说的好“一图胜千言”，在我们开发的领域就是说，在对于复杂难懂且体量庞大的数据展示上面而言，图表的信息量要大得多，这也是我们为什么要谈数据可视化。https://notes.xiyankt.com/#/echarts/echarts
study-notes/echarts/echarts.md · James/技术笔记 - Gitee.com
2.数据可视化介绍
数据可视化这一概念自 1987 年正式提出，经过 30 余年的发展，逐渐形成 3 个分支：科学计算可视化(scientific visualization) 、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这 3 个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。
什么是数据可视化？
顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，我们看不懂的数据通过图形化的手段进行有效地表达， 准确高效、简洁全面地传递某种信息，甚至我们帮助发现某种规律和特征，挖掘数据背后的价值。同时关于数据可视化的定义有很多，像百度百科的定义是：数据可视化，是关于数据视觉表现形式的科学技术研究。 其中，这种数据的视觉表现形式被定义为一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。 这种定义可能显得比较晦涩难懂。在大数据分析工具和软件中提到的数据可视化，就是利用运用计算机图形学、图像、人机交互等技术，将采集或模拟的数据映射为可识别的图形、图像。
数据可视化的展现形式
数据可视化有众多展现方式，不同的数据类型要选择适合的展现方法。在数据可视化中除了常用的的柱状图、线状图、条形图、面积图、饼图、点图、仪表盘、 走势图外，还有和弦图、圈饼图、金字塔、漏斗图、K线图、关系图、网络图、玫瑰图、帕累托图、数学公式图、预测曲线图、正态分布图、迷你图、行政地图、 GIS地图等各种展现形式。都可以为我们提供丰富的图表选择，让我们在实际使用过程中有更好的展现方式。
我们可以通过类柱状图
比较类图表显示值与值之间的不同和相似之处。 使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小， 通常用于展示不同分类间的数值对比，不同时间点的数据对比。
柱形图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中"有多少？"这个问题。 需要注意的是，当柱状图显示的分类很多时会导致分类名重叠等显示问题。
同时可以通过占比类图表显示同一维度上的占比关系。饼图广泛应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各个分类。
饼图通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。
也可以趋势类折线图
趋势类图表显示数据的变化趋势。 使用图形的位置表现数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
当然，大数据可视化的图表远远不止以上几种，最关键的是如何利用好这些工具及图表，归纳起来，一名数据可视化工程师需要具备三个方面的能力，数据分析能力、交互视觉能力、研发能力。
数据可视化有什么用？
数据可视化的意义是帮助人更好的分析数据，信息的质量很大程度上依赖于其表达方式。对数字罗列所组成的数据中所包含的意义进行分析， 使分析结果可视化。其实数据可视化的本质就是视觉对话。数据可视化将技术与艺术完美结合，借助图形化的手段，清晰有效地传达与沟通信息。 一方面，数据赋予可视化以价值；另一方面，可视化增加数据的灵性，两者相辅相成，帮助企业从信息中提取知识、从知识中收获价值。 精心设计的图形不仅可以提供信息，还可以通过强大的呈现方式增强信息的影响力，吸引人们的注意力并使其保持兴趣，这是表格或电子表格无法做到的。
3.Echarts--商业级数据图表介绍
1.什么是Echarts
Echarts--商业级数据图表，它是一个纯JavaScript的图标库，可以流畅的运行在PC和移动设备上， 兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等，底层依赖轻量级的Canvas类库ZRender， 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
2. Echarts特点
- 1 、丰富的可视化类型 : 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
- 2 、多种数据格式无需转换直接使用 : 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
- 3 、 千万数据的前端展现 : 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
- 4 、 移动端优化 : 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
- 5 、 多渲染方案，跨平台使用 : 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
- 6 、 深度的交互式数据探索 : 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
- 7 、 多维数据的支持以及丰富的视觉编码手段 : 对于传统的散点图等，传入的数据也可以是多个维度的。
- 8 、 动态数据 : 数据的改变驱动图表展现的改变。
- 9 、 绚丽的特效 : 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
5.HelloWord 初体验
1.echarts获取
电脑上面安装node下载地址：http://nodejs.cn/
淘宝镜像（选按）
淘宝 NPM 镜像站自 2014 年 正式对外服务。于npm命令在国内下载速度很慢。所以淘宝每隔 10 分钟就会把npm服务器的内容拉取一次放在国内服务器 这样一来我们在下载依赖的时候 速度会快很多
npm install - g cnpm - -registry=https://registry.npm.taobao.org
安装
- 1.初始化 npm init -y
- 2.安装echarts依赖
npm install --save echarts
2.HelloWord
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// echarts仅有一个方法init，执行init时传入一个具备大小
// （如果没有指定容器的大小将会按照0大小来处理即无法看到图表）的dom节点后即可实例化出图表对象，图表库实现为多实例的，
// 同一页面可多次init出多个图表。
var myChart = echarts.init(document.getElementById("main")); // 绘制图表 //setOption方法设置图表实例的配置项以及数据所有参数和数据的修改都可以通过setOption完成，ECharts会合并新的参数和数据，然后刷新图表。
myChart.setOption({
title: {
//echarts标题
text: "ECharts 入门示例",
},
//tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框。
tooltip: {},
// 不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的置。
legend: {}
,
//横坐标 xAxis配置 直角坐标系x轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
}
,
yAxis: {}
,
//系列（series）
// 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在echarts中取其扩展的概念，不仅表示数据，也表示数据映射成为的图
// charts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
})
;
},
};
</script>
<style>
#main {
width: 500px;
height: 500px;
}
</style>
6. 配置项--title配置
title 标题组件，包含主标题和副标题
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
title: {
show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: "1主标题", //主标题文本，'\n'指定换行
// link:'http://www.baidu.com', //主标题文本超链接,默认值true
// target: "self", //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题',
//副标题文本，'\n'指定换行
// sublink: '', //副标题文本超链接
// subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
// x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' |'right' | {number}（x坐标，单位px）
// y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center'|{number}（y坐标，单位px）
// backgroundColor: 'red', //标题背景颜色，默认'rgba(0,0,0,0)'透明
// borderWidth: 5, //标题边框线宽，单位px，默认为0（无边框）
// borderColor: '#ccffee', //标题边框颜色,默认'#ccc'
// padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
// itemGap: 10, //主副标题纵向间隔，单位px，默认为10
// textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight":"bolder", "color":"#333"}
// fontFamily: 'Arial, Verdana, sans...',
// fontSize: 12,
// fontStyle: 'normal',
// fontWeight: 'normal', // },
// subtextStyle: {//副标题文本样式{"color": "#aaa"}
// fontFamily: 'Arial, Verdana, sans...',
// fontSize: 12,
// fontStyle: 'normal',
// fontWeight: 'normal',
// },
// subtextStyle: {
// color: "#a1b2c3", // 副标题文字的颜色。
// fontStyle: "normal", // 副标题文字字体的风格。 'normal' 'italic''oblique'
// fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold''bolder''lighter'500 | 600。
// fontSize: 18, // 字体大小
// lineHeight: "130", // 行高
// textBorderColor: "red", // 文字本身的描边颜色。
// textBorderWidth: 5, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
// },
},
tooltip: {}
,
legend: {}
,
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
}
,
yAxis: {}
,
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
}
)
;
},
}
;
</script>
<style>
#main {
width: 500px;
height: 500px;
}
</style>7. 配置项--tooltip
提示框组件，用于配置鼠标滑过或点击图表时的显示框
<template>
<div className="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
title: {
text: '主标题'
},
tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器'cross'十字准星指示器。
}
,
// showContent: true, //是否显示提示框浮层，默认显示。
// triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
}
,
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
// formatter: '{a}--{b} 的成绩是 {c}'
formatter: function (arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
legend: {}
,
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
}
,
yAxis: {}
,
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
})
;
},
};
</script>
<style>
#main {
width: 500px;
height: 500px;
}
</style>8.配置项--legend
图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
title: {
text: '主标题'
},
tooltip: {},
legend: {
show: true, //是否显示
icon: "circle",//图例样式
// top: "55%", // 组件离容器的距离
// bottom:"20%", // 组件离容器的距离
// right: "5%",// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是'left', 'center', 'right'
// left:"10%" // // 组件离容器的距离
// padding: 5, // 图例内边距
// itemWidth: 6, // 图例标记的图形宽度。
// itemGap: 20, // 图例每项之间的间隔。
// itemHeight: 14, // 图例标记的图形高度。
// selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成false关闭。
inactiveColor: "#fffddd", // 图例关闭时的颜色。
textStyle: {//图例的公用文本样式。
// color: "#aabbcc", // 文字的颜色。
// fontStyle: "normal", // 文字字体的风格。'italic'
// fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder''lighter'100 | 200 | 300 | 400...
// fontFamily: "sans-serif", // 文字的字体系列。
// fontSize: 12, // 文字的字体大小。
// lineHeight: 20, // 行高。
// backgroundColor: "transparent", // 文字块背景色。
// borderColor: "transparent", // 文字块边框颜色。
// borderWidth: 0, // 文字块边框宽度。
// borderRadius: 0, // 文字块的圆角。
// padding: 0, // 文字块的内边距
// shadowColor: "transparent", // 文字块的背景阴影颜色
// shadowBlur: 0, // 文字块的背景阴影长度。
// shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
// shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// // width: 50, // 文字块的宽度。 默认
// // height: 40, // 文字块的高度 默认
// textBorderColor: "transparent", // 文字本身的描边颜色。
// textBorderWidth: 0, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
}
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
}
,
yAxis: {}
,
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
})
;
},
};
</script>
<style>
#main {
width: 500px;
height: 500px;
}
</style>9.柱状图基本设置
柱状图：一种图表类型,因为构成是由一根一根类似柱子的数据条组合而成的坐标平面,所以命名为柱状图。主要是用来反应对比数据之间的关系,也可以用来反应数据的变化趋势等等。
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = {
xAxis: {//配置x轴坐标参数
data: xData,
type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data或 dataset.source 中取，或者可通过xAxis.data设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: {
//配置y轴坐标参数
type: "value", //同x轴的参数
}
,
series: [
//系列 配置图表的类型
{
type: "bar",
name: "销量", //系列名称，用于提示框组件的显示，
data: yData,
},
],
}
;
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
10.柱状图效果实现
当基本的柱状图设置完之后我们来看一下 柱状图的更多设置 柱状图标记效果最大值最小值平均值 通过markPoint进行设置
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = {
xAxis: {
//配置x轴坐标参数
data: xData,
type: "category", //坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data或 dataset.source 中取，或者可通过xAxis.data设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: {//配置y轴坐标参数
type: "value", //同x轴的参数
}
,
series: [
//系列 配置图表的类型
{
type: "bar",
name: "销量", //系列名称，用于提示框组件的显示，
data: yData,
markPoint: {
//图表标注。
data: [
//标注的数据数组。每个数组项是一个对象
//最大值最小值
{
type: "max", //直接用 type 属性标注系列中的最大值，最小值。
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
markLine: {
//图表标线
data: [
//标线的数据数组。
//平均值
{
type: "average",
name: "平均值",
},
],
},
},
],
}
;
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>11.柱状图效果实现2--xAxis，yAxis
水平柱状图通过设置xAxis yAxis中的type属性值来进行设置barWidth : xx,设置柱图宽度设置单独柱子的颜色
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = {
xAxis: {
type: "value", //数值轴
//坐标轴类型。'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data或 dataset.source 中取，或者可通过xAxis.data设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
},
yAxis: {
data: xData,
type: "category", //设置y为类目轴
}
,
series: [
{
type: "bar",
name: "销量",
data: yData,
barWidth: 50, //设置宽度
// color:"red",//设置颜色
// 单独设置每个柱子的颜色
itemStyle: {
normal: {
//每根柱子颜色设置
color: function (params) {
let colorList = [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#91c7ae",
];
return colorList[params.dataIndex];
},
},
},
markPoint: {
data: [
{
type: "max",
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
markLine: {
data: [
{
type: "average",
name: "平均值",
},
],
},
},
],
}
;
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
12.饼状图基本设置
饼状图是用整个圆表示总体的数量或整体值“1”，用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比。一般由标题（包括单位）、图例和数据等组成。
- 1.主要运用在对数据进行比较分析的时候，既可以表示绝对量，又可以表示相对量。
- 2.比柱形图等好在：数据更为清晰，各部分占总体的比重大小更为直观，可谓一目了然
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted() {
// 1.初始化let myChart=echarts.init(this.$refs.myChart)
// 2.设置echarts数据
let data = [
{value: 67, name: '美食'},
{value: 85, name: '日化'},
{value: 45, name: '数码'},
{value: 98, name: '家电'}
]
// 3.设置配置项
let option = {
title: {
text: '饼状图',
subtext: '基本设置',
left: 'center'//设置位置居中
},
tooltip: {
trigger: 'item'//触发类型item数据项图形触发
},
legend: {
orient: 'vertical',//图例列表的布局朝向vertical纵向
left: 'left'
},
series: [
{
name: '销售量',
type: 'pie',//饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
data
}
]
}
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
13.饼状图效果实现
但是饼状图还有更多的效果
环形图 样式等内容设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart)
// 2.设置echarts数据
// let data=[
// { value: 67, name: '美食' },
// { value: 85, name: '日化' },
// { value: 45, name: '数码' },
// { value: 98, name: '家电' }
// ]
let data = [
{
value: 67,
name: '美食',
itemStyle: {
normal: {
color: 'rgb(1,175,80)'
}
}
},
{
value: 85,
name: '日化',
itemStyle: {
normal: {
color: 'rgb(255,175,80)'
}
}
},
{
value: 45,
name: '数码',
itemStyle: {
normal: {
color: 'rgb(1,0,80)'
}
}
},
{
value: 98,
name: '家电',
itemStyle: {
normal: {
color: 'rgb(30,50,70)'
}
}
}
]
// 单独设置每个颜色
// 3.设置配置项
let option = {
title: {
text: '饼状图',
subtext: '基本设置',
left: 'center'//设置位置居中
},
tooltip: {
trigger: 'item'//触发类型item数据项图形触发
},
legend: {
orient: 'vertical',//图例列表的布局朝向vertical纵向
left: 'left'
},
series: [
{
name: '销售量',
type: 'pie',
// 设置环形图
radius: ['40%', '70%'],//饼图的半径。数组的第一项是内半径，第二项是外半径。
// 设置环形图
label: {//饼图图形上的文本标签
show: true,
position: "inside",//outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置
color: "yellow"
},
labelLine: {//标签的视觉引导线配置
show: false
},
roseType: 'area',//是否展示成南丁格尔图，通过半径区分数据大小
itemStyle: {//设置内容样式
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data
}
]
}
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>14.折线图基本设置
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。
不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况。易于显示数据变化趋势，可以直观地反映这种变化以及各组之间的差别。
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart)
// 2.设置数据
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data = [150, 230, 224, 218, 135, 147, 260]
// 3.设置配置项
let option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'//设置系列为折线图
}
]
};
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>15.折线图效果实现
设置平滑过渡样式 并且可以对内容进行颜色的填充 加上对应的标记点
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart)
// 2.设置数据
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data = [150, 230, 224, 218, 135, 147, 260]
// 3.设置配置项
let option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line',//设置系列为折线图
smooth: true,//是否平滑曲线显示如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为true时相当于设为0.5
areaStyle: {}
,//区域填充样式。设置后显示成区域面积图。
markPoint: {//图表标注。
data: [
{type: 'max', name: 'Max'},
{type: 'min', name: 'Min'}
]
}
,
markLine: {//图表标线。
data: [{type: 'average', name: 'Avg'}]
}
}
]
}
;
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
16.折线图堆叠效果
设置多折折线效果
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置数据
let xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
// 3.设置配置项
let option = {
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
series: [
{
name: "美食",
type: "line",
stack: "num", //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
data: [120, 132, 101, 134, 90, 230, 210],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
}
,
},
{
name: "日化",
type: "line",
stack: "num",
data: [220, 182, 191, 234, 290, 330, 310],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
}
},
{
name: "熟食",
type: "line",
stack: "num",
data: [150, 232, 201, 154, 190, 330, 410],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
}
},
],
}
;
// 4.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
17.散点图基本效果设置
当存在大量数据点时，散点图的作用尤为明显。散点图与折线图相似，而不同之处在于折线图通过将点或数据点相连来显示每一个变化。
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[9.0, 7.04],
[18.07, 4.33],
[3.0, 9.65],
[9.05, 8.23],
[18.0, 9.76],
[15.0, 7.56],
[23.4, 5.31],
[10.1, 7.47],
[16.0, 8.26],
[12.7, 3.53],
[9.35, 7.2],
[7.4, 8.2],
[3.07, 4.82],
[18.2, 6.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[17.0, 6.55],
[12.0, 8.84],
[8.18, 5.82],
[6.32, 5.68],
],
type: "scatter",//散点图
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>18.散点图效果实现
样式相关设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {},
yAxis: {},
tooltip: {},//提示框组件
series: [
{
symbolSize: 20,
data: [
[9.0, 7.04],
[18.07, 4.33],
[3.0, 9.65],
[9.05, 8.23],
[18.0, 9.76],
[15.0, 7.56],
[23.4, 5.31],
[10.1, 7.47],
[16.0, 8.26],
[12.7, 3.53],
[9.35, 7.2],
[7.4, 8.2],
[3.07, 4.82],
[18.2, 6.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[17.0, 6.55],
[12.0, 8.84],
[8.18, 5.82],
[6.32, 5.68],
],
type: "scatter", //散点图
// 圆形样式
color: {//线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00CCFF", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 173, 119, 1)", // 100% 处的颜色
},
],
globalCoord: true, // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
}
,
emphasis: {//高亮的图形和标签样式
itemStyle: {
borderColor: "rgba(102,205,46,0.30)",
borderWidth: 30,
}
,
}
,
}
,
],
}
;
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
19.配置项--grid
grid 为直角坐标系内绘图网格。可以在网格上绘制折线图，柱状图 散点图（气泡图）也就是设置图标离容器的距离 样式
<template>
<div class="about">
<!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
let yData = [88, 75, 20, 210, 35];
let option = {
xAxis: {
data: xData,
type: "category",
},
yAxis: {
type: "value",
},
// grid配置项：图标离容器的距离
// show:是否显示直角坐标系网格-----------值:true?false
// left:图表离容器左侧的距离-----------------值:number?百分比
// top:图表离容器顶部的距离-----------------值:number?百分比
// right:图表离容器右侧的距离---------------值:number?百分比
// bottom:图表离容器底部的距离------------值:number?百分比
// backgroundColor:网格背景色-------------值:rgba或#000000
// borderColor:网格的边框颜色--------------值:rgba或#000000
// borderWidth:网格的边框线宽-------------值:number
grid: {
show: true,
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
backgroundColor: "rgba(224, 17, 17, 1)",
borderColor: "rgba(96, 67, 67, 1)",
},
series: [
{
type: "bar",
name: "销量",
data: yData,
},
],
};
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
20.K 线图
K线图可以查看k线历史走势，近期趋势，是上涨还是下跌，是调整还是震荡。分析k线的高低点和相对高低点。方便对于数据的走势进行查看
基本设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {
data: ["蔬菜", "水果", "熟食", "便捷食品"],
},
yAxis: {},
series: [
{
type: "candlestick",//k线图
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>21 k线图效果优化
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
]
}
},
computed: {
newarr() {
let linstdata = this.data.map((v) => {
return v[0]
})
return linstdata
}
},
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {
data: ["蔬菜", "水果", "熟食", "便捷食品"],
},
yAxis: {},
tooltip: {
//设置提示框
trigger: "axis",
axisPointer: {
type: "cross",
},
},
series: [
{
type: "candlestick", //k线图
data: this.data,
itemStyle: {
color: "#ec0000", //上涨的颜色
color0: "#00da3c", //下跌的颜色
borderColor: "#8A0000", //上涨的边框色
borderColor0: "#008F28", //下跌的边框色
},
markPoint: {
data: [
{
name: "最大值",
type: "max",
valueDim: "highest", //valueDim 指定是在哪个维度上的最大值、最小值、平均值
},
{
name: "最小值",
type: "min",
valueDim: "lowest",
},
{
name: "平均值",
type: "average",
valueDim: "close",
},
],
},
},
{
name: "MA20",
type: "line",
data: this.newarr,
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>22.雷达图
基本设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
title: {
text: "雷达图",
},
radar: [//雷达图坐标系组件，只适用于雷达图
{
// shape: 'circle',//设置及雷达图效果
indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name: "蔬菜", max: 6500},
{name: "水果", max: 16000},
{name: "熟食", max: 30000},
{name: "数码", max: 38000},
{name: "家电", max: 52000},
{name: "日化", max: 25000},
],
},
],
series: [
{
type: "radar", //雷达图
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "销量",
},
],
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>23.雷达图效果优化
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
title: {
text: "雷达图",
},
radar: [//雷达图坐标系组件，只适用于雷达图
{
// shape: 'circle',//设置及雷达图效果
indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name: "蔬菜", max: 6500},
{name: "水果", max: 16000},
{name: "熟食", max: 30000},
{name: "数码", max: 38000},
{name: "家电", max: 52000},
{name: "日化", max: 25000},
],
radius: 120,//b半径
startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度(可以让内容旋转)
splitNumber: 10,//指示器轴的分割段数(内部的分割数量)。
shape: "circle",//雷达图绘制类型
axisName: {//雷达图每个指示器名称的配置项
formatter: "【{value}】",//使用字符串模板，模板变量为指示器名称 {value}
color: "#428BD4",
},
splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
areaStyle: {//分隔区域的样式设置。
color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowBlur: 10,
},
},
},
],
series: [
{
type: "radar", //雷达图symbol: "rect",//标记的图形。
symbolSize: 12,//标记大小
lineStyle: {
type: "dashed",
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "销量",
areaStyle: {
//设置填充
color: "rgba(255, 228, 52, 0.6)",
},
},
],
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>24.漏斗图 基本设置
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
title: {
text: "漏斗图",
},
tooltip: {//设置弹框
trigger: "item",
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
type: "funnel",//设置漏斗图
data: [
{value: 60, name: "美食"},
{value: 40, name: "日化"},
{value: 20, name: "数码"},
{value: 80, name: "家电"},
{value: 100, name: "蔬菜"},
],
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>25 漏斗图效果实现
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
title: {
text: "漏斗图",
},
tooltip: {//设置弹框
trigger: "item",
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
type: "funnel",//设置漏斗图
left: "10%",//漏斗图组件离容器左侧的距离
top: 60,//顶部距离
bottom: 60,//底部距离
//width: "80%",
min: 0,//指定的数据最小值。
max: 100,
minSize: "0%",//数据最小值 min 映射的宽度。
maxSize: "100%",
sort: "ascending",//数据排序递减的 ascending递增 none根据数据
gap: 2,//数据图形间距。
label: {//提示信息位置
show: true,
position: "inside",
},
itemStyle: {//漏斗图样式
borderColor: "red",
borderWidth: 2,
},
emphasis: {//选中高亮的标签和图形样式。
label: {
fontSize: 30,
},
},
data: [
{value: 60, name: "美食"},
{value: 40, name: "日化"},
{value: 20, name: "数码"},
{value: 80, name: "家电"},
{value: 100, name: "蔬菜"},
],
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
