ECharts 基本使用指南-蒲公英云

ECharts 基本使用指南

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

一、入门使用：

1、引入 js 文件：

<script src="static/plugins/ECharts-4.2.1/echarts.js"></script>

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

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

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

<script type="text/javascript">  
    // 基于准备好的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);
</script>
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

#

二、echarts 认识

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

1、echarts 配置项

    首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详细的配置文件[请戳这里][Link 1]，比较常见的配置大致如下图：
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]
 上面用红色方框标出来的就是echarts的基础配置，也是学习echarts一定要掌握的配置。

2、echarts API 交互：

  官方文档中的API的分类，大致的API可以分成这样的四类：
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

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

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