版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaozhuanddapang/article/details/77493631
最近项目中大量运用了图表的东西，现贴出几个demo，供大家参考，如有类似需求的童鞋，直接拿走不谢。点击进入echarts官方网址demo将下面的代码直接复制粘贴即可
1.效果图：
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
x:'center',
y: 'bottom',
data:['百度','腾讯',"阿里","百度百分比","腾讯百分比",'阿里百分比']
},
xAxis: [
{
type: 'category',
data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'],
axisPointer: {
type: 'none'
}
}
],
yAxis: [
{
type: 'value',
name: '亿\n元',
min: 0,
max: 100,
interval: 20,
},
{
type: 'value',
name: '百\n分\n比',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name:'百度',
type:'bar',
yAxisIndex: 0,
data:[12,34,23,21,21,23,12]
},
{
name:'腾讯',
type:'bar',
yAxisIndex: 0,
data:[13,23,34,21,2,45,23]
},
{
name:'阿里',
type:'bar',
yAxisIndex: 0,
data:[25,57,57,42,23,68,35]
},
{
name:'百度百分比',
type:'line',
yAxisIndex: 1,
data:[12,34,23,21,21,23,12]
},
{
name:'腾讯百分比',
type:'line',
yAxisIndex: 1,
data:[13,23,34,21,2,45,23]
},
{
name:'阿里百分比',
type:'line',
yAxisIndex: 1,
data:[25,57,57,42,23,68,35]
}
]
};
2.效果图
var weekPoundateDataset = {
"工资": [9, 8, 7, 8, 4],
"绩效": [3, 4, 6, 2, 6]
};
var weekPoundateKey = ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09'];
var weekPoundateSum=[];
var weekPoundateData1 = {};
for (var x in weekPoundateDataset["工资"]) {
weekPoundateSum[x] = weekPoundateDataset["工资"][x]+weekPoundateDataset["绩效"][x];
weekPoundateData1[weekPoundateKey[x]] = weekPoundateSum[x];
}
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'none' // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
x:'center',
y: 'bottom',
data:['工资','绩效','总收入','工资百分比','绩效百分比']
},
grid: {
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09']
}
],
yAxis : [
{
type : 'value',
name: '万\n元',
min: 0,
max: 15,
interval: 3,
},
{
type: 'value',
name: '百\n分\n比',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
},
}
],
series : [
{
name:'工资',
type:'bar',
barWidth : 40,
stack: '收入',
label: {
normal: {
show: true,
position: 'inside',
formatter: function(params) {
return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%";
},
textStyle:{color:'black'}
}
},
data:[9, 8,7,8,4]
},
{
name:'绩效',
type:'bar',
stack: '收入',
label: {
normal: {
show: true,
position: 'inside',
formatter: function(params) {
return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%";
},
textStyle:{color:'black'}
}
},
data:[3, 4, 6, 2, 6]
},
{
name:'总收入',
type:'line',
yAxisIndex: 0,
data:[12,12,13,10,10]
},
{
name:'工资百分比',
type:'line',
yAxisIndex:1,
data:[75,66.7,53.8,80,40],
},
{
name:'绩效百分比',
type:'line',
yAxisIndex:1,
data:[25,33.3,46.2,20,60]
}
],
color:['#4f81bc','#f79647','red','green','blue']
};3.效果图
ption = {
title: {
text: '万\n元'
},
tooltip: {
trigger: 'axis'
},
legend: {
x:'center',
y: 'bottom',
data:['网络支付','移动支付','跨境支付','金融业务','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2016-01-05','2016-01-06','2016-01-07','2016-01-08','2016-01-09','2016-01-10','2016-01-11','2016-01-12','2016-01-13','2016-01-14','2016-01-15','2016-01-16','2016-01-17','2016-01-18','2016-01-19'],
axisLabel: {
interval:0,
rotate:40
}
},
yAxis: {
type: 'value'
},
series: [
{
name:'网络支付',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210,243,212,234,245,231,233,323,211,112,115,355,221]
},
{
name:'移动支付',
type:'line',
data:[220, 182, 191, 234, 290, 330, 310,231,234,211,245,234,321,234,111,124,232,235,676]
},
{
name:'跨境支付',
type:'line',
data:[150, 232, 201, 154, 190, 330, 410,221,335,486,433,222,111,233,455,444,333,222,333]
},
{
name:'金融业务',
type:'line',
data:[320, 332, 301, 334, 390, 330, 320,231,124,353,231,132,342,233,455,423,123,123,334]
}
]
};4.效果图
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
x:'center',
y: 'bottom',
data:['工行','中行',"建行","农行","招行",'总计','总计折线']
},
xAxis: [
{
type: 'category',
data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'],
axisPointer: {
type: 'none'
}
}
],
yAxis: [
{
type: 'value',
name: '万\n元',
}
],
series: [
{
name:'工行',
type:'bar',
data:[12,34,23,21,21,23,12]
},
{
name:'中行',
type:'bar',
data:[13,23,34,21,2,45,23]
},
{
name:'建行',
type:'bar',
data:[25,57,57,42,23,68,35]
},
{
name:'农行',
type:'bar',
data:[12,34,23,21,21,23,12]
},
{
name:'招行',
type:'bar',
data:[13,23,34,21,2,45,23]
},
{
name:'总计',
type:'bar',
data:[225,257,257,242,223,268,235]
},
{
name:'总计折线',
type:'line',
yAxisIndex: 0,
data:[225,257,257,242,223,268,235]
}
]
};5.效果图
option = {
title : {
subtext:'单位:万元',
x:'right'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: 'left',
data: ['中国建设银行','中国工商银行','中国农业银行','招商银行','中国邮政储蓄银行','中国银行','平安银行','交通银行','中国民生银行','其他']
},
series : [
{
name:'行业分布',
type: 'pie',
radius : '45%',
center: ['50%', '40%'],
data:[
{value:2324.34, name:'中国建设银行'},
{value:3434.33, name:'中国工商银行'},
{value:22332, name:'中国农业银行'},
{value:44545, name:'招商银行'},
{value:4900, name:'中国邮政储蓄银行'},
{value:55663, name:'中国银行'},
{value:34343, name:'平安银行'},
{value:58596, name:'交通银行'},
{value:2323, name:'中国民生银行'},
{value:5983, name:'其他'}
],
itemStyle: {
normal:{
label:{
show:true,
formatter: function (params) {
return params.value;
}
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};