Echarts的使用

Echarts的使用

记录自己第一次在vue中使用Echarts。

下载

在vue中使用Echarts，需要先用npm下载Echarts：

npm install echarts

引入

下载好之后在项目中引入，我推荐局部引入，Echarts在最新的版本中，需要用以下方式引入。

App.vue:

import * as echarts from "echarts"

使用

使用首先需要创建一个宽高固定的DOM容器。

App.vue:

<div id="myCharts" style="width:400px,height:300px"></div>

之后使用echarts.init初始化一个Echarts实例。

App.vue:

var myChart = echarts.init(document.getElementById("myChart"))//括号内是刚刚创建的DOM容器的id

指定图表的配置项和参数。

App.vue:

var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

使用指定的配置项和数据显示数据。

App.vue:

myChart.setOption(option);

这样，我们简单的图表就显示了。
生成出来的图表：

如果想让图表根据浏览器窗口大小实时变化尺寸，可以结合使用window.addEventListener的resize事件和Echarts的resize()方法来完成，代码如下。

App.vue：

window.addEventListener("resize",function () {
	myChart.resize();	//这里的myChart是我们刚显示出来的那个图标实例
})