Echarts实践之网页工资清单

计算机

发布日期: 2021-10-02

先看一下做成是效果

echarts

在网页上生成数据可视化图表，并且达到自适应各类设备屏幕大小。

独立性较强，不需要依赖，直接下载一个js脚本，对着手册按照自己的需求改好代码就可以完美实现。

实现原理

使用的是Apache ECharts图表库，里面有许多经典的示例图表，挑选自己喜欢的下下来就可以直接使用。

Apache ECharts官网：https://echarts.apache.org/zh/index.html

下载好示例图表html文件之后，按照自己的需求改动里面的配置项。

具体如何修改设置，可以按着官网提供的配置手册、使用手册进行设置。

设置自适应配置，保证嵌入到自己网页后能完美融入。
将改好的html文件嵌入到自己的网页（hexo博客等）中。

这一篇用于记录如何使用Apache ECharts做一个工资统计表页面。

1、下载脚本

光下载示例文档你可能会发现打不开。或者它使用的是网页链接脚本，你使用代码编辑器打开html代码就能看到：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/echarts.min.js"></script>

所以如果代码中的链接失效，那么你的图表也将失效。图表的生成就是基于这个脚本实现的，echarts.js是图表的基础。

所以把脚本下下来，放到自己的网页目录中就不会失效了。

进入Apache ECharts官网-文档的使用手册中，快速入门就可以找到脚本；

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2、创建页面，引入脚本

新建一个新目录（根目录），在目录下把刚刚下载好的js文件放到根目录下，再把你选好的示例文件下载下来，一起放到这个文件夹中，使用记事本或者vs code打开示例html，将脚本链接地址改成引入本地脚本，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

3、自适应

刚下下来的图表你会发现在网页上查看示例图表的时候，图表可以根据浏览器窗口大小变化图表也会跟着变化，而下载下来就没有变化了。

所以需要自己添加代码进行自适应。

详情使用手册说明：https://echarts.apache.org/handbook/zh/concepts/chart-size

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 800px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<!DOCTYPE html>
<style>
  #main,
  html,
  body {
    width: 100%; /*宽度设置成百分比，才能实现宽度自适应屏幕，不可设置为固定的px*/
  }
  #main {
    height: 800px;
  }
</style>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入根目录下的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例，使用main关联到dom容器中
        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() {
        myChart.resize();
        };

      // 指定图表的配置项和数据
      var option;

      option = {
          //图表参数，此处不展示
};

option && myChart.setOption(option);
    </script>
</body>

也就是在你下好的示例html文件中的type=”text/javascript”位置下方插入代码：

        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() {
        myChart.resize();
        };

就可以实现屏幕大小自适应了。

4、自定义图表

下好的文件图表根据官网提供的配置手册和使用手册进行自定义设置。

即设置Var option；区域的配置项

官网配置手册：https://echarts.apache.org/zh/option.html#title

例如我修改好的堆叠柱状图代码如下：

<!DOCTYPE html>
<style>
  #main,
  html,
  body {
    width:99%;
  }
  #main {
    height: 750px;
  }
</style>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入根目录下的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例，使用main关联到dom容器中
        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() {
        myChart.resize();
        };
      // 指定图表的配置项和数据
      var option;

      let data1 = ['2020年08月','2020年09月','2020年10月','2020年11月','2020年12月','2021年01月','2021年02月','2021年03月','2021年04月','2021年05月','2021年06月','2021年07月','2021年08月','2021年09月'];
      let data2 = ['3490.76','2231.76','2231','2231.76','2189','2151','2250','2180','2082','2238','4510.51','3248.01','2724.01','0'];
      let data3 = ['3589','2639','2059','2639','2569','2639','1729','2429','2639','2569','2639','2569','0','0'];
      let data4 = ['-','-','-','3500','3640','2380','882','2800','2970','2970','2970','2860','50','0'];
      let data5 = ['-','-','-','-','960','2043.31','-','1028','-','1000','545','700','0','1000'];
      let data6 = ['7079.76','4870.76','4290','8370.76','9358','9213.31','4861','8437','7691','8777','10664.51','9377.01','2774.01','1000'];

      option = {
  //背景颜色backgroundColor: '#000',
  //图表标题及副标题
  title: {
  text: '统计表',
  subtext: '滚动滚轮及鼠标拖拽可进行缩放'
  },
  //标签移动显示图例情况
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  //显示图例
  legend:{
    orient: 'horizontal',
    right: 'left'
  },
  //控制在容器中的相对位置
  grid: {
    left: '3%',
    right: '4%',
    bottom: '8%',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    name: '薪资：元',
    nameLocation: 'middle',
    nameGap: '55'
  },
  xAxis: {
    type: 'category',
    name: '月份',
    nameLocation: 'start',
    nameGap: '35',
    data: data1
  },
  series: [
    {
      name: '工资',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      data: data2
    },
    {
      name: '补贴',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      data: data3
    },
    {
      name: '绩效',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      data: data4
    },
    {
      name: '奖金',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      data: data5
    },
    {
      name: '总数',
      type: 'bar',
      barGap: '-100%',// -100%，柱子之间重合。
      label: {
        show: true,// 显示数值
        position: 'top',
        textStyle: { color: '#000' }//设置数值颜色
      },
      itemStyle: {
      normal: {
      color: 'rgba(128, 128, 128, 0)'// 设置背景颜色为透明，即隐藏颜色
      }
      },
      data: data6
    }
  ],

    //加入dataZoom组件，使数据区域缩放进行互动。
  dataZoom: [
  {
    type: 'slider',//增加下边缩放栏进行缩放
    bottom: 'auto',//离容器的距离，可以为top/right/bottom/left，选项可以为数值也可以为百分比。
    start: 0,//初始状态开始位置在0%的区域
    end: 100//初始状态结束位置在100%的区域,即打开页面即展示全部数据区域
  },
  {
    type: 'inside',//增加在坐标系中滑动拖拽对数据区域平移
    start: 0,
    end: 100
  }]
};

