Echarts 可视化
基本名词
| 名词 | 描述 |
|---|---|
| chart | 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 |
| axis | 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 |
| xAxis | 直角坐标系中的横轴，通常并默认为类目轴 |
| yAxis | 直角坐标系中的纵轴，通常并默认为数值轴 |
| grid | 直角坐标系中除坐标轴外的绘图网格 |
| legend | 图例，表述数据和图形的关联 |
| dataRange | 值域选择，常用于展现地域数据时选择值域范围 |
| dataZoom | 数据区域缩放，常用于展现大数据时选择可视范围 |
| toolbox | 辅助工具箱，辅助功能，如添加标线，框选缩放等 |
| tooltip | 气泡提示框，常用于展现更详细的数据 |
| timeline | 时间轴，常用于展现同一组数据在时间维度上的多份数据 |
| series | 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 |
图表名词
| 名词 | 描述 |
|---|---|
| line | 折线图，堆积折线图，区域图，堆积区域图。 |
| bar | 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 |
| scatter | 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 |
| k | K线图，蜡烛图。常用于展现股票交易数据。 |
| pie | 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 |
| radar | 雷达图，填充雷达图。高维度数据展现的常用图表。 |
| chord | 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 |
| force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
| map | 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 |
柱状图和折线图
option = {
title: {
text: '折线图折线图折线图',
subtext: '子标题子标题',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a},{b}:{c},{d}'
},
xAxis: {
name: 'X轴',
type: 'category',
data: ['一一一','二一一','三一一','四一一','五一一','六一一','七一一','八一一','九一一','十一一'],
axisLabel: {
interval: '0',
rotate: '45'
}
},
yAxis: {
name: '数据',
type: 'value'
},
series: [
{
name: 'xxx',
type: 'bar',
data: ['1','3','5','7','9','11','21','31','41','42'],
smooth: 'true',
stack: '1',
label: {
show: 'true',
position: 'top'
},
barWidth: '15',
itemStyle: {
color: 'red',
}
},
{
name: 'yyy',
type: 'bar',
stack: '1',
//barGap: '-100%',
data: ['3','1','7','5','11','9','31','21','42','41'],
},
{
name: 'zzz',
type: 'bar',
data: ['4','1','37','5','11','9','32','21','42','41'],
}
],
};
饼图
var epieOption = {
title : {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
// 'item'
// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
// 'axis'
// 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
formatter: "{a} <br/>{b} : {c} ({d}%)"
// {a}：系列名。
// {b}：数据名。
// {c}：数据值。
},
legend: {
x : 'center',
y : 'bottom',
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// magicType : {
// show: true,
// type: ['pie', 'funnel']
// },
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
// calculable : true,
series : [
{
name:'半径模式',
type:'pie',
radius : [0, 110],
center : ['25%', '50%'],
roseType : 'radius',
//'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
//'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
},
{
name:'面积模式',
type:'pie',
radius : [30, 110],
center : ['75%', '50%'],
roseType : 'area',
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
epieChart.setOption(epieOption);
option = {
title: {
text: '饼图饼图饼图饼图',
subtext: ' ---子标题子标题子标题',
x: '45%',
textStyle: {
color: 'red'
}
},
tooltip: {
show: 'true',
formatter: '{a},{b},{c},{d}',
},
legend: {
x: 'right',
y: 'bottom',
orient: 'vertical',
//'horizontal'
//'vertical'
data: ['长沙','武汉','北京','天津','河北','湖南','湖北','上海',]
},
series: [
{
type: 'pie',
radius: [20 , 110],
roseType: 'area',
center: ['25%', '50%'],
data: [
{value: '62', name: '长沙'},
{value: '53', name: '武汉'},
{value: '41', name: '北京'},
{value: '86', name: '天津'},
{value: '49', name: '河北'},
{value: '57', name: '湖南'},
{value: '75', name: '湖北'},
{value: '24', name: '上海'},
]
},
{
type: 'pie',
radius: [20 , 110],
roseType: 'area',
center: ['75%', '50%'],
data: [
{value: '62', name: '长沙'},
{value: '53', name: '武汉'},
{value: '41', name: '北京'},
{value: '86', name: '天津'},
{value: '49', name: '河北'},
{value: '57', name: '湖南'},
{value: '75', name: '湖北'},
{value: '24', name: '上海'},
]
}
]
}
option = {
title: {
text: '饼图饼图饼图饼图',
subtext: ' ---子标题子标题子标题',
x: '45%',
textStyle: {
color: 'red'
}
},
tooltip: {
show: 'true',
formatter: '{a},{b},{c},{d}',
},
legend: {
x: 'center',
y: '20%',
orient: 'horizontal',
//'horizontal'
//'vertical'
data: ['长沙c','武ww汉',]
},
series: [
{
name: '长沙c',
type: 'pie',
radius: [20 , 110],
roseType: 'area',
center: ['25%', '50%'],
label: {
show: false,
},
data: [
{value: '62', name: '长沙'},
{value: '53', name: '武汉'},
{value: '41', name: '北京'},
{value: '86', name: '天津'},
{value: '49', name: '河北'},
{value: '57', name: '湖南'},
{value: '75', name: '湖北'},
{value: '24', name: '上海'},
]
},
{
name: '武ww汉',
type: 'pie',
radius: [20 , 110],
roseType: 'area',
center: ['75%', '50%'],
data: [
{value: '62', name: '长沙'},
{value: '53', name: '武汉'},
{value: '41', name: '北京'},
{value: '86', name: '天津'},
{value: '49', name: '河北'},
{value: '57', name: '湖南'},
{value: '75', name: '湖北'},
{value: '24', name: '上海'},
]
}
]
}