echarts( 数据可视化) 属于h5新增内容

echarts : Apache ECharts 一个基于 JavaScript 的开源可视化图表库  （必须借助于第三方插件，需要引入js里面才能用，要不然没办法实现效果）  五分钟上手教程：             1. 引入echarts.js 文件 　　　　JS        

            2.  为图表创建一个固定宽高的容器       　　html

　　　　css

1      #mycharts{
2                     width: 600px;
3                     height: 600px;
4                     border:1px solid red;
5                 }

            3. 创建图表的实例化对象  初始化图表             通过图表容器的dom对象进行初始化操作 　　　　js

1                 let container = document.querySelector('#mycharts')
2                 const mycharts = echarts.init(container);

            4. 创建图表的配置项 　　　　js          

 1 let option = {
 2                     xAxis:{
 3                          data:['周一', '周二', '周三']
 4                     },
 5                     yAxis:{},
 6                     series:[
 7                         {
 8                             type:'bar',
 9                             data:[100, 50, 120]
10                         }
11                     ]
12                 }

            5. 设置图表数据项显示              js:

   mycharts.setOption(option)

 案例如下：

css:

 1 .warp,
 2         .arr,
 3         .third,
 4         .fourth {
 5             display: inline-block;
 6             width: 500px;
 7             height: 500px;
 8             box-shadow: 0 0 10px 10px yellow;
 9 
10         }
11 
12         .arr {
13             margin-left: 50px;
14         }
15 
16         .www {
17             width: 1200px;
18             margin: 200px auto;
19 
20         }

html:

1 <div class="www">
2         <div class="warp">div>
3         <div class="arr">div>
4     div>
5     <div class="third">div>
6     <div class="fourth">div>

js:

  1   
  2