1) 饼图
var option = {
color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#ff9999', '#808000', '#00cccc','#999999'],
// 提示框
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c}票'
},
series: [
{ type: 'pie',
radius: ['45%', '70%'],
center: ['50%', '50%'],
label: {formatter: '{b}\n {c}票 ({d}%)',},
data: data
}
]
};
2) 仪表盘
var option = {
series: [{
type: 'gauge',
radius: '70%',
center: ["50%", "50%"],
min: 0,
max: 100,
itemStyle: {
color: ['#FD7347'],
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 13
},
pointer: {
show: false,// 隐藏指针
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '35%',
width: 6,
offsetCenter: ['0', '-35%']
},
axisTick: {
show: false,//隐藏刻度
},
splitLine: {
show: false,//隐藏坐标
},
axisLabel: {
show: false,//隐藏坐标标签值
},
title: {
offsetCenter: [0, '30%'],
fontSize: 11
},
detail: {
fontSize: 30,
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: '{value}%',
color: 'auto'
},
data: data
}]
};
3) 柱形图
var option = {
color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#ff9999', '#808000', '#00cccc','#999999'],
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c}'
},
xAxis: {
type: 'category',
data: data.x,
axisLabel: {
//interval: 0, //强制文字产生间隔
//rotate: 45, //文字逆时针旋转45°
//color: '#adadad',
fontSize: 10
},
},
yAxis: {
type: 'value',
axisLabel: {
//color: '#adadad',
fontSize: 10
},
},
series: [{
data: data.y,
type: 'bar',
barWidth : 30,//柱图宽度
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#0e72cc','#6ca30f', '#f59311', '#fa4343', '#29ccc9', '#d12a6a','#A481CC','#85c021',];
return colorList[params.dataIndex]
},
label: {
show: true, //开启显示
//position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
}
}
},
}]
};
4) 条形图
var option = {
color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#A481CC', '#808000', '#00cccc','#999999'],
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c}'
},
xAxis: {
type: 'value',
axisLabel: {
interval: 0, //强制文字产生间隔
//color: '#adadad',
fontSize: 10
},
},
yAxis: {
type: 'category',
data: data.x,
inverse:true,// 倒序
axisLabel: {
//color: '#adadad',
fontSize: 10
},
},
series: [{
data: data.y,
type: 'bar',
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#0e72cc','#6ca30f', '#f59311', '#fa4343', '#16afcc', '#d12a6a','#0e72cc','#85c021',];
return colorList[params.dataIndex]
},
label: {
show: true, //开启显示
// position: '', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
}
},
}
}]
};
5) 词云图
var option = {
//colors : ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
// 提示框
tooltip: {
show: true,
formatter: '{b}: {c}万元',
},
series: [{
type: 'wordCloud',
shape: 'ellipse',
gridSize: 8,
//sizeRange:[15,25],
//drawOutOfBound:true,
textStyle: {
//normal: {
fontFamily: '微软雅黑',
color: function () {
var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
return colors[parseInt(Math.random() * 10)];
}
//}
},
data: data
}
]
};
注:画词云图的时候需要引入词云的js文件