utils-＞plugin-＞echart

盘

<template>
<!-- <piechart
                :fontratio="fontRatio"
                :data="echart_agestuctureData"
                :theme="basedata.agestuctureTitle"
                :color="['#C00000', '#DF190F', '#EE1602', '#F73935', '#FB5A57']"
                :radius="['40%', '60%']"
                :center="['35%', '50%']"
                :showlegend="true"
                :showlabel="true"
                :showlabel-line="true"
                :labelcolor="'#FFF'"
                :showrose-type="false"
                :legenditemsize="[20, 20]"
                :legendposition="['center', '1', 'center', '0']"
                :legenditem-gap="12"
                :show-center-text="true"
                :centerText="'平均年龄'"
                :center-textposition="['29%', '55%']"
                :showtitle="true"
                :title="'46'"
                :titleposition="['29%', '35%']"
                :titleStyle="{
                  fontFamily: 'PingFangSC-Medium',
                  fontSize: 36 * fontRatio,
                  color: '#F7E39A',
                  letterSpacing: '1.8',
                }"
                :center-text-style="{
                  fill: '#FFF',
                  fontSize: 12 * fontRatio,
                  fontWeight: 500,
                }"
                :legendformatter-arr="legendformatterarr1"
                :legend-rich="{
                  a: {
                    fontFamily: 'PingFangSC-Medium',
                    fontSize: 12 * fontRatio,
                    color: ' #FFFFFF',
                  },

                  b: {
                    fontFamily: 'PingFangSC-Medium',
                    fontSize: 17 * fontRatio,
                    color: ' #F7E39A',
                    letterSpacing: '1px',
                  },
                }"
              ></piechart> -->
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";


