Hexo-next-charts NPM

hexo-next-charts

node npm size

Add chart label for Hexo Next theme

Note: This plugin may only work properly with the NexT theme

Installation

npm install hexo-next-charts --save

Config

Add the following to your hexo config or theme config

# Add chart in your post
# For more infomation: https://echarts.apache.org/
charts:
  enable: true
  libUrl: # Custom Echarts.js CDN URL
  darkmode: true # Only valid for charts provided by plugin

Usage

Use as a tag in md files

{% chart type:  %}
<you echarts option>
{% endchart %}

e.g.

{% chart type:nromal %}
{
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
        legend: {
        data: ['销量']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
	series: [
		{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
    ]
}
{% endchart %}

Options

Name	Type	Default value	Optional value	Description
type	`String`	`"nromal"`	`"nromal""postsChart""postsCalendar""tagsChart"`	"nromal" is customer
width	`String`	`"100%"`	X	DOM width for Echarts
height	`String`	`"300px"`	X	DOM height for Echarts
theme	`String`	`"light"`	more infomation	Echarts theme
renderer	`"String"`	`"canvas"`	`"canvas""svg"`	Echarts rendererr