Echarts统计图
一.使用
1.导入echarts.min.js
<script type="text/javascript" src="${stylePath}/js/echarts.common.min.js"></script>
2.导入图形样式js
line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
· bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
· scatter.js : 散点图
· k.js : K线图
· pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
· radar.js : 雷达图
· map.js : 地图
· force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
· chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
· funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
· gauge.js : 仪表盘
· eventRiver.js : 事件河流图
· treemap.js : 矩阵树图
· venn.js : 韦恩图
二.统计图样式
1.统计图类型
type: 'bar', //统计图类型 bar圆柱图/line折线图/pie饼状图/scatter离散图/gauge仪表盘
funnel漏斗图/tree树状图/....
2.统计图文字样式
textStyle
名称 | 默认值 | 描述 |
{color} color | 各异 | 颜色 |
{string} decoration | 'none' | 修饰,仅对tooltip.textStyle生效 |
{string} align | 各异 | 水平对齐方式,可选为:'left' | 'right' | 'center' |
{string} baseline | 各异 | 垂直对齐方式,可选为:'top' | 'bottom' | 'middle' |
{string} fontFamily | 'Arial, Verdana, sans-serif' | 字体系列 |
{number} fontSize | 12 | 字号 ,单位px |
{string} fontStyle | 'normal' | 样式,可选为:'normal' | 'italic' | 'oblique' |
{string | number}fontWeight | 'normal' | 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 |
3.统计图背景颜色
legend: {
data:['销量'],
fontColor:"red" //文字颜色
},
backgroundColor:{
color:"#ff0000" //背景颜色
},
xAxis: {
data: []
},
4.柱状图宽度
barWidth:70 //柱状图的宽度
5.柱状图的颜色
itemStyle: {
normal: {
//好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', //一串自定义颜色
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex] //通过数值对应的索引来对应不同的颜色
}, //以下为是否显示,显示位置和显示格式的设置了
label: {
show: true,
position: 'top',// formatter: '{c}'
formatter: '{b}\n{c}'
}
}
},
在series中放入,例如
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount, //获取数据的名称
barWidth:70, //柱状图的宽度
itemStyle: {....}
}]
6.折线图的颜色
itemStyle : {
normal : {
color:'red', //圈圈的颜色16进制和英文都可以
lineStyle:{
color:'yellow' //线的颜色
}
}
},
在series中放入,例如
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount, //获取数据的名称
barWidth:70, //柱状图的宽度
itemStyle: {....}
}]
7.统计图颜色
color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//颜色
三. 统计图实现
0.数据获取
@RequestMapping("Countlist.dhtml")
@ResponseBody
public String Countlist(HttpServletRequest request,Model model) throws UnsupportedEncodingException{
List<SaleCount> list = saleService.saleCountlist();
HashMap<String, Object> map = new HashMap<String,Object>();
List<String> dishName = new ArrayList<String>();
List<String> dishCount = new ArrayList<String>();
for (SaleCount saleCount : list) {
dishName.add(saleCount.getDishName());
dishCount.add(saleCount.getDishCount().toString());
}
map.put("dishName", dishName);
map.put("dishCount", dishCount);
Gson gson = new Gson();
return gson.toJson(map);
}
1.柱状图
var myChart = echarts.init(document.getElementById('container')); //可以是一个div的ID名
myChart.setOption({
title: {
text: '菜品名称/销量' //柱状图的名称
},
tooltip: {},
legend: {
data:['销量'] //纵坐标的名称
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量', //横坐标的名称
type: 'bar', //统计图类型 bar圆柱图/line折线图/pie饼状图/scatter离散图
data: []
}]
});
// 异步加载数据
$.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {
var data1=$.parseJSON(data);
// 填入数据
myChart.setOption({
xAxis: {
name: '菜品',
data: data1.dishName //获取的数据名称
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount, //获取数据的名称
barWidth:70 //柱状图的宽度
}]
});
});
2.折线图
var myChart = echarts.init(document.getElementById('container')); //可以是一个div的ID名
myChart.setOption({
title: {
text: '菜品名称/销量' //柱状图的名称
},
tooltip: {},
legend: {
data:['销量'] //纵坐标的名称
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量', //横坐标的名称
type: 'line', //统计图类型 bar圆柱图/line折线图/pie饼状图/scatter离散图
data: []
}]
});
// 异步加载数据
$.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {
var data1=$.parseJSON(data);
// 填入数据
myChart.setOption({
xAxis: {
name: '菜品',
data: data1.dishName //获取的数据名称
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount, //获取数据的名称
barWidth:70 //柱状图的宽度
}]
});
});
3.多柱状图
var myChart = echarts.init(document.getElementById('container'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '菜品名称/销量'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//颜色
series: [{
name: '销量',
type: 'bar',
data: []
},{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {
var data1=$.parseJSON(data);
// 填入数据
myChart.setOption({
xAxis: [{
name: '菜品',
data: data1.dishName
},{
name: '菜品1',
data: data1.dishName
}],
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount
},{
// 根据名字对应到相应的系列
name: '销量1',
data: data1.dishCount
}]
});
});
4.柱状图+折线图
var myChart = echarts.init(document.getElementById('container'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '菜品名称/销量'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
},{
name: '销量',
type: 'line',
data: []
}]
});
// 异步加载数据
$.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {
var data1=$.parseJSON(data);
// 填入数据
myChart.setOption({
xAxis: {
name: '菜品',
data: data1.dishName
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount
},{
// 根据名字对应到相应的系列
name: '销量',
data: data1.dishCount
}]
});
});