1.饼图
option = {
title : {
text: '某站点用户访问来源', //标题名称
subtext: '纯属虚构', //副标题
x:'left' //距离左侧距离 可为left center right 可为数值 （与left相似）
},
tooltip : { //鼠标悬浮 提示信息
trigger: 'item', //触发 为item 每项触发
formatter: "{a} <br/>{b} : {c} ({d}%)" //提示信息格式 serize.name <br/> serize.data.name : serize.data.vaule (百分比)
},
legend: { //头部色系缩略信息
orient: 'vertical', //horizontal 水平 vertical垂直
left: 'left', //left 距离左侧距离 可为left center right 可为数值
top:'80', //top 距离顶部距离 可为top center bottom 可为数值
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','233'] //头部数据数组 需与series中的data保持一致
},
color:['#4ECB74','#1A68F9','#FFC82E'], //饼图色系，可选
series : [
{
name: '访问来源', //饼图的统一名字
type: 'pie', //类型 ： 饼图
radius : '70%', //半径长度 为单条数据是饼图，2条数据（数组）环形图
center: ['50%', '60%'], //饼图定位 [左侧距离，顶部距离]
label: { //饼图每一项外部提示标题
normal: {
show: false, //是否显示 默认否
position: 'right' //为center 悬浮时在中间提示，为其他在外部现实（默认）
},
emphasis: { //外部提示强调项（悬浮时）
show: true, //是否显示
textStyle: { //字体样式
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: { //外部提示字体与图形是否连线 默认连线
normal: {
show: false
}
},
data:[ //具体数据
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'},
{value:1548, name:'233'}
],
itemStyle: { //饼图样式
emphasis: { //强调|变形
shadowBlur: 10, //选中块阴影效果长度
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
2.柱状图
app.title = '坐标轴刻度与标签对齐';
option = {
color: ['#3398DB'], //柱状体颜色
tooltip : {
trigger: 'axis', //悬浮坐标轴时触发 提示
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { //柱状图xy轴整体距离画布的位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category', //xy轴类型 category/value 为正常图 反之为横向图
data : ['Mon', 'Tue', 'WedWeWedWed', 'Thu', 'Fri', 'Sat', 'Sun'], //x轴数据
axisTick: { //坐标轴刻度
alignWithLabel: true, //刻度线和标签对齐
interval:0 //隔几条显示刻度
},
axisLabel:{ //底部标签显示
rotate:0, //旋转角度
interval: 0 //间隔显示
}
}
],
yAxis : [ //y轴
{
type : 'value',
axisLine:{ //y轴线条
show:false
},
splitLine: { //网格线线条
show: false
}
}
],
series : [
{
name:'直接访问', //柱状图统一名字
type:'bar', //类型：柱状图
barWidth: '60%', //柱状图宽度（相对于均分项）
data:[10, 52, 200, 334, 390, 330, 220], //数值
itemStyle: { //柱状体样式
normal: {
color: '#32b3ea',//柱状体颜色 优先级高于外部 option color
barBorderRadius: 1,//柱状体圆角效果
},
emphasis:{ //选中项强调现实
color: new echarts.graphic.LinearGradient( //设置渐变色方法
0, 0, 1, 1,
[
{ offset: 0, color: '#ABCEFF' },
{ offset: 1, color: '#3B72F4' }
]
)
}
},
}
]
};
3.折线图
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis',
axisPointer: { //悬浮时在轴上显示具体数据
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
legend: {
icon: "circle", //头部缩略信息小角标样式
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: { //位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: { //工具盒子
feature: {
saveAsImage: {} //下载图片
}
},
xAxis: {
type: 'category',
boundaryGap: false, //左边两边是否留白
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
/* visualMap: {
show: false,
pieces: [
{
gt: 0,
lte: 150, //这儿设置基线上下颜色区分 基线下面为绿色
color: '#03d6d6'
}, {
gt: 150, //这儿设置基线上下颜色区分 基线上面为红色
color: '#e91642'
}]
}, */
series: [ //折线数据
{
name:'邮件营销',
type:'line', //类型：折线图
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 200],
areaStyle: { //空白区域颜色
color:['#ccc']
},
itemStyle:{ //折点击及缩略点颜色
color:['red']
},
lineStyle:{
color:['yellow']//折线颜色
},
markLine: { // 这儿设置安全基线
silent: false,
data: [{
yAxis: 150,
lineStyle: { color: '#ff00ff' }
}],
label: {
normal: { formatter: '安全\n基线' }
}
},
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 300]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
