初识echarts

初识echarts

echarts是百度开源的一个使用 JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表,用于实现数据的可视化。

数据可视化，顾名思义让数据以一种更加清晰直观的图表形式进行呈现，相较于大量繁杂的数据，视觉效果和可读性更佳，能够有效的传达信息，有利于决策的实施，因此，广泛应用。
echarts特点:
开源免费 功能丰富 社区活跃 支持多种数据 支持流数据 移动端优化 跨平台 酷炫的特效 等等
快速上手
echarts的使用大体分为五步：

1. 引入echarts.js（echarts官网首页 https://echarts.apache.org/zh/index.html）

    <!-- 引入 ECharts 文件 -->
   <script src="echarts.min.js"></script>
   

2. 准备一个具备宽度和高度的div盒子，用于放置echarts图表

   <div id="box" style="width:600px;height:600px"></div>	
   

3. 初始化echarts实例

     var myCharts = echarts.init(document.getElementById('box'))
   

4. 准备配置项
   这步很关键，决定里图表的类型，以及呈现的样式效果

   //柱状图
   var option = {
   xAxis: {   //x轴配置项
       type: 'category', //类型为类别轴
       data: ['小明', '小红', '小王'] //类别轴要展示的数据
   },
   yAxis: { 	//y轴配置项
       type: 'value' //类型为数值轴
   },
   series: [{
           name: '语文',
           type: 'bar', //决定每个图表的类型
           data: [70, 92, 87], //数值轴展示的数据
           }]
   	}
   

5. 将配置项设置到 echart实例中

   myChart.setOption(option)