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)