计软杂谈

一个在博客中插入 echarts 的插件，相比于其他同款插件增加了更多选项
A hexo plugin for inserting echarts in your blog, customised js version and type.

警告：请尽量在同一个页面中使用同一个版本的同一个类型的 echarts js，否则可能会有意想不到的错误发生！
WARNING: Please try to use the same version of the same type of echarts js on the same page, otherwise unexpected errors may occur!

Github
Github
https://github.com/D-Sketon/hexo-tag-echarts-new

Install

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

Usage

1
2
3
{% echarts width height [version] [type] [...other args] %}
echarts options
{% endecharts %}

width

图表的宽度，必填，可填数字或百分比
The width of the echarts (required)

height

图表的高度，必填，可填数字或百分比
The height of the echarts (required)

version

图表的版本，选填，默认 5.5.1
The version of the echarts (optional, default 5.5.1)

type

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

The type of the echarts js (optional, not filled by default, representing echarts.min.js)
can be filled with types simple, representing echarts.simple.min.js

other args

其他参数将会附加在插入的 script 标签上。例如，你可以插入 data-pjax 等属性
Other arguments will be attached to the inserted script tag. For example, you can insert data-pjax and other attributes

echarts options

tag 内部填入图表的 option 对象
Fill in the option object of the chart inside the tag,

Example

以下例子均来源于 echarts 官网示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% echarts 85% 400 %}
{
  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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{% echarts 500 400 simple %}
{
  legend: {
    data: ['Altitude (km) vs. temperature (°C)']
  },
  tooltip: {
    trigger: 'axis',
    formatter: 'Temperature : {b}km : {c}°C'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  yAxis: {
    type: 'category',
    axisLine: { onZero: false },
    axisLabel: {
      formatter: '{value} km'
    },
    boundaryGap: false,
    data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
  },
  series: [
    {
      name: 'Altitude (km) vs. temperature (°C)',
      type: 'line',
      symbolSize: 10,
      symbol: 'circle',
      smooth: true,
      lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
      data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
    }
  ]
}
{% endecharts %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{% echarts 90% 400 %}
{
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
}
{% endecharts %}
backtop