Echarts入门
1、引入方式
1.1. 从GitHub获取:下载地址:https://www.jsdelivr.com/package/npm/echarts
选择 dist/echarts.js,点击并保存为 echarts.js 文件
1.2. 从cdn获取:https://lib.baomitu.com/echarts/4.7.0/echarts.min.js
2、使用方式
2.1. 引入 echarts.js 文件
<script src="echarts.js"></script>
2.2.建立DOM容器:为 ECharts 准备一个定义了宽高的 DOM,初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 opts.width 或 opts.height 将其覆盖。
<div id="main" style="width: 600px;height:400px;"></div>
2.3.基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
2.4.指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
2.5.显示图表:使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3、常用配置项
官网参考:https://echarts.apache.org/zh/option.html#title
3.1. 标题 title
const option = {
title: { //title的各个属性
text: '前端',
left: 'center',
subtext: 'echarts',
textStyle: {
color:'#333',
fontSize: 24
},
subtextStyle: {
color: '#333',
fontSize: 12
},
},
}
3.2. 类目
x轴类目:xAxis
y轴类目:yAxis
xAxis: {
data: ['css', 'html', 'js', 'ts', 'vue', 'react']
},
yAxis: {},
3.3. 提示框 tooltip
tooltip:{
trigger:'item'
}
3.4. 系列 series
一个系列就写对象,多个系列就写数组
series: [
{
name: '书本',
type: 'bar',
data: [8, 20, 36, 10, 10, 24],
colorBy:'series'
},
{
name: '练习',
type: 'bar',
data: [5, 12, 12, 5, 34, 76],
colorBy: 'series'
},
{
name: '销量',
type: 'bar',
data: [3, 24, 36, 21, 45, 43],
colorBy: 'series'
}
],
3.5. 颜色
系列颜色:color
调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
背景颜色:backgroundColor
color:['#d87c7c','#919e8b','#d7ab82','#6e7074','#61a0a8','#efa18d'],
backgroundColor:'rgba(254,248,239,1)',
页面渲染效果如下:
4、数据集 dataset
使用 数据集 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。
参考地址:https://echarts.apache.org/zh/option.html#dataset.dimensions
把数据集( dataset )的行或列映射为系列(series)
var mapOption = {
// 方法一
dataset: {
dimensions: ['product', '2005', '2006', '2007'],//定义列
source: [
{ product: '中华小子', '2005': 43.3, '2006': 85.8, '2007': 93.7 },
{ product: '虹猫蓝兔七侠传', '2005': 83.1, '2006': 73.4, '2007': 55.1 },
{ product: '神厨小福贵', '2005': 86.4, '2006': 65.2, '2007': 82.5 },
{ product: '神兵小将', '2005': 72.4, '2006': 53.9, '2007': 39.1 }
]
},
// 方法二:
dataset: {
source: [
['product', '2005', '2006', '2007'],//定义列
// 行数据
[ '中华小子',43.3,85.8,93.7],
['虹猫蓝兔七侠传', 83.1,73.4, 55.1],
['神厨小福贵',86.4, 65.2,82.5],
['神兵小将',72.4,53.9,39.1]
]
},
}
数据到图形的映射( series.encode )
var gardenOption = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, '栀子花'],
[57.1, 78254, '海棠花'],
[74.4, 41032, '丁香'],
[50.1, 12755, '水仙'],
[89.7, 20145, '茉莉'],
[68.1, 79146, '茶花'],
]
},
color: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],
backgroundColor: 'rgba(254,248,239,1)',
xAxis: {},
yAxis: { type: 'category' },
series: [
{
type: 'bar',
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
},
colorBy: 'data',
}
],
tooltip: {
trigger: 'item'
}
};
PS:如有错误,欢迎指正~