ECharts的基本使用（学习笔记）

官网地址：https://echarts.apache.org/zh/index.html

ECharts的快速上手

步骤1：引入 echarts.js 文件

（script)
echarts是一个 js 的库，当然得先引入这个库文件

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

步骤2：准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

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

步骤3：初始化 echarts 实例对象

(init)
在这个步骤中, 需要指明图表最终显示在哪里的document元素

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

步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

 var option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }

步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)

结果展示