echarts-faguang

基于 echarts 4.9.0，增加柱状图发光（Glow）效果。

安装

npm install echarts-faguang

使用

完全兼容 echarts 4.9.0 API，直接替换 echarts 即可：

// 原来
import echartsfg from 'echarts-faguang'

发光效果实例代码

<template>
  <div class="echarts1" ref="echarts"></div>
</template>

<script>
  import * as echarts from "echartsfg";
  import { FontChart } from "@/utils/utils.js";

  export default {
  name: "echarts1",
  data() {
  return {
  chart: null,
  resizeObserver: null,
  resizeHandler: null,
  xAxisData: ["COD", "氨氮", "pH", "溶解氧", "SS", "总磷", "重金属"]
};
},
  mounted() {

  const viewElem = document.body;

  const resizeObserver = new ResizeObserver(() => {
  setTimeout(() => {
  this.drawEcharts();
}, 300);
});

  resizeObserver.observe(viewElem);
  this.resizeObserver = resizeObserver;
},
  beforeDestroy() {
  if (this.resizeObserver) {
  this.resizeObserver.disconnect();
  this.resizeObserver = null;
}

  if (this.resizeHandler) {
  window.removeEventListener("resize", this.resizeHandler);
  this.resizeHandler = null;
}

  if (this.chart) {
  this.chart.dispose();
  this.chart = null;
}
},
  methods: {
  drawEcharts() {
  if (this.chart) {
  this.chart.dispose();
  this.chart = null;
}

  const myChart = echarts.init(this.$refs.echarts);
  this.chart = myChart;

  if (this.resizeHandler) {
  window.removeEventListener("resize", this.resizeHandler);
}

  this.resizeHandler = function () {
  myChart.resize();
};

  window.addEventListener("resize", this.resizeHandler);

  const option = {
  color: ["rgba(0, 204, 255, 1)", "rgba(39, 120, 255, 1)"],
  grid: {
  top: FontChart(40),
  bottom: FontChart(20),
  left: FontChart(20),
  right: FontChart(20),
  containLabel: true
},
  tooltip: {
  show: true,
  formatter: function (params) {
  return params.name + "<br/>" + params.seriesName + ": " + params.value + " 次";
}
},
  xAxis: {
  type: "category",
  data: this.xAxisData,
  axisLine: {
  show: true,
  lineStyle: {
  color: "#2487dc",
  width: FontChart(1)
}
},
  axisTick: {
  show: false
},
  axisLabel: {
  color: "#fff",
  fontSize: FontChart(14),
  interval: 0
}
},
  yAxis: [
{
  type: "value",
  name: "次数",
  nameTextStyle: {
  color: "#fff",
  fontSize: FontChart(14)
},
  axisLine: {
  show: true,
  lineStyle: {
  color: "#2487dc",
  width: FontChart(1)
}
},
  axisTick: {
  show: false
},
  axisLabel: {
  color: "#fff",
  fontSize: FontChart(14)
},
  splitLine: {
  show: true,
  lineStyle: {
  color: "#2487dc",
  type: "dashed",
  width: FontChart(1)
}
}
}
  ],
  series: [
{
  name: "本月各指标超标次数",
  type: "bar",
  barWidth: FontChart(20),
  zlevel: 2,
  data: this.getdata(),
  label: {
  show: true,
  fontSize: FontChart(14),
  fontWeight: "bold",
  color: "#ffffff",
  position: "top",
  formatter: "{c}"
}
}
  ]
};

  myChart.clear();
  myChart.resize();
  myChart.setOption(option);
},

  getdata() {
  const randomValues = [];
  const data = [];

  for (let i = 0; i < this.xAxisData.length; i++) {
  randomValues.push(Math.floor(Math.random() * 20) + 1);
}

  const maxValue = Math.max(...randomValues);

  const defaultItemStyle = {
  color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
{
  offset: 0,
  color: "rgba(0, 204, 255, 1)"
},
{
  offset: 1,
  color: "rgb(11,88,116)"
}
  ])
};

  const itemStyle1 = {
  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
  offset: 0,
  color: "rgba(221,107,102,0.7)"
},
{
  offset: 0.8,
  color: "rgb(238,64,61)"
},
{
  offset: 1,
  color: "rgb(186,39,38)"
}
  ]),
  borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
  offset: 0,
  color: "rgba(221,107,102,0.7)"
},
{
  offset: 0.8,
  color: "rgb(238,64,61)"
},
{
  offset: 1,
  color: "rgb(186,39,38)"
}
  ]),
  borderWidth: FontChart(3),
  lineWidth: FontChart(2)
};

  for (let i = 0; i < randomValues.length; i++) {
  data.push({
  value: randomValues[i],
  itemStyle: randomValues[i] === maxValue ? itemStyle1 : defaultItemStyle
});
}

  return data;
},

  refreshData() {
  this.drawEcharts();
}
}
};
</script>

<style lang="scss" scoped>
  .echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>