echartsDay01 echarts 绘图流程 颜色主题 切换canvas 和svg echarts基本概念 组件 组件定位 坐标系
程序员文章站
2022-07-14 15:45:51
...
目录
0x00 Echart 绘图流程
- 引入js库
- 编写绘图容器
- 获取绘图容器Dom对象
- 将Dom对象传入，初始化chart对象
- 配置chart对象
入门案例：
代码：
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 12:44:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);
chart.setOption({
title:{
text:'ECharts入门案例',
},
//x轴
xAxis:{
data:['食品','数码','服饰','箱包']
},
//y轴
yAxis:{},
//数据和图标类型
series:{
type:'bar',//bar表示柱状图
data:[100,200,90,150]
}
});
</script>
</body>
</html>0x01 颜色主题
Echarts4内置的两种主题
var chart = echarts.init(dom, 'light');var chart = echarts.init(dom, 'dark');其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器（https://www.echartsjs.com/theme-builder/） 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：
保存为js文件，然后直接输入主题的名字即可。
const chart = echarts.init(chartDom,'purple-passion');0x02 使用 Canvas 或者 SVG 渲染
默认为canvas，可以修改为svg
// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});频繁更新动画：选择canvas
大屏显示：选择svg
0x03 ECharts 基本概念
#系列：一组数值（可以理解为数组）映射成对应的图
一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。
demo：
一个坐标系中绘制多个系列：
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 13:57:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src='theme.js'></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'});
chart.setOption({
title:{
text:'ECharts多系列案例',
},
//x轴
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
//y轴
yAxis:{},
//数据和图标类型
series:[
{
type:'pie',
center:['65%',60], //距离左侧百分之65，距离上侧60px
radius:35,
data:[
{name:'分类1',value:50},
{name:'分类2',value:60},
{name:'分类3',value:55},
{name:'分类4',value:79}
]
},
{
type:'line',
data:[100,200,96,123],
},
{
type:'bar',//bar表示柱状图
data:[100,200,90,150]
}
]
});
</script>
</body>
</html>以上这种写法数据源是分散的，且难以实现数据的复用。为了数据的复用和维护的方便，echart4.0引入了dataset
只需要维护一个source数组，用encode来取代原来的data,其中0代表source中的第0列，1代表source中的第1列......
以下用dataset进行改写：
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 14:24:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src='theme.js'></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'});
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类1',50],
['二季度',112,81,'分类2',60],
['三季度',96,88,'分类3',55],
['四季度',123,72,'分类4',70],
]
},
title:{
text:'ECharts多系列案例',
},
//x轴
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
//y轴
yAxis:{},
//数据和图标类型
series:[
{
type:'pie',
center:['65%',60], //距离左侧百分之65，距离上侧60px
radius:35,
encode:{itemName:3,value:4}
},
{
type:'line',
encode:{x:0,y:1}
},
{
type:'bar',//bar表示柱状图
encode:{x:0,y:2}
}
]
});
</script>
</body>
</html>0x04 组件
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...
我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。
dome：
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'light',{renderer:'svg'});
var option = {
dataset:{
source:[
['一季度',100,79,'分类1',50],
['二季度',112,81,'分类2',60],
['三季度',96,88,'分类3',55],
['四季度',123,72,'分类4',70],
]
},
//定位
grid:{
top:100,
left:'10%',
right:'10%',
bottom:100,
},
title:{
text:'ECharts多系列案例',//正标题
subtext:'数据可视化案例副标题',//副标题
},
//图例
legend:{
left:300,//控制图例的位置
data:[{
name:'分类',
icon:'circle',
textStyle:{
color:'#fff'
}
},'折线图','柱状图'],//和系列的name属性相绑定
},
toolbox:{
feature:{
//区域缩放
dataZoom:{
yAxis:false,
},
//区域还原
restore:{},
//保存为图片
saveAsImage:{}
}
},
dataZoom:[
{
show:true,
start:0,//起始位置的百分比
end:100,//结束位置的百分比
}
],
//x轴
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
//y轴
yAxis:{},
//数据和图标类型
series:[
{
name:'分类',
type:'pie',
center:['65%',60], //距离左侧百分之65，距离上侧60px
radius:35,
encode:{itemName:3,value:4}
},
{
name:'折线图',
type:'line',
encode:{x:0,y:1}
},
{
name:'柱状图',
type:'bar',//bar表示柱状图
encode:{x:0,y:2}
}
]
};
chart.setOption(option);0x05 组件的定位：
不同的组件、系列，常有不同的定位方式。
[类 CSS 的绝对定位]
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
- 绝对数值（例如
bottom: 54表示：距离 echarts 容器底边界54像素）。 - 或者基于 echarts 容器高宽的百分比（例如
right: '20%'表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的20%）。
如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。
0x06 坐标系
#散点图
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 15:17:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src='theme.js'></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'light',{renderer:'svg'});
var option = {
xAxis:{},
yAxis:{},
dataset:{
source:[
[13,44],
[18,63],
[29,48],
[14,63],
]
},
series:[{
type:'scatter',//散点图
encode:{x:0,y:1}
}
]
};
chart.setOption(option);
</script>
</body>
</html>#双坐标系：
两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：
Demo：
代码：
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 16:08:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src='theme.js'></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'light',{renderer:'canvas'});
var option = {
xAxis:{
type:'category'
},
yAxis:[{},{
splitLine:{
show:false,
}
}],
dataset:{
source:[
['product','2012','2013','2014','2015'],
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
series:[{
type:'bar',
seriesLayoutBy:'row',//以行的方式进行取数
yAxisIndex:0 //表示该柱状图对应第一个坐标系
},
{
type:'line',
seriesLayoutBy:'row',
yAxisIndex:1,
}
]
};
chart.setOption(option);
</script>
</body>
</html>#多坐标系
<!--
* @Author: your name
* @Date: 2020-07-03 12:33:40
* @LastEditTime: 2020-07-03 16:33:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-echarts.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src='theme.js'></script>
<style>
.chart{
width:800px;
height:400px;
}
</style>
</head>
<body>
<!-- 容器组件 -->
<div class='chart' id='chart'></div>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom,'dark',{renderer:'canvas'});
var option = {
grid:[{
bottom:'55%'
},{
top:'55%',
}],
xAxis:[{
type:'category',
gridIndex:0,
},
{
type:'category',
gridIndex:1,
}],
yAxis:[{
min:0,
max:100,
gridIndex:0
},{
splitLine:{
show:false,
},
gridIndex:0,
},{
min:0,
max:100,
gridIndex:1,
}],
dataset:{
source:[
['product','2012','2013','2014','2015'],
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
series:[{
type:'bar',
seriesLayoutBy:'row',//以行的方式进行取数
xAxisIndex:0,
yAxisIndex:0 //表示该柱状图对应第一个坐标系
},
{
type:'line',
seriesLayoutBy:'row',
xAxisIndex:0,
yAxisIndex:1,
},
{
type:'bar',
seriesLayoutBy:'row',
xAxisIndex:1,
yAxisIndex:2
}
]
};
chart.setOption(option);
</script>
</body>
</html>