> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/cottonweb/06-shu-ju-ke-shi-hua.md).

# 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)