Hexo博客NexT主题使用ECharts功能

文章摘要

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。NexT主题可以通过安装hexo-tag-echarts插件，实现对数据的可视化呈现。

使用方法

1.下载ECharts插件

npm install hexo-tag-echarts --save

2.在blog/node_modules/hexo-tag-echarts文件夹中找到echarts-template.html文件，然后在第一行下面引入js代码。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

警告

上面的两个js，引入第一个即可。如果不引入，ECharts图表将不显示。

3.文章插入echarts

{% echarts 400 '85%' %}
这中间放ECharts代码
{% endecharts %}

注意

代码内容可自己编写，也可以去ECharts官网复制，然后粘贴到这里。

ECharts官网

以下是“雷达图浏览器占比变化”示例操作，其它图表操作一样：

---
title: Hexo博客NexT主题使用ECharts功能
date: 2025-03-08 15:51:06
categories:
  - NexT主题
tags:
  - 博客搭建
  - 主题配置
  - 经验技巧
---
{% echarts 400 '85%' %}
option = {
  title: {
    text: '浏览器比例',
    subtext: '假数据',
    top: 10,
    left: 10
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    bottom: 10,
    data: (function () {
      var list = [];
      for (var i = 1; i <= 28; i++) {
        list.push(i + 2000 + '');
      }
      return list;
    })()
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
  },
  radar: {
    indicator: [
      { text: '微软Edge浏览器', max: 400 },
      { text: '360浏览器', max: 400 },
      { text: '苹果Safari 浏览器', max: 400 },
      { text: '火狐浏览器', max: 400 },
      { text: '谷歌Chrome浏览器', max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 2000 + ''
          }
        ]
      });
    }
    return series;
  })()
};
{% endecharts %}

---

几种常用的ECharts图表

折线图 line

---

柱状图 bar

---

饼图 pie

---

散点图 scatter

---

K 线图 candlestick

---

雷达图 radar

---

盒须图 boxplot

1、基础盒须图

---

关系图 graph

---

树图 tree

---

旭日图 sunburst

---

平行坐标系 parallel

---

桑基图 sankey

---

漏斗图 funnel

---

仪表盘 gauge

---

主题河流图 themeRiver