基于 4.0
// 1. 获取容器DOM元素
const chartDOM = document.getElementById('chart);
// 2. 初始化图表实例
/**
* init 方法
* 参数1:要渲染的DOM
* 参数2:主题配色
* 参数3:以canvas渲染还是svg渲染(Echarts 4.0才有)
* 数据量大:用canvas
* 数据量少:用svg(内存占用低,渲染性能略微高,缩放不失帧,对移动端更友好)
*/
const chart = echarts.init(chartDOM, 'dark', { renderer: 'svg' });
// 3. 配置项
const option = {
title: {
text: 'Echarts 入门'
},
legend: {
// 跟图表对应 名字要跟图表的name值相对应
data: ['饼图', '折线图', '柱状图']
},
toolbox: {
feature: {
// 保存图片
saveAsImage: {}
// 放大
dataZoom: {
// 控制某一个y轴 给一个不存在的y轴
yAxisIndex: false, // 解决放大后柱状图变成空白的bug
},
// 还原状态
restore: {}
}
},
// 预览图表
dataZoom: {
show: true,
start: 30,
end: 100
},
// 控制图表位置
grid: {
left: 20,
width: '50%', // 控制图表的大小
height: '40%'
},
// x轴
xAxis: {
data: ['衬衫','裤子','袜子']
},
// 设置数据源
dataset: {
source: [
// 公共数据复用
['火车票', 100, 30],
['飞机票', 400, 40],
['酒店', 200, 50],
['大巴票', 20, 50]
]
},
// 系列: 饼图、柱状图、折线图···
series: [
{
type: 'bar', // 柱状图
data: [20, 30, 40]
},
{
type: 'scatter', // 散点图
encode: { // 配合source中的数据
x: 0,
y: 1
}
}
]
// y轴
yAxis: {},
}
// 4. 设置配置项
chart.setOption(option);
/**
series: [
{
type: 'bar', // 柱状图
data: [20, 30, 40]
}
]
series: {
type: 'line',
seriesLayoutBy: 'row', // 按照source数组中的行来读取数据
}
series: [
{
type: 'pie', // 柱状图
radius: 50, // 半径
center: [400, '10%'], // 距离左上角坐标轴x, y的位置坐标 调整图表位置
encode: { // 配合dataset.source里数据
itemName: 3, // 饼图的每一块的名称取dataset.source里数据的索引
value: 4 // 饼图的每一块所占的空间区域取dataset.source里数据的索引
},
data: [
{ name: '火车票', value: 100 },
{ name: '酒店', value: 200 },
{ name: '飞机票', value: 400 },
{ name: '大巴票', value: 20 },
]
}
]
4.0 后提供
title: {
text: 'Echarts 入门', // 主标题
subtext: '副标题'
},
legend: {
// 跟图表对应 名字要跟图表的name值相对应
data: ['饼图', '折线图', '柱状图'],
left: 300, // 图例的位置
right: '20%', // 图例的位置
},
data里还可以是对象的配置:
data: [
{
name: '饼图',
icon: 'circle'
},
{
name: '折线图',
icon: 'circle',
textStyle: {
color: 'blue'
}
},
]
toolbox: {
feature: {
// 保存图片
saveAsImage: {}
// 放大
dataZoom: {
// 控制某一个y轴 给一个不存在的y轴
yAxisIndex: false, // 解决放大后柱状图变成空白的bug
},
// 还原状态
restore: {}
}
},
// 控制图表位置
grid: {
left: 20,
width: '50%', // 控制图表的大小
height: '40%'
},