【Echarts】封装几个酷炫（发光）图表

前言：

以下的代码基于echarts+vue2,我使用的echarts版本是5.3，但是实测更低或更高均可使用。以下组件均已封装。

1.圆环图表

效果如下所示：

思路：

基于阴影（box-shadow），修改shadowBlur的值

组件代码：

<template>
  <div id="keyleft1" style="height: 200px; width: 200px">{{ leftOne }}</div>
</template>

<script>
import 'echarts-gl'
export default {
  props: {
    leftOne: {
      type: String,
      default: "0"
    },
  },
  data () {
    return {
      numX: "0"
    }
  },
  methods: {

    init () {
      let _that = this
      var chartDom = document.getElementById("keyleft1")
      var myChart = this.$echarts.init(chartDom)
      var option
      var trafficWay = [{
        name: '',
        value: 20
      }, {
        name: '',
        value: 10
      }, {
        name: '',
        value: 30
      }]

      var data = []
      var color = ['#00ffff', '#ff0', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            label: {
              normal: {
                show: false
              }
            },
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [65, 60],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                var percent = 0
                var total = 0
                for (var i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value
                }
                percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '\n' + '\n' + '占百分比：' + percent + '%'
                } else {
                  return ''
                }
              },
            },
            labelLine: {
              length: 30,
              length2: 100,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      option = {
        backgroundColor: 'rgba(255,255,255,0)',
        color: color,
        title: {
          text: _that.numX,
          subtext: '',
          top: '46%',
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: '600'
          },
          subtextStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400'
          }
        },

        tooltip: {
          show: false
        },
        legend: {
          icon: "circle",
          orient: 'horizontal',
          // x: 'left',
          data: ['功能区域噪声', '交通噪声', '区域噪声'],
          right: 250,
          top: 100,
          align: 'right',
          textStyle: {
            color: "#fff"
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      option && myChart.setOption(option)

    }
  },
  mounted () {
    this.init()
  },
  watch: {
    leftOne (newValue, oldValue) {
      this.numX = newValue
      this.init()
    }
  },
}
</script>

<style>
</style>

2. 饼图封装

效果如下所示 ：

组件代码如下：

<template>
  <div id="left2" style="height: 280px"></div>
</template>

<script>
import 'echarts-gl'
export default {
  props: {
    leftTwoData: {
      type: String,
      default: "0"
    },
  },
  data () {
    return {
      numX: "0"
    }
  },
  methods: {
    init () {
      let _that = this
      var chartDom = document.getElementById('left2')
      var myChart = this.$echarts.init(chartDom)
      var option
      var img =
        "data:image/png;base64,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"
      let arrD = []
      for (const key in _that.numX) {
        if (Object.hasOwnProperty.call(_that.numX, key)) {
          const element = _that.numX[key]
          arrD.push({
            name: key,
            value: element,
          })
        }
      }
      var trafficWay = [
        {
          name: "火",
          value: 2,
        },
        {
          name: "飞机",
          value: 10,
        },
        {
          name: "客车",
          value: 30,
        },
        {
          name: "轮渡",
          value: 40,
        },
      ] || arrD

      var data = []
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ]
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        )
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value
                  }
                  percent = ((params.value / total) * 100).toFixed(0)
                  if (params.name !== "") {
                    return (
                      "" +
                      params.name +
                      "\n" +
                      "\n" +
                      "" +
                      percent +
                      "%"
                    )
                  } else {
                    return ""
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 10,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ]
      option = {
        backgroundColor: "rgba(255,255,255,0)",
        color: color,
        title: {
          text: "交通方式",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          right: 10,
          bottom: 0,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 10,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      }

      option && myChart.setOption(option)

    }
  },
  mounted () {
    this.init()
  },
  watch: {
    leftTwoData (newValue, oldValue) {
      this.numX = JSON.parse(newValue)
      this.init()
      console.log("leftTwoData---------", this.numX)
    }
  },
}
</script>

<style>
</style>

3.柱状图封装

效果图如下：

由于和上面的改动不算大，所以只贴核心配置项了。

组件核心配置项如下：

