基本的使用
使用canvas来绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts</title>
// 使用官网的CDN
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<style>
/* 使用ECharts必须要为图表定义宽高 */
#char {
height: 500px;
width: 600px;
}
</style>
</head>
<body>
<div id="char"></div>
<script>
// 1. 获取容器的DOM元素,获取的必须有宽高
const chartDom = document.getElementById('char');
// 2. 初始化图表实例,传入主题,不填默认为null
const myChart = echarts.init(chartDom, 'light');
// 配置项
const option = {
title: {
text: "ECharts 使用"
},
xAxis: {
data: ['种类1', '种类2', '种类3', '种类4']
},
yAxis: {},
// 系列,一个系列是一个图表类型
series: [{
type: "bar",
data: [10, 20, 30]
},
{
type: "line",
data: [10, 20, 30]
}
]
};
//
option && myChart.setOption(option);
</script>
</body>
</html>
引入主题
在主题编辑器里进行编辑
编辑好后，下载编辑好后的代码
<!-- 引入自己选择好的主题，可以是*.JS的也可以是*.JSON的文件 -->
<script src="./echarts.js"></script>
// 初始化图表实例,传入主题名称，这里我引入的主题名称是 walden
const myChart = echarts.init(chartDom, 'walden');
使用SVG和canvas哪个比较好？
ECharts4.0推出SVG绘制，老版本可能会报错- 轻量数据使用
SVG更好，SVG在内存占用上会比canvas少一些。在一些移动端上崩溃的概率就会低一些。 SVG的渲染性能会好一些，SVG是矢量图放大不失真，而且基于SVG基于XML- 超大屏显示比较倾向于使用
SVG - 大量数据建议使用
canvas
const myChart = echarts.init(chartDom, 'light', { renderer:'svg'});
series的配置
每一个对象就是一个图表，在一个对象里进行图标的设置
series: [{
type: 'pie', //饼图
radius: 35, //半径
center: [120, 100], //位置 可以是像素 也可以是百分比
data: [{
name: '分类1', //饼图的饼名
value: 60 //值
}, {
name: '分类2',
value: 80
}, {
name: '分类3',
value: 10
}, {
name: '分类4',
value: 70
}]
},
{
type: 'line',
data: [30, 25, 35, 40]
}, {
type: 'bar',
data: [30, 25, 35, 40]
}
]
dataset
4.0版本推出的属性，用来管理数据，复用数据。
const option = {
// 数据集合是一个
dataset: {
// 二维数组管理数据
source: [
['quarter', 'v1', 'v2', 'kind', 'v3'],
['第一季度', 55, 30, '种类1', 60],
['第二季度', 50, 35, '种类2', 80],
['第三季度', 53, 40, '种类3', 70],
['第四季度', 55, 24, '种类4', 90],
]
},
title: {
text: "ECharts 使用"
},
// 声明一个 X 轴，类目轴（category）。
// 默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category'
},
yAxis: {},
// 系列,一个系列是一个图表类型
series: [{
type: 'pie', //饼图
radius: 10, //半径
center: [200, 50], //位置 可以是像素 也可以是百分比
// 使用dataset的数据
encode: {
itemName: 'kind',
value: 'v3'
}
},
{
type: 'line',
// 使用dataset的数据
encode: {
x: 'quarter',
y: 'v1'
}
}, {
type: 'bar',
encode: {
x: 'quarter',
y: 'v2'
}
}
]
};