1.柱状图（去除网格线和加四边框）
var option2 = {
title: {
text: '本月日出租数量'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
show:true,
borderColor:'rgba(6,4,5,0.96)', //加四边框 并改变颜色和粗细
borderWidth:5,
barBorderRadius:15
},
tooltip: {},
legend: {
data:['日租数']
},
xAxis: {
data: [
<c:forEach items="${list}" var="list">
'${list}',
</c:forEach>
],
how:false,
splitLine:{//去除网格线
show:false
},
splitArea : {show : false},//去除网格区域
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize:'15', //x-字体修改
itemSize:''
}
},
},
yAxis: {
how:false,
splitLine:{//去除网格线
show:false
},
splitArea : {show : false}//去除网格区域
},
series: [{
name: '销量',
type: 'bar',
data: [ <c:forEach items="${dayPerMon}" var="dayPerMon">
${dayPerMon},
</c:forEach>]
}
]
};
1.2柱状图 柱子粗细
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '柱状图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//设置柱状图大小
barWidth: 20,
//设置柱状图渐变颜色
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#1268f3" // 0% 处的颜色
}, {
offset: 0.6,
color: "#08a4fa" // 60% 处的颜色
}, {
offset: 1,
color: "#01ccfe" // 100% 处的颜色
}], false)
}
},
data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
}]
});
1.饼状图（字体修改）
// 指定图表的配置项和数据
var option = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
<c:forEach items="${cousecount}" var="type">
{value:${type.ccount}, name:'${type.cname}人数:${type.ccount}'},
</c:forEach>
,0
],
label: {
"normal": {
"show": true,
"textStyle": {
"fontSize": 18 }
},
"emphasis": {
"show": true
}
},
roseType: 'angle',
tooltip: {
textStyle:{
fontSize:'20'
}
},
emphasis:{
label:{
show:true,
fontSize:'30',
fontWeight:'bold'
}
},
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
textSize:'20',
fontSize:'20',
}
}
]
};
3.阴影柱状图
var option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
show:true
},
xAxis: [
{
type: 'category',
data: [
<c:forEach items="${couseStylecount}" var="type">
'${type.belongpro}',
</c:forEach>
],
axisTick: {
alignWithLabel: true
},
how:false,
splitLine:{//去除网格线
show:false
},
splitArea : {show : false},//去除网格区域
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize:'15', //x-字体修改
itemSize:''
}
},
}
],
yAxis: [
{
type: 'value',
how:false,
splitLine:{//去除网格线
show:false
},
splitArea : {show : false}//去除网格区域
},
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [ <c:forEach items="${couseStylecount}" var="type">
'${type.cid}',
</c:forEach>] ,
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
var index;
//给大于颜色数量的柱体添加循环颜色的判断
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
return colorList[index];
}
return colorList[params.dataIndex];
}
}
},
}
]
};4.折线图 字体全部更改
<script type="text/javascript">
var loc = $("input[name='basepath']").val();
var url = loc + "chart/getNum.action";
$.ajax({
type : "get",
url : url,
dataType : "json",
success : function(json) {
var days = json.days.replace("[", "").replace("]", "").split(",");
var sellTotal = json.sellTotal.replace("[", "").replace("]", "").split(",");
var option = {
title : {
text : '预约数量统计',
left : 'center',
textStyle: {
color: '#000',
fontSize:'30', //x-字体修改
itemSize:''
}
},
tooltip : {
trigger : 'item',
formatter : '{a} <br/>{b} : {c}',
textStyle: {
fontSize:'30', //x-字体修改
itemSize:''
}
},
legend : {
left : 'left',
textStyle: {
fontSize:'30', //x-字体修改
itemSize:''
}
},
xAxis : {
type : 'category',
name : 'x',
splitLine : {
show : false
},
data : days,
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize:'30', //x-字体修改
itemSize:''
}
},
},
grid : {
show: true,
left : '3%',
right : '4%',
bottom : '3%',
borderColor:'#000',
containLabel : true,
},
yAxis : {
type : 'value',
how:false,
minInterval: 1, //取整
splitLine:{//去除网格线
show:false
},
splitArea : {show : false},//去除网格区域
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize:'30', //x-字体修改
itemSize:''
}
},
},
series : [ {
name : '预约数量',
type : 'line',
data : sellTotal,
smooth: true,
fontSize:'30', //x-字体修改
axisLabel: {
inside: false,
textStyle: {
fontSize:'30', //x-字体修改
itemSize:''
}
}
} ]
};
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用制定的配置项和数据显示图表
myChart.setOption(option);
},
error : function() {
alert("ajax请求发生错误3");
}
});
</script>饼图显示百分数
var myChart2 = echarts.init(document.getElementById('container1'));
var option2 = {
tooltip:{
trigger:'item',
formatter:"{a} <br/>{b}: {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
label: {
"normal": {
"show": true,
"formatter":'{b}: ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
"textStyle": {
"fontSize": 20,
"fontFamily":'Times New Roman',
}
},
"emphasis": {
"show": true
}
},
data: [
<%for (HashMap map : list) {%>
{
name: '<%=map.get("shijian")%>',
value: <%=map.get("count")%>,
},
<% } %>
]
}
]
};
myChart2.setOption(option2);
扫一扫
9083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
