因为自己遇到了所以分享下解决办法,也记一下笔记;

第一步:

1.这里首先引入Echarts组件

<template>
  <div>
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="220px"
      width="360px"
    ></Echart>
  </div>
</template>

第二步:

1.这里定义两个对象 options 和 param;

2.options:Echarts配置所需的属性

3.param:用来监听的参数

export default {
  data () {
    return {
      options: {},
      param : {}
    };
  }}

第三步:axios请求

1.就是通过axios请求给param赋值

 httpAction('/yb/bigscreen/top5','','post').then((res)=>{
        let records = res.result;
        if(res.code == 200 && records.length > 0){
          let tmpParam = {};
          records.forEach((e,i) => {
            if(i == 0){
              tmpParam.arr1 = [parseFloat(e.cjfy),parseFloat(e.cjwgje),parseFloat(e.cjzyr),parseFloat(e.wgfyzb),parseFloat(e.wgrczb)]
              //this.param.arr1 = [1000,2000,3000,400,5000];
            } else {
              let arr2 = [parseFloat(e.cjfy),parseFloat(e.cjwgje),parseFloat(e.cjzyr),parseFloat(e.wgfyzb),parseFloat(e.wgrczb)];
              tmpParam.max = Math.max(...tmpParam.arr1,...arr2);
              tmpParam.arr2 = arr2;
            }
          })
          this.param = tmpParam;
          console.log(tmpParam)
        }

      });

第四步:watch函数举例 

1.这里是通过对param进行监听,将newData(param通过axios更新后的值)里面的值拿出来赋值给echarts图表所需的配置数据;

2.Echarts图表需要渲染的配置数据(this.options)写在watch监听里面;

watch: {
    param: {
        //newData:param更新的值,oldDate:param之前的值
      handler (newData, oldData) {
        var legendData = ["xxx", "xxx"]; //图例
        var indicator = [
          {
            text: "次均xxxx",
            max: newData.max,
          },
          {
            text: "次均xxxx",
            max: newData.max,
          },
          {
            text: "次均xxxx",
            max: newData.max,
          },
          {
            text: "违规xxxx",
            max: newData.max,
            //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
          },
          {
            text: "违规xxxx",
            max: newData.max,
          },
        ];
        var dataArr = [
          {
            value: newData.arr1,
            name: legendData[0],
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#4A99FF",
                  // shadowColor: '#4A99FF',
                  // shadowBlur: 10,
                },
                shadowColor: "#4A99FF",
                shadowBlur: 10,
              },
            },
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4A99FF",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0,0,0,0)",
                    },
                    {
                      offset: 1,
                      color: "#4A99FF",
                    },
                  ],
                  globalCoord: false,
                },
                opacity: 1, // 区域透明度
              },
            },
          },
          {
            value: newData.arr2,
            name: legendData[1],
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#4BFFFC",
                  // shadowColor: '#4BFFFC',
                  // shadowBlur: 10,
                },
                shadowColor: "#4BFFFC",
                shadowBlur: 10,
              },
            },
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4BFFFC",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0,0,0,0)",
                    },
                    {
                      offset: 1,
                      color: "#4BFFFC",
                    },
                  ],
                  globalCoord: false,
                },
                opacity: 1, // 区域透明度
              },
            },
          },
        ];
        var colorArr = ["#4A99FF", "#4BFFFC"]; //颜色
        this.options = {
          color: colorArr,
          legend: {
            orient: "vertical",
            icon: "circle", //图例形状
            data: legendData,
            bottom: 0,
            right: 20,
            itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
            textStyle: {
              fontSize: 10,
              color: "#00E4FF",
            },
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: "#fff",
                fontSize: 11,
              },
            },
            indicator: indicator,
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域,默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              },
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#153269",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#113865", // 分隔线颜色
                width: 1, // 分隔线线宽
              },
            },
          },
          series: [
            {
              type: "radar",
              symbolSize: 8,
              // symbol: 'angle',
              data: dataArr,
            },
          ],
        };



      },
      immediate: true,
      deep: true
    }
  }

第五步:OVER 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