ECharts 基本使用指南

官网下载及文档：https://echarts.baidu.com/download.html           

一、入门使用：

1、引入 js 文件：

2、 准备一个具备高宽的 DOM 容器：

3、通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图：

  
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('demo_echarts'));

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

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
 

     

  二、echarts 认识

        首先要说明一点，echarts这个框架的配置内容很是多，所以不要尝试着把这个框架中的方法都给记住，这是不太可能的事。但是由于这个框架的配置文件参数比较多，所以我们就需要来学习一下echarts是怎样来对其进行分类的。

1、echarts 配置项

        首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详细的配置文件请戳这里，比较常见的配置大致如下图：

     

     上面用红色方框标出来的就是echarts的基础配置，也是学习echarts一定要掌握的配置。

2、echarts API 交互：

      官方文档中的API的分类，大致的API可以分成这样的四类：

     

参考文章： https://www.cnblogs.com/st-leslie/p/5771241.html

使用指南 大牛讲解的很详细  非常感谢~， 具体根据业务来设置配置项