1

Surpriseplus

2022-12-19 9c803f20cc05395bac2d3386accfe230210c07dc

 src/components/echart23.vue

@@ -8,21 +8,21 @@
export default {
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  //方法集合
  methods: {
    gaugeChart1() {
      var legendData = ["服务访问量", "数据下载量"]; //图例
      var legendData = ['服务访问量', '数据下载量']; //图例

      var indicator = [
        { name: "管道设计部", max: 3000 },
        { name: "站场设计部", max: 3000 },
        { name: "总图室", max: 3000 },
        { name: "勘察室", max: 3000 },
        { name: "土防室", max: 3000 },
        { name: "测量室", max: 3000 },
        { name: "项目部", max: 3000 },
        { name: '管道设计部', max: 3000 },
        { name: '站场设计部', max: 3000 },
        { name: '总图室', max: 3000 },
        { name: '勘察室', max: 3000 },
        { name: '土防室', max: 3000 },
        { name: '测量室', max: 3000 },
        { name: '项目部', max: 3000 },
      ];
      var dataArr = [
        {
@@ -31,11 +31,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4A99FF",
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: "#4A99FF",
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
@@ -43,7 +43,7 @@
            normal: {
              // 单项区域填充样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
@@ -51,15 +51,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: "#4A99FF",
                    color: '#4A99FF',
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0,0,0,0)",
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: "#4A99FF",
                    color: '#4A99FF',
                  },
                ],
                globalCoord: false,
@@ -81,11 +81,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4BFFFC",
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: "#4BFFFC",
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
@@ -93,7 +93,7 @@
            normal: {
              // 单项区域填充样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
@@ -101,15 +101,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: "#4BFFFC",
                    color: '#4BFFFC',
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0,0,0,0)",
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: "#4BFFFC",
                    color: '#4BFFFC',
                  },
                ],
                globalCoord: false,
@@ -126,14 +126,14 @@
          },
        },
      ];
      var colorArr = ["#4A99FF", "#4BFFFC"]; //颜色
      var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
      let option = {
        title: {
          // show: false,
          text: "部门使用数据",
          text: '部门使用数据',
          // x: "4%",
          textStyle: {
            color: "#fff",
            color: '#fff',
            // fontSize: "22",
          },
          // subtextStyle: {
@@ -148,8 +148,8 @@

        color: colorArr,
        legend: {
          orient: "vertical",
          icon: "circle", //图例形状
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 0,
          right: 0,
@@ -158,21 +158,21 @@
          itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 12,
            color: "#00E4FF",
            color: '#00E4FF',
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              color: '#fff',
              fontSize: 12,
            },
          },
          radius: 90,
          nameGap: 12, // 图中工艺等字距离图的距离
          splitNumber: 4, // 网格线的个数
          center: ["50%", "60%"], // 图的位置
          center: ['50%', '60%'], // 图的位置

          indicator: indicator,
          splitArea: {
@@ -180,25 +180,25 @@
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: "#153269",
              color: '#153269',
            },
          },
          splitLine: {
            lineStyle: {
              color: "#113865", // 分隔线颜色
              color: '#113865', // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: "radar",
            type: 'radar',
            symbolSize: 4,
            // symbol: 'angle',
            data: dataArr,
@@ -206,15 +206,18 @@
        ],
      };

      let myChart = this.$echarts.init(document.getElementById("echart23"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart23'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },
  mounted() {
    this.gaugeChart1();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
};
</script>