option && myChart.setOption(option);
    </script>
</body>

其中，示例的堆叠图无法展示所有分类的总量的数值，即总数。所以总数柱是里面做了一个透明重叠的柱子，看不到柱子，只显示柱子的总值。所以可以看到生成的图表数据只显示了总数的值，透明隐藏了总数的数值，隐藏了各个颜色板块的数值，显示了各个颜色块的值。做成的效果如上图。

如果像上述示例图表，x抽数据可能随着时间的增长数据以后会越加越多，一张图可能不放不下，可以在x轴插入缩放组件（datazoom）进行交互，达到一个自由缩放，容纳大量数据的目的，能看到整体情况的同时，也能很好的展现所有详细数据。

还做了一个组合图。即将多种多个图表做成一个图表。效果如下：

组合图

我修改好的柱状及扇形组合图代码如下：

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
// 自适应
var myChart = echarts.init(document.getElementById('container'));
window.onresize = function() {
myChart.resize();
};
var option;



const builderJson = {
  charts: {
    '2021.07': 9377.01,
    '2021.06': 10664.51,
    '2021.05': 8777,
    '2021.04': 7691,
    '2021.03': 8437,
    '2021.02': 4861,
    '2021.01': 9213.31,
    '2020.12': 9358,
    '2020.11': 8370.76,
    '2020.10': 4290,
    '2020.09': 4870.76,
    '2020.08': 7079.76
  },
};
const downloadJson = {
  '实际年入账': 92990.11,
  '公积金年入账': 8671.58,
  '养老金保险扣除': 3468.48,
  '医疗保险扣除': 1286.4,
  '其他费用扣除': 36
};
//设置水印
const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
option = {
  backgroundColor: {
    type: 'pattern',
    image: canvas,
    repeat: 'repeat'
  },
  tooltip: {},
  title: [
    {
      text: '月度实发工资统计（2020.08-2021.07）',
      subtext: '总计 92990.11',
      left: '25%',
      textAlign: 'center'
    },
    {
      text: '薪资年统计（2020.08-2021.07）',
      subtext:
        '总计 ' +
        Object.keys(downloadJson).reduce(function (all, key) {
          return all + downloadJson[key];
        }, 0),
      left: '75%',
      textAlign: 'center'
    }
  ],
  grid: [
    {
      width: '50%',//柱状图表占一半宽度
      left: 10,//居左
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'value',
      splitLine: {
        show: true
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      data: Object.keys(builderJson.charts),
      axisLabel: {
        interval: 0,
        rotate: 30//水印旋转角度
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      stack: 'chart',
      z: 3,
      label: {
        position: 'right',
        show: true
      },
      data: Object.keys(builderJson.charts).map(function (key) {
        return builderJson.charts[key];
      })
    },
    {
      type: 'bar',
      stack: 'chart',
      silent: true,
      itemStyle: {
        color: '#eee'
      },
      data: Object.keys(builderJson.charts).map(function (key) {
        return builderJson.all - builderJson.charts[key];
      })
    },
    {
      type: 'pie',
      radius: [0, '50%'],//扇形图大小
      center: ['75%', '50%'],
      data: Object.keys(downloadJson).map(function (key) {
        return {
          name: key.replace('.js', ''),
          value: downloadJson[key]
        };
      })
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

5、嵌入网页

做好之后还只是一个独立的组件，需要把它嵌入到自己的网页中。

其实很简单，只需要把两步就好了：

插入位置加入<div></div>定义宽度和id

例如修改好的示例文件html中，我的图表放在了一个叫id=”main”的div中，那么插入到新的页面为了防止重复ID，在新的页面中设置图表id为id=salarylist，则在页面插入位置增加一个：

<div id= "salarylist"></div>

需要注意，脚本中的id同样需要改了，否则图表找不到放在哪个位置，也就无法显示图表了。

var myChart = echarts.init(document.getElementById('salarylist'));//id改成一致

然后将示例文件中的高宽设置等放入页面中

<div id="container" style="width:99%;height=750px;"></div>

也可以样式和html分开，把样式设置到CSS文件中。

复制基础脚本和配置项脚本放入到页面<body>中

设置好图表插入页面图表高度和位置之后，把图表配置脚本和基础脚本放入<body>中即可。

Hexo Echarts

网页加密

设置SHA256加密密码如果本身博客中没有安装加密脚本，提前安装即可。因为hexo-matery博客中已经安装有文章加密功能（/libs/cryptojs/crypto-js.min.js），所以博客中hexo可以实现加密功能，加密使用S

2021-10-03 计算机

Hexo

免费使用腾讯云每天定时签到京东领取京豆

之前分享过用脚本结合腾讯云函数签到网易云、B站、有道云的签到脚本，不了解的可以先参考：使用腾讯云函数，实现多平台自动签到这次使用另外一个脚本同样借助腾讯云函数自动京东签到获取京豆一、脚本获取京东自动签到领取京豆仓库脚本 https:

2021-08-10 方法技能

自动化