data = [
  {
    name: "常规",
    value: 175.17,
  },
  {
    name: "紧急",
    value: 148.35,
  },
  {
    name: "疑难",
    value: 95.36,
  },
];
xAxisData = [];
seriesData1 = [];
sum = 0;
barTopColor = ["#02c3f1", "#53e568", "#a154e9"];
barBottomColor = [
  "rgba(2,195,241,0.1)",
  "rgba(83, 229, 104, 0.1)",
  "rgba(161, 84, 233, 0.1)",
];
data.forEach((item) => {
  xAxisData.push(item.name);
  seriesData1.push(item.value);
  sum += item.value;
});
option = {
  backgroundColor: "#061326",
  title: {
    text: "多色立体圆柱",
    top: 20,
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 20,
    },
  },
  grid: {
    top: "25%",
    bottom: "15%",
  },
  xAxis: {
    data: xAxisData,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      margin: 25,
      align: "center",
      formatter: function (params, index) {
        return (
          "{a|" +
          ((seriesData1[index] / sum) * 100).toFixed(2) +
          "%}" +
          "\n" +
          "{b|" +
          params +
          "}"
        );
      },
      textStyle: {
        fontSize: 14,
        color: "#ffffff",
        rich: {
          a: {
            fontSize: 12,
            color: "#ffffff",
          },
          b: {
            height: 20,
            fontSize: 14,
            color: "#ffffff",
          },
        },
      },
    },
    interval: 0,
  },
  yAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  series: [
    {
      name: "柱顶部",
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, -5],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            return barTopColor[params.dataIndex];
          },
        },
      },
      label: {
        show: true,
        position: "top",
        fontSize: 16,
      },
      symbolPosition: "end",
      data: seriesData1,
    },
    {
      name: "柱底部",
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, 5],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            return barTopColor[params.dataIndex];
          },
        },
      },
      data: seriesData1,
    },
    {
      name: "第一圈",
      type: "pictorialBar",
      symbolSize: [47, 16],
      symbolOffset: [0, 11],
      z: 11,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: "#3ACDC5",
          borderWidth: 2,
        },
      },
      data: seriesData1,
    },
    {
      name: "第二圈",
      type: "pictorialBar",
      symbolSize: [62, 22],
      symbolOffset: [0, 17],
      z: 10,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: barTopColor[0],
          borderWidth: 2,
        },
      },
      data: seriesData1,
    },
    {
      type: "bar",
      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: barTopColor[params.dataIndex],
              },
              {
                offset: 0,
                color: barBottomColor[params.dataIndex],
              },
            ]);
          },
          opacity: 0.8,
        },
      },
      z: 16,
      silent: true,
      barWidth: 26,
      barGap: "-100%", // Make series be overlap
      data: seriesData1,
    },
  ],
};

4 折线图封装

效果如下：

配置项：

var lineColor = "#2F5384";
var labelColor = "#74BFE7";
var fontSize = "30";
option = {
  backgroundColor: "#000",
  grid: {
    left: "5%",
    right: "10%",
    top: "15%",
    bottom: "10%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "item",
    textStyle: {
      fontSize: fontSize,
    },
  },
  legend: {
    show: true,
    x: "center",
    y: "35",
    itemWidth: 45,
    itemHeight: 18,
    textStyle: {
      color: "#fff",
      fontSize: fontSize,
    },
    data: ["完成率"],
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        color: labelColor,
        fontSize: fontSize,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: lineColor,
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#195384",
        },
      },
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "(%)",
      nameTextStyle: {
        fontSize: fontSize,
        color: "#fff",
      },
      axisLabel: {
        formatter: "{value}",
        textStyle: {
          color: labelColor,
          fontSize: fontSize,
        },
      },
      axisLine: {
        lineStyle: {
          color: lineColor,
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#142B57",
        },
      },
    },
  ],
  series: [
    {
      name: "完成率",
      type: "line",
      stack: "总量",
      symbol: "circle",
      symbolSize: 10,
      smooth: true,
      itemStyle: {
        normal: {
          color: "rgba(3,240,254,1)",
          lineStyle: {
            color: "rgba(3,240,254,1)",
            width: 2,
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(3,240,254,.7)",
              },
              {
                offset: 1,
                color: "rgba(3,240,254,0)",
              },
            ]),
          },
          shadowColor: "rgba(3,240,254,1)",
          shadowBlur: 20,
        },
      },
      markPoint: {
        itemStyle: {
          normal: {
            color: "red",
          },
        },
      },
      data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
    },
  ],
};