目 录CONTENT

文章目录

LayUI实现echarts图表渲染

phyger
2022-03-28 / 0 评论 / 0 点赞 / 251 阅读 / 2,247 字 / 正在检测是否收录...
广告 广告

前言

最近在做质量分析平台的时候,需要用到echarts图表,那怎么样优雅的实现我们想要的效果呢?

1、思路

首先,我们使用LayUI的格栅布局,在一个container中起一个行,然后将其66平分,各自使用card填充。然后为这两个card定义id。最后我们在js中对card进行初始化和渲染。

2、代码

2.1、card布局

cardcode

如上,为两个card占据一行,各占一半。以下为效果图。

效果图

2.2、js代码

我们将写好的js代码导入到html文件中。

导入js

js代码内容,此处以bugLevel举例。

layui.use(['echarts'], function() {
    // 获取迭代数据
    var dd = localStorage.getItem('dd');
    uri = "http://x.x.x.x:8000/bug5?dd="+dd;
    // 获取缺陷数据
    axios({
    method:'get',
    url:uri
    })
    .then(function(response) {
    //debugger;
    let echarts = layui.echarts;
    
	var bug1 = echarts.init(document.getElementById('bug-level'));
    
    option = {
        title: {
          text: '缺陷等级分布',
          subtext: 'Data From Steam',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: response.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
	bug1.setOption(option);
	window.onresize = function() {
		bug1.resize();
	}
    });
})
代码分析

以上代码,起初LayUI加载echarts模块,然后从localStorage获取迭代数据(这个数据是在首页选择迭代的时候同步更新到localStorage的),接着使用迭代数据拼接uri,axios从拼接好的uri获取对应的数据。在axios的成功回调中将bug-level初始化为echarts对象,然后在echarts的data处赋值从后台回去的数据,最后将echarts对象渲染即可。

3、附

这里补充下在首页的select中选择了迭代后将迭代数据存到localStorage的实现。

<ul class="layui-nav layui-layout-left">
					<li class="collaspe layui-nav-item"><a href="#" class="layui-icon layui-icon-shrink-right"></a></li>
					<li class="layui-nav-item">
					<select id="dd" name="demo3" xm-selects="demo3" xm-select-skin="normal" onchange="localStorage.setItem('dd',document.getElementById('dd').value);">
						<option value="2月迭代" class="layui-icon-refresh-1">2月迭代</option>
						<option value="3月迭代" class="layui-icon-refresh-1">3月迭代</option>
						<option value="4月迭代" class="layui-icon-refresh-1">4月迭代</option>
						<option value="5月迭代" class="layui-icon-refresh-1">5月迭代</option>
					</select>
					</li>
					<li class="refresh layui-nav-item"><a href="#" class="layui-icon layui-icon-refresh-1" loading = 600></a></li>
				</ul>

核心就是在select元素中的onchange事件,意为当选择发生变化的时候,就将id为dd的元素(即select本身)的value存到localStorage中,取名为dd,这样就可以使用js从localStorage中获取dd的值。

0
广告 广告

评论区