安装生成echarts步骤 南丁格尔玫瑰图为例

1.dom元素

<el-row class="h100 echartsTwo">
    <el-col :span="12" class="h100 " id="researchMachine">
    </el-col>
</el-row>

2. 引入

<script>
const echarts = require("echarts/lib/echarts");
</script>

3.初始化

data() {
    return {
          researchMachineChart: {}, //初始化图表
    }
}

 mounted() {
   //加载图表
    this.initEcharts();
    this.getResearchMachineChart();
//调整窗口大小
    window.onresize = () => {
      const self = this;
      return (() => {
   
        this.researchMachineChart .resize();
       
      })();
    };
}

methods: {
// 加载图表
    initEcharts() {
      // 初始化图表
      this.researchMachineChart = echarts.init(document.getElementById("researchMachine"));
    },
}

 // 告警设备1
    getResearchMachineChart() {
      let dataArr = [
        {
          value: 7,
          name: "烟感",
          label: {
            color: "#F7BD4F",
          },
        },
        {
          value: 5,
          name: "空调",
          label: {
            color: "#46A4D1",
          },
        },
        {
          value: 4,
          name: "温度",
          label: {
            color: "#29DBBB",
          },
        },
        {
          value: 2,
          name: "湿度",
          label: {
            color: "#FFD967",
          },
        },
      ];
      const options = {
        legend: {
          top: "bottom",
          show: false, //不显示图例
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              emphasis: {
                opacity: 0.7,
              },
              normal: {
                //饼状图每个的颜色
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(247, 192, 84, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(253, 141, 0, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(70, 170, 206, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(68, 122, 224, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(64, 236, 210, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(6, 192, 151, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(255, 219, 108, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(255, 190, 13, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(129, 117, 245, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(94, 94, 227, 1)", // 颜色渐变
                      },
                    ]),
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            // 是否隐藏重叠的标签
            labelLayout: {
              hideOverlap: false,
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                // formatter: "{b}个\n\n", // 标签内容格式器  \n\n可让文字居于牵引线上方，很关键
                formatter: (params) => {
                  return `{value|${params.name}} ${params.value}{value|个}\n\n`;
                },
                rich: {
                  value: {
                    color: "#fff",
                  },
                },
                padding: [0, -50],

                textStyle: {
                  fontSize: 12,
                },
              },
            },
            labelLine: {
              normal: {
                length: 6, //第一条线
                length2: 45, //第二条线
                lineStyle: {
                  width: 2, // 线条的宽度
                  //color: "#fff", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },
            data: dataArr,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.researchMachineChart.setOption(options);
      this.researchMachineChart.resize();
    },