1.使用Echats有两个比较方便的网站
1.https://echarts.baidu.com/echarts2/doc/example.html (统计图的样式)
2.https://echarts.baidu.com/builder.html (在线js定制生成)
2.引入ECharts
直接在官网下载所需ECharts文件,或者去上面定制生成js文件然后像引入普通JavaScript库一样用script标签引入即可。代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 引入ECharts文件 -->
<script src='echarts.min.js'></script>
</body>
</html>
3.制作统计图(列举一个饼图和柱图)
<!-- 查看饼状图 -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 查看柱状图 -->
<div id="main2" style="width: 600px;height:400px;"></div>
4.初始化,指定图表配置和使用Ajax动态绑定数据
后台写方法查询数据是返回json格式,前台使用ajax调用解析,然后填充数据到Echaets里面就可以了
//饼状图绑定数据
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
url: "../../wxInterface/yqwxRepair.asmx/WXTJ", //后台方法路径(返回json格式)
type: "POST",
async: false,
dataType: "json",
data: "",
contentType: "application/json",
cache: false,
timeout: 30000,
success: function (json) {
json = eval("(" + json.d + ")"); //对后台json解析,根据返回的格式不同自行修改
var data = json.data;
if (json) {
var servicedata = [];
for (var i = 0; i < data.length; i++) {
var obj = new Object();
obj.name = data[i].YQMC; //循环取你想要显示的名称,对应数据库字段
obj.value = data[i].CiShu; //循环取你想要显示的值
servicedata[i] = obj; //待会要填充的数据(包含名称和值)
}
myChart.setOption({
title: {
text: '仪器维修次数',
subtext: '饼图',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{b} <br/>{c} : {d} %" //a 系列名称,b 数据项名称,c 数值,d 百分比
},
legend: {
orient: 'vertical',
x: 'left',
data: data.YQMC //绑定名称
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '点击量',
type: 'pie',
radius: '55%',//饼图的半径大小
center: ['50%', '60%'],//饼图的位置
data: servicedata //填充数据
}
]
})
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
//柱状图
<script type="text/javascript">
var myChart2 = echarts.init(document.getElementById('main2'));
// 显示标题,图例和空的坐标轴
myChart2.setOption({
title: {
text: '仪器维修次数'
},
tooltip: {},
legend: {
data: ['仪器']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '仪器',
type: 'bar',
data: []
}]
});
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
url: "../../wxInterface/yqwxRepair.asmx/WXTJ",
type: "POST",
async: false,
dataType: "json",
data: "",
contentType: "application/json",
cache: false,
timeout: 30000,
success: function (json) {
json = eval("(" + json.d + ")");
var Data = json.data;
if (json) {
for (var i = 0; i < Data.length; i++) {
names.push(Data[i].YQMC); //挨个取出类别并填入类别数组
}
for (var i = 0; i < Data.length; i++) {
nums.push(Data[i].CiShu); //挨个取出销量并填入销量数组
}
myChart2.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '仪器',
data: nums
}]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart2.hideLoading();
}
});
</script>