# echarts
# echarts基本使用
- 创建
let chart=echarts.init(oBox[,"xxxx",{renderer:'svg'}]);
oBox还可以选择主题色，官网提供light和dark，其他配置可自定义，第三个参数则是渲染画布的选择，可选svg，echarts需要4.0+
- 设置参数
chart.setOption(option);
- option 基本组成
title标题- text 主标题
- subtext 副标题
- x x轴位置
- y y轴位置
lengend图例- data 图例数据(对应series里的name，如果没有，则不会显示)，可以是简单的数组，也可以是对象数组(设置name，icon，textStyle)
- top/bottom 位置
- right/left 位置
- orient 图例排布方式(vertical/)
xAxisx轴- type 按什么类型
- data 坐标值
yAxisy轴- type 类型
series系列，是个数组(只有一个可以写成对象形式)，和图形进行映射的。- name 匹配图例
- type 形状
- data 具体数据
- radius 饼图大小,也可以设置成环图
- center (饼图)位置
color颜色设置formatter格式转换toolbox刷新下载缩放等功能集合datazoomgrid控制绘制出的图形与周边距离,定位
grid: [{
left: _left,
top: _top,
right: _right,
bottom: _bottom
}],
# echart-bar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:800px; height:600px; border:1px solid black; margin:10px auto 0}
</style>
<script src="echarts.js" charset="utf-8"></script>
<script>
const $=document.querySelectorAll.bind(document);
window.onload=function (){
let oBox=$('.box')[0];
let option={
title: {
text: '北京人口分布',
subtext: '2017年度(单位: 万)',
x: 'center'
},
legend: {
data: ['男', '女'],
right: 0,
top: '50%',
orient: 'vertical'
},
color:['purple','orange'],
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '男',
type: 'bar',
data: [785, 23, 815, 945, 1120]
},
{
name: '女',
type: 'bar',
data: [635, 13, 715, 1045, 1320]
}
]
};
//1.创建
let chart=echarts.init(oBox);
//2.设置参数
chart.setOption(option);
};
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
# echart-pie
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:800px; height:600px; border:1px solid black; margin:10px auto 0}
</style>
<script src="echarts.js" charset="utf-8"></script>
<script>
const $=document.querySelectorAll.bind(document);
window.onload=function (){
let oBox=$('.box')[0];
let option={
title: {
text: '北京人口比例',
subtext: '2017年度(单位: 万)'
},
series: [
{
name: '性别比例',
type: 'pie',
radius: '40%',
center: ['30%', '50%'],
data: [
{name: '男', value: 2750},
{name: '女', value: 2538},
]
},
{
name: '年龄比例',
type: 'pie',
radius: '40%',
center: ['70%', '50%'],
data: [
{name: '18岁及更小', value: 876},
{name: '18~28岁', value: 1236},
{name: '28~38岁', value: 567},
{name: '38~50岁', value: 684},
{name: '50岁以上', value: 1350},
]
}
]
};
//1.创建
let chart=echarts.init(oBox);
//2.设置参数
chart.setOption(option);
};
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:800px; height:600px; border:1px solid black; margin:10px auto 0}
</style>
<script src="echarts.js" charset="utf-8"></script>
<script>
const $=document.querySelectorAll.bind(document);
window.onload=function (){
let oBox=$('.box')[0];
let option={
title: {
text: '北京人口比例',
subtext: '2017年度(单位: 万)'
},
series: [
{
name: '性别比例',
type: 'pie',
radius: ['70%', '80%'],
data: [
{name: '男', value: 2750},
{name: '女', value: 2538},
]
},
{
name: '年龄比例',
type: 'pie',
radius: '40%',
data: [
{name: '18岁及更小', value: 876},
{name: '18~28岁', value: 1236},
{name: '28~38岁', value: 567},
{name: '38~50岁', value: 684},
{name: '50岁以上', value: 1350},
]
}
]
};
//1.创建
let chart=echarts.init(oBox);
//2.设置参数
chart.setOption(option);
};
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
# echarts之dataset
dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
const option = {
xAxis: {
type: 'category'
},
yAxis: {},
dataset: {
source: [
['一季度', 79, 100, '分类1', 50],
['二季度', 81, 112, '分类2', 60],
['三季度', 88, 96, '分类3', 55],
['四季度', 72, 123, '分类4', 70],
]
},
series: [{
type: 'pie',
center: ['65%', 60],
radius: 35,
encode: { itemName: 3, value: 4 }
}, {
type: 'line',
encode: { x: 0, y: 2 }
}, {
type: 'bar',
encode: { x: 0, y: 1 }
}]
}
chart.setOption(option)
</script>
</body>
</html>
# 双坐标系和dateset
用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：
- 'column': 默认值。系列被安放到 dataset 的列上面。
- 'row': 系列被安放到 dataset 的行上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
const option = {
legend: {},
tooltip: {},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category'
},
yAxis: [{
min: 0,
max: 100
}, {
min: 0,
max: 100
}],
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {},
tooltip: {},
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],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
dataset数据格式也可以是这种模式
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
# echarts之组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
const option = {
title: {
text: '数据可视化',
subtext: '慕课网数据可视化体系课'
},
xAxis: {
type: 'category'
},
yAxis: {},
legend: {
data: [{
name: '分类',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}, '折线图', '柱状图'],
left: 100
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
show: true,
start: 30,
end: 70
}],
dataset: {
source: [
['一季度', 79, 100, '分类1', 50],
['二季度', 81, 112, '分类2', 60],
['三季度', 88, 96, '分类3', 55],
['四季度', 72, 123, '分类4', 70],
]
},
grid: [{
left: 50,
top: 70
}],
series: [{
name: '分类',
type: 'pie',
center: ['65%', 60],
radius: 35,
encode: { itemName: 3, value: 4 }
}, {
name: '折线图',
type: 'line',
encode: { x: 0, y: 2 }
}, {
name: '柱状图',
type: 'bar',
encode: { x: 0, y: 1 }
}]
}
chart.setOption(option)
</script>
</body>
</html>
← 图表 echarts常用配置 →