这里写自定义目录标题
一、纵坐标分组
1.1 options设置
option = {
grid: {
left: 250
},
xAxis: {
axisLine: {
lineStyle: {color: '#ccc'}
},
axisLabel: {
textStyle: {color: '#777'}
}
},
yAxis: [{
inverse: true,
splitLine: {
show: true
},
axisTick: {
length: 100,
lineStyle: {color: '#ccc'}
},
axisLine: {
lineStyle: {color: '#ccc'}
},
data: ['-', '-', '-', '-', '-']
}, {
name: ' 所属行业',
nameLocation: 'start',
nameTextStyle: {
fontWeight: 'bold'
},
position: 'left',
offset: 130,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: '#ccc'}
},
axisLabel: {
inside: true
},
inverse: true,
data: ['电商', '游戏', '金融', '旅游', '直播']
}, {
name: ' 产品名',
nameLocation: 'start',
nameTextStyle: {
fontWeight: 'bold'
},
position: 'left',
offset: 220,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 100,
inside: true,
lineStyle: {color: '#ccc'}
},
axisLabel: {
inside: true
},
inverse: true,
data: ['APP数据分析', 'DMP', '企业版', '移动广告鉴别', '']
}],
series: [{
type: 'bar',
data:[220, 182, 191, 234, 290],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#000'},
formatter: '合同金额',
}
}
}, {
type: 'bar',
data:[210, 132, 91, 204, 220],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#000'},
formatter: '已收款',
}
}
}, {
type: 'bar',
data:[120, 132, 131, 254, 278],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#000'},
formatter: '应收款',
}
}
}, {
type: 'bar',
data:['-', '-', '-', '-', '-'],
yAxisIndex: 1
}, {
type: 'bar',
data:['-', '-', '-', '-', '-'],
yAxisIndex: 2
}]
};
二、动态分组
2.1 options设置
var siteThreeMonthYield = [
{"ThreeMonthYield":[{"yield": 0.9 , "agraderate": 0.8},{"yield": 0.87 , "agraderate": 0.5},{"yield": 0.98 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.93 , "agraderate": 0.68},{"yield": 0.78 , "agraderate": 0.55},{"yield": 0.998 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.98 , "agraderate": 0.65},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.78 , "agraderate": 0.45},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.68 , "agraderate": 0.46},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.79 , "agraderate": 0.56},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.60 , "agraderate": 0.28},{"yield": 0.873 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.54 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.47 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.69 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.89 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]},
{"ThreeMonthYield":[{"yield": 0.8 , "agraderate": 0.68},{"yield": 0.76 , "agraderate": 0.28},{"yield": 0.87 , "agraderate": 0.5}]}
];
var sitenames = ['安徽','北京','广东','定远','甘肃','山东','新疆','乌鲁木齐','深圳','西藏','贵州','湖南'];
var threeMonth = ['201809','201810','201811'];
var grids = [];
var xAxes = [];
var yAxes = [];
var series = [];
var titles = [];
var datas =[];
var aGradeRates=[];
var count = 0;
var zh_month = new Array(3);
var sitesnum = sitenames.length;
for(var i=0; i<3; i++){
var strmon = threeMonth[i].substring(4,6);
var month = parseInt(threeMonth[i].substring(4));
switch(month)
{
case 1: zh_month[i] = '一月';break;
case 2: zh_month[i] = '二月';break;
case 3: zh_month[i] = '三月';break;
case 4: zh_month[i] = '四月';break;
case 5: zh_month[i] = '五月';break;
case 6: zh_month[i] = '六月';break;
case 7: zh_month[i] = '七月';break;
case 8: zh_month[i] = '八月';break;
case 9: zh_month[i] = '九月';break;
case 10: zh_month[i] = '十月';break;
case 11: zh_month[i] = '十一月';break;
case 12: zh_month[i] = '十二月';break;
default: break;
}
}
for(var i = 0; i < sitesnum; i++) {
siteThreeMonthYield[i].ThreeMonthYield
var data = new Array(3);
var aGradeRate = new Array(3);
for(var j=0 ; j < 3; j++){
data[j]=siteThreeMonthYield[i].ThreeMonthYield[j].yield*100;
aGradeRate[j]=siteThreeMonthYield[i].ThreeMonthYield[j].agraderate*100;
}
if(i===0){
grids.push({
left:'4%',
show: true,
borderWidth: 0,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 1,
height:'70%',
top:'20%',
width: (1/sitesnum*(100-4))+'%',
//右边距right的位置:左边100先减去第一个左移的4%,再减去宽度 (1/sitesnum*(100-4))+'%'
right: ((100-4)-(1/sitesnum*(100-4)))+'%'
});
}else{
grids.push({
left:((4)+(i)/sitesnum*(100-4))+'%',//除去第一个左边距的4%,剩余渐分都以96%进行分割
show: true,
borderWidth: 0,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 1,
height:'70%',
top:'20%',
Width: (1/sitesnum*(100-4))+'%',
//右边距right的位置:左边100%先减去第一个左移的4%,再减去96%为起始的该grid的左边距(i/sitesnum*(100-4)),再减去宽度 (1/sitesnum*(100-4))+'%'
right:((100-4)-(i/sitesnum*(100-4))-(1/sitesnum*(100-4)))+'%'
});
}
titles.push({
text:'根据区域的数量自动调整宽度'
,left:'0%'
,top:'6%'
});
var titleoffset = 1.5;//针对不同的现地因名字长度不一样,显示的位置会有些许差别,默认是两个字符如'B1'
if(sitenames[i].length==2) titleoffset=1.5;//两个字符
if(sitenames[i].length==3) titleoffset=2;//三个字符
if(sitenames[i].length==4) titleoffset=3;//四个字符
if(i==0){
titles.push({
text:sitenames[i],
left:(i/sitesnum*(100-4)+4)+(1/sitesnum*(100-4)/2-titleoffset)+'%',
top:'94%'
});
}else{
titles.push({
text:sitenames[i],
left:(i/sitesnum*(100-4)+4)+(1/sitesnum*(100-4)/2-titleoffset)+'%',
top:'94%'
});
}
xAxes.push({
gridIndex:i,
type : 'category',
data : zh_month,
axisTick: {
alignWithLabel: false
},
textStyle: {
fontSize: 20,
color: 'red'
},
axisLabel:{
show:true,
interval:0
}
});
if(i==0){
yAxes.push({
gridIndex:i,
type : 'value',
interval:20,
max:120,
min:0,
axisTick:{
inside:true
},
axisLabel:{
show:true
},
name : '百分比 (%)',
axisLabel : {
formatter: '{value} '
},
position: 'left'
});
}else{
yAxes.push({
gridIndex:i,
type : 'value',
interval:20,
max:120,
min:0,
axisTick:{//坐标轴刻度线
show:false
},
axisLine:{
show:false
},
axisLabel:{
show:false
}
});
}
series.push({
xAxisIndex: i,
yAxisIndex: i,
name:'良率',
type:'line',
//barWidth: '60%',
data:data
});
series.push({
xAxisIndex: i,
yAxisIndex: i,
name:'A级率',
type:'line',
//barWidth: '60%',
data:aGradeRate
});
}
option = {
title:titles,
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data : ['良率','A级率'],
top:'10%'
},
toolbox: {
top: '10%',
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line','bar']},
restore: {title:'Refresh'},
saveAsImage: {title:'Save'}
}
},
grid : grids,
xAxis : xAxes,
yAxis : yAxes,
series : series
};
三、柱状图叠加合并
3.1 options设置
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
type:'bar',
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
markLine : {
lineStyle: {
normal: {
type: 'dashed'
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name:'百度',
type:'bar',
barWidth : 5,
stack: '搜索引擎',
data:[620, 732, 701, 734, 1090, 1130, 1120]
},
{
name:'谷歌',
type:'bar',
stack: '搜索引擎',
data:[120, 132, 101, 134, 290, 230, 220]
},
{
name:'必应',
type:'bar',
stack: '搜索引擎',
data:[60, 72, 71, 74, 190, 130, 110]
},
{
name:'其他',
type:'bar',
stack: '搜索引擎',
data:[62, 82, 91, 84, 109, 110, 120]
}
]
};
四、阶梯线图
4.1 options设置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
五、阶梯瀑布图
5.1 说明
Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。
假设数据数组中的值是表示对前一个值的增减:
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一个数据是 900,第二个数据 345 表示的是在 900 的基础上增加了 345……
将这个数据展示为阶梯瀑布图时,
我们可以使用三个系列:
第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;
第二个系列用来表示正数;第三个系列用来表示负数。
5.2 option
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
if (data[i] >= 0) {
positive.push(data[i]);
negative.push('-');
} else {
positive.push('-');
negative.push(-data[i]);
}
if (i === 0) {
help.push(0);
} else {
sum += data[i - 1];
if (data[i] < 0) {
help.push(sum + data[i]);
} else {
help.push(sum);
}
}
}
option = {
title: {
text: 'Waterfall'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: (function() {
var list = [];
for (var i = 1; i <= 11; i++) {
list.push('Oct/' + i);
}
return list;
})()
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
stack: 'all',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: help
},
{
name: 'positive',
type: 'bar',
stack: 'all',
data: positive
},
{
name: 'negative',
type: 'bar',
stack: 'all',
data: negative,
itemStyle: {
color: '#f33'
}
}
]
};
六、数据集( dataset )
6.1 说明
有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。
用户可以使用 seriesLayoutBy 配置项,改变图表对于行列的理解。seriesLayoutBy 可取值:
'column': 默认值。系列被安放到 dataset 的列上面。
'row': 系列被安放到 dataset 的行上面。
6.2 option
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 }
]
};
七、双向柱子
7.1 option
var myData = ['一审服判息诉率', '撤诉率', '调解率', '实际执行率', '裁判自动履行率', '执行标的到位率', '再审审查率']
var lineData = [100, 100, 100, 100, 100, 100, 100]
var lastYearData = {
1: [3, 20, 62, 34, 55, 65, 33]
}
var thisYearData = {
1: [11, 38, 23, 39, 66, 66, 79]
}
var timeLineData = [1]
var background = "#0e2147"; //背景
var option = {
baseOption: {
backgroundColor: background,
timeline: {
show: false,
top: 0,
data: []
},
legend : {
top : '5%',
left : '31%',
itemWidth : 22,
itemHeight : 22,
itemGap: 343,
icon : 'horizontal',
textStyle : {
color : '#ffffff',
fontSize : 20,
},
data: ['2017', '2018']
},
grid: [{
show: false,
left: '5%',
top: '10%',
bottom: '8%',
containLabel: true,
width: '37%'
}, {
show: false,
left: '51%',
top: '10%',
bottom: '8%',
width: '0%'
}, {
show: false,
right: '2%',
top: '10%',
bottom: '8%',
containLabel: true,
width: '37%'
}],
xAxis: [{
type: 'value',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
show: false
},
splitLine: {
show: false
}
}, {
gridIndex: 1,
show: false
}, {
gridIndex: 2,
axisLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: myData
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 20
}
},
data: myData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center'
}
}
})
}, {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: myData
}],
series: []
},
options: []
}
option.baseOption.timeline.data.push(timeLineData[0])
option.options.push({
series: [
{
type: 'pictorialBar',
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'rect',
itemStyle: {
normal: {
color: 'rgba(3,147,114,0.27)'
}
},
barWidth: 10,
symbolRepeat: true,
symbolSize: 14,
data: lineData,
barGap: '-100%',
barCategoryGap: 0,
label: {
normal: {
show: true,
formatter: (series) => {
return lastYearData[timeLineData[0]][series.dataIndex] + '%'
},
position: 'insideTopLeft',
textStyle:{
color: '#ffffff',
fontSize: 20,
},
offset: [0, -35],
}
},
z: -100,
animationEasing: 'elasticOut',
animationDelay: function (dataIndex, params) {
return params.index * 30;
}
}, {
name: '2017',
type: 'pictorialBar',
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'rect',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: '#039372'
}
},
symbolRepeat: true,
symbolSize: 14,
data: lastYearData[timeLineData[0]],
animationEasing: 'elasticOut',
animationDelay: function (dataIndex, params) {
return params.index * 30 * 1.1;
}
},
{
type: 'pictorialBar',
xAxisIndex: 2,
yAxisIndex: 2,
symbol: 'rect',
itemStyle: {
normal: {
color: 'rgba(54,215,182,0.27)'
}
},
barWidth: 10,
symbolRepeat: true,
symbolSize: 14,
data: lineData,
barGap: '-100%',
barCategoryGap: 0,
label: {
normal: {
show: true,
formatter: (series) => {
return thisYearData[timeLineData[0]][series.dataIndex] + '%'
},
position: 'insideTopRight',
textStyle:{
color: '#ffffff',
fontSize: 20,
},
offset: [0, -35],
}
},
z: -100,
animationEasing: 'elasticOut',
animationDelay: function (dataIndex, params) {
return params.index * 30;
}
}, {
name: '2018',
type: 'pictorialBar',
xAxisIndex: 2,
yAxisIndex: 2,
symbol: 'rect',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: '#36d7b6'
}
},
symbolRepeat: true,
symbolSize: 14,
data: thisYearData[timeLineData[0]],
animationEasing: 'elasticOut',
animationDelay: function (dataIndex, params) {
return params.index * 30 * 1.1;
}
}
]
});
八、时间轴
8.1 option
var data = [];
var dataCount = 10;
var startTime = +new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
{ name: 'JS Heap', color: '#7b9ce1' },
{ name: 'Documents', color: '#bd6d6c' },
{ name: 'Nodes', color: '#75d874' },
{ name: 'Listeners', color: '#e0bc78' },
{ name: 'GPU Memory', color: '#dc77dc' },
{ name: 'GPU', color: '#72b362' }
];
// Generate mock data
categories.forEach(function (category, index) {
var baseTime = startTime;
for (var i = 0; i < dataCount; i++) {
var typeItem = types[Math.round(Math.random() * (types.length - 1))];
var duration = Math.round(Math.random() * 10000);
data.push({
name: typeItem.name,
value: [index, baseTime, (baseTime += duration), duration],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
baseTime += Math.round(Math.random() * 2000);
}
});
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
option = {
tooltip: {
formatter: function (params) {
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
title: {
text: 'Profile',
left: 'center'
},
dataZoom: [
{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 400,
labelFormatter: ''
},
{
type: 'inside',
filterMode: 'weakFilter'
}
],
grid: {
height: 300
},
xAxis: {
min: startTime,
scale: true,
axisLabel: {
formatter: function (val) {
return Math.max(0, val - startTime) + ' ms';
}
}
},
yAxis: {
data: categories
},
series: [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: data
}
]
};
如果本文对你有帮助的话,请不要忘记给我点赞留言哈