https://github.com/d-sketon/hexo-tag-echarts-new

A hexo plugin for inserting echarts in your blog.
https://github.com/d-sketon/hexo-tag-echarts-new

hexo hexo-plugin

Last synced: 3 months ago
JSON representation

A hexo plugin for inserting echarts in your blog.

• Host: GitHub
• URL: https://github.com/d-sketon/hexo-tag-echarts-new
• Owner: D-Sketon
• License: mit
• Created: 2022-12-30T11:21:23.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-31T02:35:12.000Z (about 2 years ago)
• Last Synced: 2024-04-25T22:00:22.335Z (9 months ago)
• Topics: hexo, hexo-plugin
• Language: JavaScript
• Homepage: https://d-sketon.github.io/hexo-tag-echarts-new/2022/12/30/20221230/
• Size: 17 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
hexo-tag-echarts-new

  

  

  

  


  一个在博客中插入 echarts 的插件，相比于其他同款插件增加了更多选项

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

  


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



## 安装

```bash

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

```

## 使用

```

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

echarts options

{% endecharts %}

```

### width

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

### height

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

### version

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

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



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

```

## 示例

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