<div align = center>
  <h1>hexo-tag-echarts-new</h1>
  <img alt="NPM License" src="https://img.shields.io/npm/l/hexo-tag-echarts-new">
  <img alt="NPM Version" src="https://img.shields.io/npm/v/hexo-tag-echarts-new">
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dt/hexo-tag-echarts-new">
  <p align="center">
  一个在博客中插入 echarts 的插件，相比于其他同款插件增加了更多选项

**警告：请尽量在同一个页面中使用同一个版本的同一个类型的 echarts js，否则可能会有意想不到的错误发生！**

  </p>

简体中文 | [English](https://github.com/D-Sketon/hexo-tag-echarts-new/blob/main/README.en.md)

</div>

## 安装

```bash
npm install hexo-tag-echarts-new --save
```

## 使用

```
{% echarts width height [version] [type] [...other args] %}
echarts options
{% endecharts %}
```

### width

图表的宽度，必填，可填数字或百分比

### height

图表的高度，必填，可填数字或百分比

### version

图表的版本，选填，默认 5.6.0

### type

图表 js 的类型，选填，默认不填，即为 `echarts.min.js`  
可填类型 `simple`，代表 `echarts.simple.min.js`

### 其他参数

其他参数将会附加在插入的 `script` 标签上。例如，你可以插入 `data-pjax` 等属性

### echarts options

`tag` 内部填入图表的 `option` 对象

例如：

```text
{% echarts 85% 400 5.4.0 simple data-pjax %}
{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
{% endecharts %}
```

将会生成类似于:

```html
<div id="echarts2562" style="width: 85%;height:400px;margin: 0 auto"></div>
<script
  src="https://unpkg.com/echarts@5.4.0/dist/echarts.simple.min.js"
  data-pjax
></script>
<script data-pjax>
  var eChart2562 = echarts.init(document.getElementById("echarts2562"));
  var option2562 = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  eChart2562.setOption(option2562);
  if (window.eChart2562ResizeHandler) {
    window.removeEventListener("resize", eChart2562ResizeHandler);
  }
  var eCharttestResizeHandler = function() {
    eChart2562.resize();
  };
  window.addEventListener("resize", eChart2562ResizeHandler);
</script>
```

## 示例

[Demo](https://d-sketon.github.io/20241006/hexo-echarts-demo/)
