hexo-tag-echarts-new demo

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

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

Install

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

Usage

{% echarts 85% 400 5.4.0 simple %}
// echarts options
{% endecharts %}

The 1st parameter represents the width of the echarts (required)
第一个参数代表图表的宽度，必填，可填数字或百分比

The 2nd parameter represents the height of the echarts (required)
第二个参数代表图表的高度，必填，可填数字或百分比

The 3rd parameter represents the version of the echarts (optional, default 5.4.1)
第三个参数代表图表的版本，选填，默认5.4.1

The 4th parameter represents 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
第四个参数代表图表js的类型，选填，默认不填，即为 echarts.min.js
可填类型 simple，代表 echarts.simple.min.js

tag 内部填入图表的 option 对象

Example

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

{% 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 %}

{% 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 %}

{% 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 %}