LayUI实现echarts图表渲染

前言

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

1、思路

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

2、代码

2.1、card布局

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

2.2、js代码

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

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的值。