近期遇到了一个关于图片的问题,在此简单记录,方便记忆

什么是ECharts

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

image-20200925095642750

具体介绍和一些其他的实例可以去它的 官网 进行查看

配置安装 可以查看 官方文档

配置

当然,示例肯定都是写死的数据,而我们一般使用肯定是需要从数据库来获取数据的。

下面记录一下最近碰到的一个图表,它是一个横向的柱状图,还需要一个排序的功能。

在引入完 ECharts 所需要的一些东西之后,就可以使用了,下方是一段 实例代码。

首先,需要写一个 div 容器 ,里面用来存放绘制的图表

1
2
3
4
5
6
7
8
9
<div class="col-sm-12 search-collapse">
<!--下方这个div是需要用到的那两个排序按钮-->
<div style="margin:10px;">
<input type="radio" checked name="tong" onclick="getmoney1()"><label>前10名</label>
<input type="radio" name="tong" onclick="getmoney2()"><label>最后10名</label>
</div>
<!--下方这个div就是我们需要的容器-->
<div style="height: 200px;" id="echarts-bar-chart"></div>
</div>

其次,就可以写相应的处理代码了,由于我使用的是若依的框架,可以在对应的地方直接写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script th:inline="javascript">
var prefix = ctx + "接口地址";
var school = []; //定义一个数组,用来存储具体的学校名称
var total = []; //定义一个数组,用来存储每个学校具体的盈利金额
let that = this; //定义一个 that,把 this 赋给它
var money = true; //定义一个 money ,用于在后面进行判断
window.onload = function () { //用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行某个方法等
getsearch(); //搜索方法
}

function getsearch() { //搜索方法
setecharts(); //图表方法
$.table.search(); //若依自带的搜索
}

function getreset() { //重置方法
$.form.reset(); //若依自带的重置
getmoney1(); //重置后调用前10名
}

function setecharts() {
var config = {
url: prefix, //即上方定义的请求路径
data: $('#formId').serialize(), //序列化表单值
type: "post", //请求方式
async: true, //是否异步
beforeSend: function () {
$.modal.loading("正在处理中,请稍后..."); //打开遮罩层
},
success: function (result) { //获取数据
that.school = []; //先把数组赋空
that.total = []; //先把数组赋空
let len = result.rows.length; //获取数据的长度
var arr = result.rows; //长度
if (that.money) //用来判断是 前10名 还是 最后10名
arr.sort(function (a, b) {
return a.classaway - b.classaway
});
else
arr.sort(function (a, b) {
return b.classaway - a.classaway
});
console.log("长度", len)
for (let i = 0; i < len; i++) { //for循环给数组进行赋值
that.school[i] = arr[i].deptName;
that.total[i] = arr[i].classaway;
}
var date = setInterval(() => { //传递数据
clearInterval(date);
getexchart(school, total)
$.modal.closeLoading(); //关闭遮罩层
}, 500); // 500 表示延迟时间
}
};
$.ajax(config)
}

function getmoney() { //前10名
that.money = true;
getsearch()
}

function getmoney2() { //最后10名
that.money = false;
getsearch()
}


function getexchart(n, t) { // n 代表 学习 ,t 代表金额
var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
var baroption = {
title: {},
tooltip: {
trigger: 'axis',
},
color: ['#FF7F50'], //柱状图的颜色
legend: {
data: ['自定义名称'], //可以自定义昵称
},
grid: {
left: 20,
top: 20,
right: 20,
bottom: 20,
containLabel: true
},
calculable: true,
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01]
}
],
yAxis: {
data: n //赋值
},
series: [
{
name: '2020年',
type: 'bar',
barMaxWidth: '40%',
data: t //赋值
},

]
};
barChart.setOption(baroption);
window.onresize = barChart.resize;

}


</script>