export default {
  props: {
    fontratio: {
      type: Number,
      default: 1,
    },
    // 整体
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // radius 扇区圆心角展现数据的百分比，半径展现数据的大小。
    // angle 扇区圆心角展现数据的百分比，半径展现数据的大小。
    // area 所有扇区圆心角相同，仅通过半径展现数据大小。
    showroseType: {
      type: Boolean,
      default: false,
    },
    roseType: {
      type: String,
      default: "area",
    },
    animationSwitch: {
      type: Boolean,
      default: true,
    },

    radius: {
      type: Array,
      default: () => {
        return ["0%", "80%"];
      },
    },
    center: {
      type: Array,
      default: () => {
        return ["50%", "50%"];
      },
    },

    // title-------------------------------------------
    showtitle: {
      type: Boolean,
      default: false,
    },
    titleposition: {
      type: Array,
      default: () => {
        return ["center", "center"];
      },
    },
    title: {
      type: String,
      default: "",
    },
    titleStyle: {
      type: Object,
      default: () => {
        return {
          color: "#27D9C8",
          fontSize: 36,
          align: "center",
        };
      },
    },
    // 数据-------------------------------------------
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    theme: {
      type: String,
      default: "",
    },
    // 数据边上文字提示-------------------------------------------
    showlabel: {
      type: Boolean,
      default: true,
    },
    labelcolor: {
      type: String,
      default: "",
    },
    showlabelLine: {
      type: Boolean,
      default: true,
    },

    // legend----------------------------------------
    showlegend: {
      type: Boolean,
      default: true,
    },
    legendposition: {
      type: Array,
      default: () => {
        return ["center", "10", "center", "0"];
      },
    },
    // 'horizontal'
    // 'vertical'
    legendorient: {
      type: String,
      default: "vertical",
    },
    legenditemsize: {
      type: Array,
      default: () => {
        return [25, 14];
      },
    },

    
    legendRich: {
      type: Object,
      default: () => {
        return{};
      },
    },
    legendformatterArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // graphicArr-----------------------------------------
    // 是否显示中间的文字

    showCenterText: {
      type: Boolean,
      default: false,
    },
    centerText: {
      type: String,
      default: "",
    },
    centerTextposition: {
      type: Array,
      default: () => {
        return ["center", "center"];
      },
    },
    centerTextStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // tooltip-----------------------------------------
     showtooltip: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
      legendData: [],
      graphicArr: [],
    };
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.initChart();
      },
    },
  },
  mounted() {
    var _this = this;
    this.$nextTick(() => {
      this.initChart();
    });
  },

  methods: {
    initChart() {
      var _this = this;
      this.chart = echarts.init(this.$el, "macarons");
      window.addEventListener('resize', () => {
          this.chart.resize()
      })
      _this.data.forEach((e) => {
        _this.legendData.push(e.name);
      });

      if (_this.showCenterText) {
        _this.graphicArr.push({
          type: "text",
          left: _this.centerTextposition[0],
          top: _this.centerTextposition[1],
          style: {
            text: _this.centerText,
            textAlign: "center",
            ..._this.centerTextStyle,
          },
        });
      }

      this.chart.setOption({
        title: {
          show: _this.showtitle,
          text: _this.title,
          left: _this.titleposition[0],
          top: _this.titleposition[1],
          textStyle: _this.titleStyle,
        },
        tooltip: {
          show:_this.showtooltip,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
       
        color: _this.color, //设置对应块的数据
        legend: {
          show: _this.showlegend,
          top:
            _this.legendposition[0] == "0" ? "auto" : _this.legendposition[0],
          right:
            _this.legendposition[1] == "0" ? "auto" : _this.legendposition[1],
          bottom:
            _this.legendposition[2] == "0" ? "auto" : _this.legendposition[2],
          left:
            _this.legendposition[3] == "0" ? "auto" : _this.legendposition[3],
          data: _this.legendData,
          itemWidth: Number(_this.legenditemsize[0]) * _this.fontratio,
          itemHeight: Number(_this.legenditemsize[1]) * _this.fontratio,
          orient: _this.legendorient,
          formatter: function (name, ticket, callback) {
           
            if (
              _this.legendformatterArr.length == 0 ||
              JSON.stringify(_this.legendRich) == "{}"
            ) {
              return name;
            } else {
              var res = "";
              // console.log('legendformatterArr',_this.legendformatterArr,_this.data,name)
              for (var i = 0; i < _this.data.length; i++) {
                if(_this.data[i].name==name){
                  res =_this.legendformatterArr[i]
                };
              };
              return res;
            };
          },
          textStyle: {
            rich: _this.legendRich,
          },
        },
        graphic: _this.graphicArr,
        series: [
          {
            label: {
              show: _this.showlabel,
              color: _this.labelcolor,
            },
            labelLine: {
              show: _this.showlabelLine,
            },
            name: _this.theme,
            type: "pie",
            roseType: _this.showroseType,

            radius: _this.radius,
            center: _this.center,
            data: _this.data,
            hoverAnimation: _this.animationSwitch,
            animationEasing: "cubicInOut",
            animationDuration: 2600,
          },
        ],
      });
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

line

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";


export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Array,
      required: true,
      default: []
    },
   
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    },
   
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      window.addEventListener('resize', () => {
          this.chart.resize()
      })
      this.setOptions();
    },
    setOptions() {
      var data = this.chartData;
      var xList = [],
        yList = [];
      if (this.chartData.length > 0) {
        this.chartData.forEach((val, index) => {
          xList.push(Number(val.hour) + "点");
          yList.push(val.alarmHandleNum);
        });
      }

      this.chart.setOption({
        color: ["#87AED8"],
        grid: {
          top: 10,
          left: 20,
          right: 0,
          bottom: "6%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: xList,
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#5892E4",
              width: 2 //这里是为了突出显示加上的
            }
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 14
            },
            rich: {
              value: {
                lineHeight: 100
                // align: "center",
              }
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: { show: false }, //轴线不显示
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#5892E4"]
            }
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 14
            },
            rich: {
              value: {
                lineHeight: 100
              }
            }
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        series: [
          {
            name: "今日累计数量",
            smooth: false,
            type: "line",
            stack: "总量",
            data: yList
          }
        ]
      });
      this.chart.height=300;
      this.chart.width=300;
    }
  }
};
</script>

水平线

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";


