二、Echarts的基本使用

二、Echarts的基本使用

一、安装

1.下载地址

https://echarts.apache.org/zh/download.html

2.使用npm安装

npm install echarts

1

二、ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件

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

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

1

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

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

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

1

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

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

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

1

步骤4：准备配置项

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

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

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

myChart.setOption(option)

1

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码 都是固定不变的.