通用配置
配置项
var option = {
// 标题设置
title: {
text: '成绩展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'red'
},
left: '50%', // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
// 工具提示
tooltip: {
trigger: 'axis', //工具提示的类型
formatter: function(arg){ // 文字格式化
return arg[0].name + '的分数是:' + arg[0].data
}
},
// 工具箱按钮
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['line', 'bar']
} // 动态图表类型的切换
}
},
// 图例, 可以帮助我们对图表进行筛选
legend: {
// data: ['语文', '数学'], data中可以不指定，他会自动获取series中对象的name属性值
left: 10
},
// 图表颜色
color:['green','orange'],
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [88, 92, 63, 77, 94, 80, 72, 86]
},
{
name: '数学',
type: 'bar',
data: [90, 67, 34, 78, 99, 80, 78, 56]
}
]
}
效果图
直角坐标系
配置项
var option = {
// 坐标轴容器，用来控制直角坐标系的大小
grid: {
show: true, // 是否可见
left: 120, // 边框的位置
top: 120,
width: 400,
height: 150
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
},
yAxis: {
type: 'value',
// 设置y轴的位置
position: 'right',
// 坐标轴刻度相关设置
axisLabel:{
// 刻度标签显示的内容
formatter: (value,index) => index+'所对应的值为'+value
}
},
series: [
{
name: '语文',
type: 'bar',
// 图表上的文本标签设置
label: {
show: true,
rotate: 60,
position: 'top'
},
// 柱条的宽度
barWidth: '50%',
data: [88, 92, 63, 77, 94, 80, 72, 86]
}
],
// 区域缩放
dataZoom:[
{type:'slider',yAxisIndex:0,start:60,end:90}, // 通过滑块来筛选y轴上的数据
]
}
效果图
柱状图
配置项
var option = {
// 标题组件
title: {
text: '成绩', // 标题文字
link: 'http://www.itcast.cn', // 标题超链接
textStyle: { // 标题样式设置
color: 'red'
}
},
// x轴
xAxis: {
// 如果指定了x（或者y）为类目轴，那么会将xAxis.data（或yAxis.data）的数据作为x(或y)轴的刻度
type: 'category', // 指明x轴为 类目轴
data: ['小明', '小红', '小王'],
// 坐标轴设置
axisLine:{
show: true, // 是否显示坐标轴
// 坐标轴样式
lineStyle:{
color: 'green', //坐标轴颜色设置
}
},
// 坐标轴刻度设置
axisTick:{
show: false, // 不显示刻度
},
// 刻度标签
axisLabel:{
show:true, //显示刻度标签
color: 'orange',
}
},
yAxis: {
type: 'value', // 指明x轴为 数值轴, 指明数值轴之后, 无需指定data，其会根据series中对象的data进行设置
// 分割线
splitLine: {
show: false, //不显示分割线
}
},
series: [
{
name: '语文', // 为图表起一个名称
type: 'bar', // 指明该图标类型为 柱状图
data: [70, 92, 87], // 为x轴的每一个元素, 指明呈现在y轴的数值
// 图表标注
markPoint:{
data:[
// {type:'min',name:'最小值'},
// {type:'max',name:'最大值'}
]
},
// 图表标线
markLine:{
data:[
{type:'average',name:'平均值'}
]
},
// 图表上的文本标签
label:{
show:true,
rotate: 30,
position: 'top'
},
// 柱条的宽度
barWidth: '20%'
}
]
}
效果图
折线图
配置项
var option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// 坐标轴上的刻度是否和刻度标签是否不重合
boundaryGap: false
},
yAxis: {
type: 'value',
// 是否在数值轴上包含0刻度
scale: true
},
series: [
{
name: '康师傅',
data: [3000, 2800, 900, 1000, 800, 700, 1400],
type: 'line',
// 填充样式
areaStyle:{
color: 'pink'
},
// 是否平滑显示
smooth: true,
// 区域标记
markArea: {
data: [
// 对x轴为3月到4月进行标记
[
{xAxis: '3月'},
{xAxis: '4月'}
]
]
},
// 线条样式
lineStyle:{
color:'red',
type: 'dotted'
}
}
]
}
效果图
饼状图
配置项
option = {
// 图例组件。
// 作用：可以通过点击图例控制哪些系列不显示。
legend: {
top: '5%'
},
// 提示框组件
// 作用：鼠标移动到图表上提示的文字信息
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 调色盘列表
// 作用：调节图表的颜色
color:[
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
// 工具箱组件。
// 作用：可以导出图片，数据视图，动态类型切换，数据区域缩放，重置
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
// 系列组件
// 作用：设置图表的类型
series: [
{
name: 'Nightingale Chart',
// 饼状图
type: 'pie',
// 设置半径，值为数组时分别表示内圆半径、外圆半径
radius: [30, 160],
// 饼图中心位置
center: ['50%', '50%'],
roseType: 'area',
// 图形样式设置
itemStyle: {
borderRadius: 0,
// color: 'orange', //图形的背景颜色
},
// 数据
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
],
// 饼型图上的本文标签
label:{
show:true,
position: 'outside', //文本出现的位置
color: 'red'
},
// 引导线
labelLine:{
show: true,
length: 6, // 第一根线的长度设置
length2: 30 // 第二根线的长度设置
}
}
]
};
效果图
散点图
配置项
option = {
xAxis: {
type:'value',
scale: true
},
yAxis: {
type: 'value',
// 不包含0刻度
scale:true
},
series: [
{
symbolSize: 10, //散点的大小
//
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96]
],
// type: 'scatter',
// 涟漪特效的散点图
type: 'effectScatter',
// 图表样式
itemStyle:{
// 控制散点的样式
color:args =>{
console.log(args)
if(args.data[0]>10){
return 'red'
}else{
return 'green'
}
}
},
// 何时显示涟漪效果
showEffectOn:'render',
// 涟漪样式设置
rippleEffect:{
color: 'orange'
}
}
]
};
效果图