export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    chartData: {
      type: Array,

      required: true,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.initChart();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var _this = this;
      this.chart = echarts.init(this.$el, "macarons");
      window.addEventListener('resize', () => {
          this.chart.resize()
      })
      var nameList = [],
        valueList1 = [],
        valueList2 = [];
      if (_this.chartData.length > 0) {
        _this.chartData.forEach((v, i) => {
          nameList.push(v.key + "");
          valueList1.push(v.authNum);
          valueList2.push(v.roomNum - v.authNum);
        });
      }
      this.chart.setOption({
        color: ["#FFB438", "#1AA0FF"],
        grid: {
          x: 40,
          y: 0,
          x2: 0,
          y2: 0,
          borderWidth: 1
        },
       
        yAxis: [
          {
            axisTick: { show: false },
            type: "category",
            inverse: true,
            data: nameList,
            axisLine: { show: false }, //轴线不显示
            splitLine: { show: false },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 15
              },
              rich: {
                value: {
                  lineHeight: 100
                  // align: "center",
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            
            var resultStr=''
            for (var i = 0; i < params.length; i++) {
          
              if (i == 0) {
                resultStr+= params[i].seriesName + ":" + params[i].data+'<br>';
              } else {
                
               resultStr+=
                  params[i].seriesName +
                  ":" +
                  (params[0].data + params[i].data)
                ;
              }
            }
            return resultStr
          }
        },
        series: [
          {
            stack: "总量",
            name: "授权",
            type: "bar",
            data: valueList1,
            label: {
              // show: true,
              // position: "insideRight",
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                formatter: "{b}\n{c}（个）",
                
              }
            }
          },
          {
            stack: "总量",
            name: "总户数",
            type: "bar",
            // label: seriesLabel,
            data: valueList2,
            label: {
              show: false
              // position: "insideRight",
            }
          }
        ],
        // 无效
         title: {
          show: false,
          text: "漏洞授权TOP5",
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#ffffff",
            fontSize: 24
          }
        },
        legend: {
          show: false,
          itemGap: 45,
          x: "right", //可设定图例在左、右、居中
          y: "top",
          itemWidth: 22,
          itemHeight: 22,
          data: ["授权", "总户数"],
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#ffffff",
            fontSize: 12
          }
        },

        xAxis: {
          show: false,
          type: "value",
          axisTick: { show: false },
          axisLabel: {
            formatter: "{value}"
          }
        },
      });
    }
  }
};
</script>

垂直线

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";

const animationDuration = 6000;

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    chartData: {
      type: Array,

      required: true,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      window.addEventListener('resize', () => {
          this.chart.resize()
      })
      this.setOptions();
    },
    setOptions() {
      var data = this.chartData;
      var xList = [],
        yList = [];
      if (this.chartData.length > 0) {
        this.chartData.forEach((val, index) => {
          xList.push(Number(val.month)+'月');
          yList.push(val.alarmHandleNum);
        });
      }
      this.chart.setOption({
        backgroundColor: "", //设置无背景色
        title: {
          show:false,
          x: "center", 
          y: "top",
          text: "近6月告警处置",
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#ffffff",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top:10,
          left: 10,
          right: 10,
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            
            nameTextStyle: {
              color: "#ffffff",
              fontSize: 14
            },
            type: "category",
            data: xList,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 14
              },
              rich: {
                value: {
                  lineHeight: 100
                  // align: "center",
                }
              }
            },
            axisTick: { show: false }
          }
        ],

        yAxis: [
          {
            // nameLocation,
            nameLocation: "end",
         

            nameTextStyle: {
              color: "#ffffff",
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            axisTick: { show: false },
            axisLine: { show: false }, //轴线不显示
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#17A3FF", "#52F2FA"]
              }
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: 14
              }
            }
          }
        ],

        series: [
          {
            barWidth: 18,
            name: "次数",
            type: "bar",
            stack: "vistors",

            data: yList,
            animationDuration,
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#17A3FF",
                    "#52F2FA",
                    "#17A3FF",
                    "#52F2FA",
                    "#17A3FF",
                    "#52F2FA"
                  ];
                  return colorList[params.dataIndex];
                }
              }
              // 5892E4
            }
          }
        ]
      });
    }
  }
};
</script>