vue 中安装并使用echart

vue,安装,使用,echart · 浏览次数 : 474

小编点评

**安装 echart 依赖** 1. 使用 npm 命令安装 echart：``` npm install echarts --save ``` **在页面中使用 echart** 1. 在 Vue 页面中定义绑定的标签元素：```

``` 2. 引入 echart 依赖： ```javascript // 引入基本模板 import echarts from "echarts/lib/echarts"; // 引入环形图 import "echarts/lib/chart/bar"; // 引入折现图 import "echarts/lib/chart/line"; // 引入提示框组件、标题组件、工具箱组件 import "echarts/lib/component/tooltip"; import "echarts/lib/component/title"; import "echarts/lib/component/legend"; ``` 3. 在 method 中定义加载的参数： ```javascript methods: { initCharts() { let myChart = echarts.init(this.$refs.chart); // 绘制图表 myChart.setOption({ xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: { type: "value" }, series: [{ data: [1500, 2300, 2240, 2180, 1350, 1470, 2600], type: "line" }] }); } } ``` 4. 在 `mounted` 函数中定义加载 `initCharts` 方法： ```javascript mounted() { this.initCharts(); } ``` **注意** - 不要放在 `create` 中去加载图表，否则可能出现 `dom` 元素尚未加载结束就进行图表挂在异常。 - 确保 `$refs.chart` 的值正确绑定到实际元素上。

正文

本文为博主原创，转载请注明出处：

1.安装echart 依赖：

　　安装命令：

npm install echarts --save

　　在vscode 的终端窗口进行执行，如图所示：

　　执行完之后，查看项目中的echart 版本依赖是否添加成功：

　　package-lock.json 中有具体的echart 依赖信息：

　　package.json 的 dependencies 中有 echart 的依赖

2. 在页面中使用echart：

　　在vue 页面中定义绑定的标签元素

<div style="width:1200px;height:300px" ref="chart"></div>

　　引入echart 依赖：

// 引入基本模板
import echarts from “echarts/lib/echarts”;

//引入环形图
import “echarts/lib/chart/bar”;
//引入折现图
import “echarts/lib/chart/line”;
// 引入提示框组件、标题组件、工具箱组件。
import “echarts/lib/component/tooltip”;
import “echarts/lib/component/title”;
import “echarts/lib/component/legend”;

　　在method 中定义加载的参数：

methods: {

   initCharts () {
        let myChart = echarts.init(this.$refs.chart);
        // 绘制图表
        myChart.setOption({
          //此处插入echart实例中的option内部内容
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [1500, 2300, 2240, 2180, 1350, 1470, 2600],
            type: 'line'
          }
        ]

          });
      },
}

3. 在 mounted 函数中定义加载

 mounted() {
    this.initCharts();
  },

　　需要注意的是，不可放在 create 中去加载图表，放在create 中会出现dom元素还没有加载结束就进行图表挂在，会报 dom 不存在的异常