echarts基本概念
1.系列（series）
系列（series）是指：一组数值映射对应的图
1-1.png
2.echarts 4.0 新特性 dataset
4.0版本支持了数据集（datatset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。
1-2.png
- 案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>echartsDemo</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js"></script>
<style>
#chart {
margin-top: 200px;
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
</body>
<script>
const chartDemo = document.getElementById('chart');
const chart = echarts.init(chartDemo);
chart.setOption({
dataset: {
// 提供一份数据。
source: [
['product', 45, 80, '2015', 120],
['Matcha Latte', 43.3, 90, '2016', 110.7],
['Milk Tea', 83.1, 85, '2017', 55.1],
['Cheese Cocoa', 86.4, 100, '2018', 98.5],
['Walnut Brownie', 72.4, 97, '2019', 97.1],
],
},
title: {
text: 'Echarts 多坐标系列案列',
},
xAxis: {
data: [
'product',
'Matcha Latte',
'Milk Tea',
'Cheese Cocoa',
'Walnut Brownie',
],
},
yAxis: {},
series: [
{
type: 'pie',
center: ['65%', 60],
radius: 60,
encode: { itemName: 3, value: 4 }, // dataset 中位置为3，值为4的列
},
{
type: 'bar',
encode: { x: 0, y: 1 }, // x:0 表示dataset第0个值，值是第1位的值
},
{
type: 'line',
encode: { x: 0, y: 2 },
},// x:0 表示dataset第0个值，值是第2位的值
],
});
</script>
</html>
-
案列效果
1-3.png
3.组件
echarts中除了绘图之外其他部分，都可抽象为组件。例如，echarts中至少有这些组件：
xAxis(直角坐标系X轴),yAxis（直角坐标系Y轴），grid(直角坐标系底板),angleAxis(极坐标系度轴)...
1-4.png
4.自定义主题和svg渲染
- 自定义主题
https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B
- svg渲染
默认是canvas渲染，频繁更新动画，用canvas效果更好
大屏幕展示，svg不失真，效果更好
const chartDemo = document.getElementById('chart');
// 第三个参数，渲染对象设置为svg,m默认是canvas
const chart = echarts.init(chartDemo, 'infographic', { renderer: 'svg' });
5.定位（grid）
1-5.png
