vue-cli引入并使用echarts图表库

✨步骤一

脚手架中安装echarts依赖：npm i echarts

✨步骤二

打开echart官方网站进入快速上手页面，找到下图完整的代码，里面有详细的使用步骤：

✨步骤三

由上图可知：

引入刚刚下载的 ECharts 文件

为 ECharts 准备一个定义了宽高的 DOM

基于准备好的dom，初始化echarts实例

指定图表的配置项和数据

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

✨步骤四

根据上面的使用步骤，首先在vue文件中导入echarts，写在script标签中

<script>
// 1、导入echarts
import * as echarts from 'echarts'
export default {

};
</script>

其次准备定义了宽高的 DOM，写在template标签中

<template>
  <!-- 2、为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 800px; height: 600px">hahaha</div>
</template>

接着初始化echarts实例，指定图表的配置项和数据，使用刚指定的配置项和数据显示图表，写在mounted()生命周期函数中

  // 在挂载声明周期函数中初始化，因为此时页面上的Dom元素已经渲染完毕了
  mounted() {
    // 3、基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 4、指定图表的配置项和数据
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    // 5、使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },

✨步骤五

运行npm run serve命令打开看效果，如下图：

是不是很简单呀

vue-cli引入并使用echarts图表库

猜你喜欢