echarts( 数据可视化)

echarts : Apache ECharts 一个基于 JavaScript 的开源可视化图表库 五分钟上手教程： 1. 引入echarts.js 文件 　　　　JS

      <script src="./js/echarts.js"></script>

　　

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

          <div id="mycharts" ></div>

　　　　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)