# Vue中使用Echarts

* **type: 'bar'**：柱状/条形图
* **type: 'line'**：折线/面积图
* **type: 'pie'**：饼图
* **type: 'scatter'**：散点（气泡）图
* **type: 'effectScatter'**：带有涟漪特效动画的散点（气泡）
* **type: 'radar'**：雷达图
* **type: 'tree'**：树型图
* **type: 'treemap'**：树型图
* **type: 'sunburst'**：旭日图
* **type: 'boxplot'**：箱形图
* **type: 'candlestick'**：K线图
* **type: 'heatmap'**：热力图
* **type: 'map'**：地图
* **type: 'parallel'**：平行坐标系的系列
* **type: 'lines'**：线图
* **type: 'graph'**：关系图
* **type: 'sankey'**：桑基图
* **type: 'funnel'**：漏斗图
* **type: 'gauge'**：仪表盘
* **type: 'pictorialBar'**：象形柱图
* **type: 'themeRiver'**：主题河流
* **type: 'custom'**：自定义系列

## 局部引用

```javascript
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
```

在html模板中定义一个DOM元素，元素需要给定一个宽和高

```javascript
<template>
  <div id="cottonbar" style="width: 600px;height:400px;"></div>
</template>
```

Vue中需要在组件挂载到实例对象后，进行图表的渲染

```javascript
  mounted() {
    var myChart = echarts.init(document.getElementById("cottonbar"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
```

## `tooltip`参数

> 参考 <https://www.jianshu.com/p/27ad0c1c82c3>

这个是一个钩子函数，当用户点击对应的数据时，进行的操作

```javascript
//hover事件时，打印对应的数据
tooltip: {
        formatter(params) {
          console.log(params);
          ///
        },
```

## 图表组件化

组件化一个折线图

```bash
```

## 参考

1. [Vue组件重复使用echarts](https://www.cnblogs.com/wenjunwei/p/9815290.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/cottonweb/06-shu-ju-ke-shi-hua.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.