数据可视化

什么是数据可视化，说白了， 就是把数据以更加直观的方式进行呈现， 那什么方式是更加直观的方式呢?就是图表

我们看一组数据

毛衣：120

衬衣：200

袄子：150

鞋子：80

领带：70

西装：110

裙子：130

这个数据就是某些产品的销量. 单纯从这些文字上来看, 很难看出数据之间对比的关系. 如果把这些数据以图表的方式呈现出来就会显然易见

 

 

这幅图就是这组数据的图表展示.，通过这幅图一眼就能看出哪些产品销量高， 哪些产品销量低，数据一目了然

ECharts的基本使用

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形 库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网：Apache ECharts

ECharts 使用大体分为这几个步骤

1.引入echarts.js文件

2.准备一个呈现图标的盒子

3.初始化echarts实例对象

4.准备配置项

5.将配置项设置给echarts实例对象 

1>引入 echarts.js 文件

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

2>准备一个呈现图表的盒子

我们以div为这个盒子，这个 div 决定了图表显示在哪里

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

3>初始化 echarts 实例对象

指明图表最终显示在哪里的DOM元素

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

4>准备配置项

呈现最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

   var option={
            title:{
                show:true,
                text:"销量"
            },
            xAxis: {
                type: 'category',
                data: ['毛衣', '衬衣', '袄子', '鞋子', '领带', '西装', '裙子']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
         }

5>将配置项设置给 echarts 实例对象

myCharts.setOption(option);

一个图表最终呈现什么样子，完全取决于这个第四步配置项，对于不同的图表,，除了配置项会发生改变之外， 其他的代码都是固定不变的.