Echars基础
官网链接：https://echarts.apache.org/zh/feature.html
Echarts配置项使用手册：https://echarts.apache.org/zh/option.html#title
什么是Echarts?它的作用是什么？
前言：Echarts是一个使用JS实现的开源可视化库，可以流畅的运行在PC和移动设备上。它兼容了绝大部分的浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
作用：
- 丰富的可视化类型
- 多种数据格式无需转换直接使用
- 千万数据的前端展现
- 移动端优化
- 多渲染方案，可跨平台使用
- 深度交互式数据探索
- 多维数据支持以及丰富的视觉编码手段
- 动态数据
- 绚丽的特效
- 通过GL实现更多更强大绚丽的三维可视化
- 无障碍访问
canvas完整版绘制柱形图链接：https://zhuanlan.zhihu.com/p/60285148
Echarts+vue3实现数据可视化项目
项目初始化创建
创建vue2项目
1
2
3
4
5## 安装vue/cli
npm i -g @vue/cli
## 执行创建命令
vue create 项目名称
## 税后可以选择式创建vue2项目还是创建vue3项目安装echarts库
1
npm i --save echarts
在文件中引用echarts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47<template>
<!-- echarts容器,默认高度为0 -->
<div ref="barEcharts" class="bars"></div>
</template>
<script>
//将整个echarts库导入并赋值给名为echarts的变量
import * as echarts from "echarts";
export default {
name: "HomeEcharts",
mounted() {
//对于进行数据可视化的dom元素进行初始化echarts实例
let barEcharts = echarts.init(this.$refs.barEcharts);
//指定图表的配置项
let option = {
//title：标题组件
title: {
text: "分类",
},
//x轴数据配置
xAxis: {
data: ["文学", "童话", "重生", "快穿", "玄幻"],
},
//y轴数据配置
yAxis: {},
series: [
//系列
{
name: "销量",//系列名称，用于tooltip的显示，legend的图例筛选，在setOption更新数据和配置项时用于指定对应的系列
type: "bar", //echarts图表类型，bar--柱状图
data: [200, 456, 345, 178, 564],//系列中的数据内容数组。数组项通常为具体的数据项。
},
],
};
//使用刚才指定的配置项和数据惊醒图表构建和显示
barEcharts.setOption(option);
},
};
</script>
<style>
.bars {
width: 500px;
height: 400px;
}
</style>
echarts配置项目
title配置
1 | title:{ |
tooltip配置——提示框组件
formatter可以自定义提示框内容，支持模板字符和函数回调两种形式
1 | <template> |
lenged属性
1 | <template> |
柱形图更多的效果图
1 | <template> |
饼状图——pie
基础配置：
1 | <template> |
饼状图更多效果设置：
1 | <template> |
折线图——line
基础配置
1 | <template> |
更多样式配置
1 | <template> |
堆叠的折线图
1 | <template> |
散点图——scatter
应用场景：当存在大量的数据点时，散点图与折线图相似，而不同之处在于折线图通过将点或数据点相连来显示每一个变化。
例子：
1 | <template> |
grid配置项
grid为直角坐标系内绘图网格。可以在网格上面绘制折线图，柱状图，散点图（气泡图）也就是设图标容器的距离，样式。
例子：
- show:是否显示直角坐标系网格——————————————值：true?false
- left,right,top,bootom:设置图表离容器相对应一侧的距离————值：number?百分比
- borderColor设置边框颜色
- backgroundColor设置图表的背景颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88<template>
<div ref="scatter" id="scatter"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "ScatterEcharts",
data() {
return {};
},
mounted() {
this.fn();
},
methods: {
fn() {
let scat = echarts.init(this.$refs.scatter);
scat.setOption({
title: {
text: "散点图",
},
xAxis: {},
yAxis: {},
grid:{
left:'15%',
right:'15%',
top:'15%',
bottom:'15%',
show:"true",
borderColor:'yellow',
backgroundColor:'pink'
},
series: [
{
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
name: "散点",
type: "scatter",
symbolSize: 20,
// color:'red'//设置圆点的颜色
//线性渐变效果——前四个参数分别时x0,y0,x2,y2,范围从0 - 1，相当于在图形包围盒中的百分比，如果globalColor为"true",则该四个位置是绝对的像素位
color: {
type: "linear", //线性渐变；radial径向渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "red" },//0%处的颜色
{ offset: 1, color: "blue" },//100%处的颜色
],
},
},
],
});
},
},
};
</script>
<style scoped>
#scatter {
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
k线图——candlestick
定义：K线图又称为蜡烛图或阴阳图，是一种用于显示股票或其他证券价格变化的图表。K线是以分析周期的开盘价，最高价，最低价和收盘价绘制成的。它代表的是一段时间内股票价格的涨跌情况。
雷达图——radar
1 | <template> |
漏斗图——funnel
仪表图——gauge
关系图——graph
1 | <template> |
数据区域缩放——dataZoom
1 | <template> |
树形图——tree
因为树形图上存在叶子节点，所以可以单独对叶子节点做额外的配置
1 | <template> |
dataset——数据集组件
可可实现对数据的单独管理，被多个组件复用，对数据快速排序等等
1 | <template> |
echarts主题设置
内置主题
1
2//echarts的内置主题分为light和dark两种，在初始化的时候设置——echarts.init["图表的dom设置","主题设置"]
let datas = echarts.init(this.$refs.conten,"dark");自定义主题
选择主题下载，可以点击定制主题，然后将定制好的内容下载或复制配置放在静态资源的js文件中，导出相关配置，在图表文件中应用，将原来的内置主题换成存放自定义主题配置的变量。
中国地图展示
- 准备echarts基本结构
- 设置中国地图的矢量数据创建js文件（在其中创建变量接收json数据并暴露）
地图数据下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector
- 在组件中获取地图的矢量数据（引用json数据）
- 使用地图数据创建地图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<template>
<div ref="china"></div>
</template>
<script>
import * as echarts from "echarts";
//引入地图数据
import {mapData} from "@/assets/data"
export default {
name: "MapChina",
data() {
return {};
},
mounted() {
let china = echarts.init(this.$refs.china);
//注册当前使用的地图名
echarts.registerMap("中国地图",mapData)
china.setOption({
geo:{//地理坐标组件，用于地图的绘制
type:'map',
map:"中国地图",//与上方注册的地图名一致
//设置平移和缩放的效果
roam:true,//允许平移和缩放
zoom:5,//设置初始化时地图的缩放比例
center:[113.945234,35.286109]//设置初始化时中心点的位置
}
});
},
};
</script>
<style scoped>
div {
width: 500px;
height: 500px;
}
</style>
省份地图展示
与上方的操作步骤相同
1 | <template> |
设置地图标记位置
1 | <template> |
图表自适应
采用window自带的resize设置
1 | window.addEventListener("resize",()=>{ |
例子：
1 | <template> |
如何模拟数据——json-server
全局下载 json-server
1
npm install json -g json-server
新建文件夹与文件用来模拟数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29{
"one": [
{
"value": 56,
"name": "衬衫",
"itemStyle": { "normal": { "color": "rgba(11,11,11)" } }
},
{
"value": 156,
"name": "上衣",
"itemStyle": { "normal": { "color": "rgba(55,155,51)" } }
},
{
"value": 90,
"name": "裤子",
"itemStyle": { "normal": { "color": "rgba(177,17,12)" } }
},
{
"value": 200,
"name": "裙子",
"itemStyle": { "normal": { "color": "rgba(116,61,33)" } }
},
{
"value": 121,
"name": "外套",
"itemStyle": { "normal": { "color": "rgba(0,0,0)" } }
}
]
}启动json-server
注意：启动时目录需要是当前json文件所在的文件夹下
1 | json-server --watch data.json --port 8888//port后是设置的端口号 |
下载axios
1
npm install --save axios
获取模拟数据
设置动画
pie1.showLoading()加载动画
pie1.hideLoading()关闭动画
1 | <template> |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 林南而瑜的星球！
评论
