???????????????用ECharts生成统计图
这是我的HTML部分:
??<div?class="layui-fluid"?style="font-size:16px">
????????@*?列间距15 layui-col-space15 ?*@
????????<div?class="layui-row layui-col-space15">
????????????<div?class="layui-col-md12">
????????????????<div?class="layui-col-md6">
????????????????????<div?class="layui-card"?style="height:500px;">
????????????????????????<div?class="layui-card-header"?style="font-size:16px;">
????????????????????????????<i?class="layui-icon layui-icon-group">图书馆书本销量合计</i>
????????????????????????</div>
????????????????????????<div?class="layui-card-body">
????????????????????????????<div?id="main"?style="width:600px;height:500px"></div>
????????????????????????</div>
????????????????????</div>
????????????????</div>
????????????????<div?class="layui-col-md6">
????????????????????<div?class="layui-card"?style="height:500px">
????????????????????????<div?class="layui-card-header"?style="font-size:16px">
????????????????????????????<i?class="layui-icon layui-icon-chart">书本销量整合统计</i>
????????????????????????</div>
????????????????????????<div?class="layui-card-body">
????????????????????????????<div?id="tmain"?style="width:95%;height:450px"></div>
????????????????????????</div>
????????????????????</div>
????????????????</div>
????????????</div>
????????</div>
????</div>
????
这里面有两个统计图,一个是扇形统计图,一个是柱形图;
这两个图都是通过echarts这个插件形成的;
这是echarts的网站:https://echarts.apache.org/examples/zh/index.html#chart-type-radar
首先你如果要使用ECharts那在你使用之前前先通过script标签引入构建好的echarts文件;
在绘图前我们要为ECharts准备一个具备高宽的DOM容器,
如上图中的：<div?id="main"?style="width:600px;height:500px"></div>??与?<div?id="tmain"?style="width:95%;height:450px"></div>
这两个标签一个是为扇形统计图的DOM容器一个是柱形图的DOM容器;
在上述的几步完成之后通过echarts.init方法初始化一个echarts实例并通过setOption方法生成图形;
下面这行代码是我的javascript部分;
?$.getJSON("inquire", function?(data) {
????????console.log(data);
????????MEAG(data);
????})
????setBzhuy();
????function?MEAG(data) {
????????var?mainCh = echarts.init(document.getElementById("main")); ?//通过echarts.init方法初始化一个echarts实例
????????option = {
????????????title: {
????????????????text: '图书管理系统',
????????????????subtext: '书本销量统计图',
????????????????left: 'center'
????????????},
????????????tooltip: {
????????????????trigger: 'item'//trigger提示框组件；数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
????????????????//axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
????????????????//none：什么都不触发。
????????????},
????????????legend: {
????????????????orient: 'vertical',//图例列表的布局朝向。
????????????????//图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'。
????????????????left: 'left',
????????????},
????????????series: [//图例的数据数组，数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。
????????????????{
????????????????????name: '图书管理系统',//数据项名称。
????????????????????type: 'pie',
????????????????????radius: '50%',//'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
????????????????????data: data,
????????????????????emphasis: {//高亮状态的扇区和标签样式。
????????????????????????itemStyle: {
????????????????????????????shadowBlur: 10,
????????????????????????????shadowOffsetX: 0,
????????????????????????????shadowColor: 'rgba(0, 0, 0, 0.5)'
????????????????????????}
????????????????????}
????????????????}
????????????]
????????};
????????// 使用刚指定的配置项和数据显示图表。
????????mainCh.setOption(option);
????}
????
????function?setBzhuy(data) {
????????//基于准备好的dom,初始化echarts实例;
????????var?myChat = echarts.init(document.getElementById("tmain"))
????????//设置为同步 $.ajaxSettings.asyn=false;
????????$.ajaxSettings.async = false;
????????var?typeN;
????????var?nameM ;
????????$.getJSON("Booktype", function?(data) {
????????????typeN = data; //这是图书类型
????????????console.log(typeN);
????????})
????????$.getJSON("BookNumber", function?(data) {
????????????nameM = data//这是各类型图书数
????????????console.log(nameM);
????????})
???????
????????option = {
????????????xAxis: {
????????????????type: 'category',
????????????????data: typeN
????????????????, axisLabel: {
????????????????????interval: 0//解决隔一个显示一个问题。（原理：该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签）
????????????????}
????????????},
????????????yAxis: {
????????????????type: 'value'
????????????},
????????????
????????????series: [{
????????????????data: nameM,
????????????????type: 'bar',
????????????????showBackground: true,
????????????????backgroundStyle: {
???????????????????color: 'rgba(180, 180, 180, 0.2)'
???????????????}
????????????}]
????????}
????????myChat.setOption(option);
????}
????
</script>
这上面的通过getJSON获取的是我数据库中的数据 ;
这是我的页面效果:
如图:
?
