一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

数据可视化

数据可视化主要目的：借助图形化的手段，清晰有效的传达信息与沟通信息；
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

Echarts使用五部曲

1.下载并引入echarts.js文件（图表依赖这个js库) 2.准备一个具体大小的DOM容器（生成的图表会放入这个容器内） 3.初始化echarts实例对象（实例化echarts对象） 4.指定配置值和数据（根据具体需求修改配置选项） 5.将配置项设置给echarts实例对象（让echarts对象根据修改好的配置生效）

echarts具体使用分析

1.首先在echarts官网下载合适的echarts版本

echarts.baidu.com/download.ht…

2.在html文件中引入（在这里要注意路径问题）

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

3.准备一个dom容器

4.初始化实例对象

 var myChart=echarts.init(document.querySelector(".box"));

5.指定配置值和数据（可以在echarts官网直接下载模板） 6.将配置项设置给echarts实例对象

 myChart.setOption(option);

接下来是具体的代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <script src="../project/js/echarts.min.js"></script>
    <script>
        //初始化实例对象 echarts.init(dom容器)
        var myChart=echarts.init(document.querySelector(".box"));
        //指定配置项和数据
        var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      //把配置项给实例对象
      myChart.setOption(option);
    </script>
</body>
</html>

实现的效果是这样的

echarts的使用

数据可视化

Echarts使用五部曲

echarts具体使用分析