数据可视化是前端必备技能之一，可视化插件也是非常常用且实用的一个插件，这里简单介绍一下ECharts.js这个插件的基本使用步骤。

ECharts.js 是百度出品的一个开源javascript数据可视化库，是目前国内最常用、最热门的一个基于javaScript的数据可视化插件。

下面是ECharts.js的网址：

ECharts官网地址：https://www.echartsjs.com/zh/index.html/
Apache ECharts：https://echarts.apache.org/zh/index.html

下面简答介绍一下ECharts.js库的基本使用步骤--五步曲

ECharts使用五步曲：

1.下载并引入echarts.js文件-->图表依赖这个js库
    只需下载一个：echarts.min.js引入即可

2.准备一个具备大小的DOM容器-->生成的图表会放入此容器中

 

3.初始化echarts实例对象-->实例化echarts对象
    var myChart = echarts.init('容器对象')

// 第三步：初始化/实例化echarts对象
var myChart = echarts.init(document.querySelector(".box"));

4.指定配置项和数据（option）-->根据具体需求修改配置选项
    var option = {  配置项数据  }

    // 第四步：指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }

5.将配置项option设置给echarts实例对象-->让echarts对象根据修改后的配置生效
    myChart.setOption(option) 

// 第五步：将配置项设置给echarts实例对象-->让echarts对象根据修改后的配置生效
 myChart.setOption(option)

效果图展示：

综上已经基本介绍了ECharts数据可视化库的使用方法和步骤，而这其中的第1、2、3、5步基本都是差不多不需要修改的，不同的项目所需要的不同图形和数据基本都是在第4步（指定配置项和数据）中进行修改即可，而常用到的折线图、柱状图、饼图、散点图等等都可以访问文章开头提供的网址--查看示例然后根据个人需求选择一个类似的图形再结合项目需求数据进行修改option中的配置项参数即可。