hexo-tag-echarts-new

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

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

简体中文 | English

安装

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 对象

例如：

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

将会生成类似于:

<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