Bootstrap+Echarts+js实现图表自适应动态可视化

最终效果如下：

Bootstrap+echarts实现自适应数据动态可视化

实现步骤：

1.引入Bootstrap

v3地址https://v3.bootcss.com/css/

2.引入Echarts

5.2地址https://echarts.apache.org/zh/index.html

3.利用Bootstrap的栅格系统创建一个容器

<div class="row">
          <div class="col-xs-12 col-md-6 col-lg-3">
            <div id="main">
            </div>
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
            <div id="line" ></div>
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
          <div id="thunder"></div>
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
           <div id="speed"></div>
          </div>
        </div>
  
        <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/mycharts.js"></script>
      

3.1注意点：

①：js文件应放在html文件最下方（body闭合标签之上），一能提高界面加载速度，二防止js内容无法正常执行。

②：col-xs-12代表当超小屏幕一列可放一个；col-md-6代表当中等屏幕一可放两个；col-lg-3代表当大屏时一列可放四个。

4.js文件中实例化Echarts对象

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

5.添加配置项

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);

6.配置项

/ 指定图表的配置项和数据
 option1 = {
  title: {
    text: 'ECharts'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '毛衫', '纺衫', '裤子', '鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: sales
    }
  ]
};

6.1注意点：

①：虽然echarts官网有很多示例，可以直接借鉴，但注意改变示例中option的名字，js语法不允许同一个变量重复声明，否责会出现界面放置多个示例，却一个都出不来的情况。

7.Echarts图表宽度自适应

虽然容器已经是自适应的了，也配置了规则，但是对echarts图表是无效的,解决策略如下：

7.1css代码

#main{width: 100%;  height: 500px}
#line{width: 100%; height: 500px;}
#thunder{width: 100%; height: 500px;}
#speed{width: 100%; height: 500px;}

7.2js代码

window.onresize = function(){
    line.resize();
    myChart.resize();
    three.resize();
    speed.resize();
}

8.数据抽离

//雷达图的预算
    let budget = [4200, 3000, 20000, 35000, 50000, 18000]
    //雷达图的开销
    let spending = [5000, 14000, 28000, 26000, 42000, 21000]
    //仪表盘的数值
     
    let xdn = 80
       
      // xdn =  prompt("请输入：")
    
    //柱状图销量
    let sales = [5, 20, 36, 10, 10, 20]
    //线性图
    let linex = [10, 22, 28, 23, 19]

8.1注意点：

①：通过观察echarts代码可以发现，需要动态传入的数据一般是js的对象或数组形式。

②：此处需熟知js对象/数组取值的基本语法；以及数组添加数据的.push .pop等方法。

示例如下：

    console.log(option4.series[0].data[0].value)
       let yy = []
       yy.push(m)

9.让图表动起来

正常来说需要发送异步请求到后端数据库实时获取数据，此处采用的是模拟数据。示例代码如下：

 setInterval(function(){
           //公式  Math.floor(Math.random() *( m- n + n)) + n 产生指定范围的随机数
           m = Math.floor(Math.random() *(100 - 1 + 1)) + 1
            fun(m) 
       },1000)
        function fun(m){
        
            let yy = []
            yy.push(m)
            console.log(yy)
            if(yy.length > 4)
              {
                yy.length = 0
              }else{
                yy.push(m)
              }
            
        }