echarts
基本概念
实例
- 一个网页可以创建多个实例，每个实例都可以创建多个图表坐标系等等，准备一个DOM节点，作为echarts的渲染容器，就可以在上面创建一个echarts实例，每个实例独占一个DOM节点
实例1， xAxis是一个数组，里面有2项，说明有2个2轴，y轴里面是数组，里面有2项，说明有2个y轴 grid是一个数组有2个说明有2个图例 实例2： xAxis是一个对象，说明只有一个x轴，yAxis是一个对象，说明只有一个y轴
系列series
- 一个series代表这组数据映射成的图，echarts常用的series.type图表类型有line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、
实例中：
1 只有一个xAxis，数据是 type: 'category', //有2中类型，值类型和种类，范畴类型，
2 series是一个数组，
数组第一个项的类型是pie（饼图）, name是栏目，value是值
数组第二个项的类型是line（折线图）, data是一个数组，每一项是 xAxis轴对于的每个栏目的数据
数组第三个项的类型是bar（柱状图）, data是一个数组，每一项是 xAxis轴对于的每个栏目的数据
除了可以通过series表示以为，还可以通过dataset表示数据
1 可以通过dataset 的 source属性，将数据中的每一项表示出来， 2 在series中可以通过encode属性的x,y 属性来配置，x轴是source里面的哪一项
组件（component）
- echarts的各种配置项都属于一个单独的组件，如xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、
在options的各种配置项中： 1 legend配置 就是图例组件 2 toolbox 配置就 toolbox component 包括下载图片等等功能 3 tooltip 配置，就是提示文本框组件 4 yAxis xAxis轴分别是 yAxis xAxis component, 5 以及 visualMap and dataZoom component
options图表
- options来描述对图表的各种需求，包括有什么数据，要画什么图表，图表长什么样子，含有什么组件，组件能操作什么事情等，简而言之，options表述了：数据，数据如何映射成图形，交互行为
// 创建echarts实例
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用options描述数据，数据如何映射成图形，交互行为等
var options = {
// 每个属性是一类组件
legend:{...}, // 图例组件
grid:{...}, // 图形的位置
tooltip:{...}, // 提示框
dataZoom:{...}, // 数据框，拉缩框
visalMap:{...},
// 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
xAxis:[
// 数组每项表示一个组件实例，用 type 描述“子类型”。
{ type:'category', ...},
{ type:'category' , ...},
{ type: 'value', ...}
],
// 如果有多个同类组件，那么就是个数组。例如这里有两个 Y 轴。
yAxis: [{...}, {...}],
}
// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);
同样的可以用series表述的数据同样也可以通过dataset来表示：
var options = {
dataset:{
source:[
[121, 'XX', 442, 43.11],
[663, 'ZZ', 311, 91.14],
[913, 'ZZ', 312, 92.12],
]
},
xAxis: {},
yAxis: {},
series: [
// 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
{type: 'bar', encode: {x: 1, y: 0}},
{type: 'bar', encode: {x: 1, y: 2}},
{type: 'scatter', encode: {x: 1, y: 3}},
...
]
}
定位
- 不同的组件、系列、常有不同的定位方式
//多组件和系列，都能够基于top/right/down/left/width/height绝对定位，这种绝对定位的方式类型于css的绝对定位
圆形组件系列，可以使用中心半径定位，如pie饼图，sunburst旭日图，polar极坐标系
中心半径定位，往往定位依据为; center 中心 ，radius半径 来决定
坐标系
- 运行在坐标系上的图形，如line折线图，bar柱状图，scatter散点图，等，
没有配置gird, 由xAxis以及yAxis组成的坐标系
- 如果配置了y轴可以通过 yAxisIndex 配置项来指定使用哪个yAxis
1 实例中有1个x轴，2个y轴，如何指定哪个图使用哪一个y轴呢？通过配置yAxisIndex
- 如果有多个gird坐标系，可以使用
xAxisIndex、yAxisIndex、gridIndex来指定引用关系：
1 grid配置项为1个数组，数组里面有2项，这说明有2个坐标轴 2 xAxis里面有2项说明有2个x轴，其中 gridIndex：指定为0则说明，指定为第一个坐标系 3 series通过配置 xAxisIndex以及yAxisIndex,指定哪一个x以及y坐标轴
雷达图配置
- echarts中雷达配置项共有20个配置项，其中常用的10个配置项为
indicator、center、radius、startAngle、splitNumber、shape、axisName、splitArea、axisLine、splitLine等
- 以下为echartg官方给的示例配置雷达图
基本雷达图
option = {
backgroundColor: 'rgba(204,204,204,0.7)', //背景图颜色
title: { // 标题
text: 'Basic Radar Chart',
target: 'blank', top: '10', left: '160', textStyle: { color: 'blue', fontSize: 18, }
},
color: ['pink', 'red'],
legend: {
show:true, // 是否展示图例
// data: ['Allocated Budget', 'Actual Spending'],
bottom:10,
icon:'rect', //对图例的形状进行设置 icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
textStyle:{fontSize:15,color:'#fff'},//设置图例的公用文本样式 也可以单独对data里面的某个图例进行设置
left: "center", //
itemWidth: 20, //设置图例标记的图形宽度
itemHeight: 20, //设置图例标记的图形高度
itemGap: 30, //设置图例每项之间的间隔
orient: 'vertical', //设置图例列表的布局朝向，'horizontal'|'vertical'
data:[
{
name:"Allocated Budget",
icon:'circle',
textStyle: { color: 'rgba(51,0,255,1)', fontWeight: 'bold' }, // 设置图例项的文本样式
},
{
name:"Actual Spending",
//'normal'|'bold'|'bolder'|'lighter'
textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bolder' }
}
]
},
//配置详情提示框组件
tooltip: {
//设置雷达图的tooltip不会超出div，也可设置position属性
//设置定位不会随着鼠标移动而变化
confine: true, //设置是否将tooltip框限制在图表的区域内
enterable: true, //设置鼠标是否可以移动到tooltip区域内
},
radar: [
{
indicator: [ // //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
],
name: '雷达图', // 系列名称，用于tooltip的显示，图例筛选
shape: 'circle', //设置雷达图的外边框形状'polygon'
center: ['25%', '50%'], // 的中心（圆心）坐标，第一项是横坐标，第二项是纵坐标。
radius: 120, //直径 字符串或者数值类型
startAngle: 90, // 拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none' symbol: 'triangle',
splitNumber: 4, // 雷达图内切割成几个部分
axisName: {
formatter: '【{value}】',
color: '#428BD4'
},
splitArea: { //设置分隔区域的样式
areaStyle: {
// 因为splitNumber为4个，切割成4块,颜色是由内向外的
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
shadowColor: 'rgba(0, 0, 0, 0.2)', // 设置图形的阴影效果
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
axisLine: { //设置坐标轴轴线设置
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
},
splitLine: { //设置坐标轴在grid区域中的分隔线
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
//在外边配置areastyle,则可以产生涂色的效果
areaStyle:{
italic:{
shadowBlur:12,
shadowColor:'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending',
areaStyle: { //在series里面配置但是没有阴影效果则没有涂色的效果
color: 'rgba(255, 228, 52, 0.6)'
}
}
]
}
]
};
线形图配置
- 常见的线性统计图的配置
option = {
xAxis: {
type: "category",
data: ['A', 'B', 'C', 'D', 'E'],
axisTick: {
alignWithLabel: false
}
},
tooltip: {
trigger: "axis",
formatter: "完成进度 : <br/>{b} : {c}%",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
// 工具bar,是否下载成图片
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true },
},
},
grid: {
top: 10,
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
},
yAxis: {
type:'value',
axisLabel : {
formatter: '{value} %'
},
min: 0,
max: 100,
interval: 10, //y轴上的间隔
},
series: [
{
type: 'bar',
barWidth:30, //设置条形图的宽度
data: [
10,
22,
28,
{
value: 43,
// 设置单个柱子的样式
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.5
},
},
49
],
barGap: '20%', // 两个柱子之间的距离20%， 柱子宽度为30,30*20% = 6
barCategoryGap: '40%',//柱条每侧空余的距离,相对于柱条宽度的百分比。
backgroundStyle: { // 为柱条添加背景色，需要showBackground为true
color: 'rgba(220, 220, 220, 0.8)'
},
showBackground: true,
itemStyle: {
barBorderRadius: 10, // 柱条圆角的半径
borderWidth: 1,
borderType: 'solid', // 柱条的描边颜色
borderColor: '#73c0de', // 柱条的描边颜色
shadowColor: '#5470c6',
shadowBlur: 3
},
stack: "value", // 同个类目轴上系列配置相同的 stack 值可以堆叠放置 'value' 和 'log' 类型的类目轴上 不支持 'time' 和 'category' 类型的类目轴。
},
{
type: 'bar',
barWidth:30,
data: [12, 14, 9, 9, 11],
stack: "value",
}
]
};
组合图的配置
- 在series数组中有多组数据的type类型不同，且xAxis以及yAxis有多个x轴以及y轴在同一幅图展示
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 一个series代表这组数据映射成的图
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,// 是否展示柱状图的背景
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
type:'line',
data:[120, 200, 200, 80, 70, 110, 130],
},
{
type:'pie',
center:["75%",260], //在图表中的位置
radius:100, //饼状图的直径
data:[{
name:'Jan',
value:120,
},{
name:'Feb',
value:200,
}, {
name:'May',
value:200,
},{
name:'Apr',
value:120,
},{
name:'May',
value:200
}],
}
]
};
