jn_sis_zhfx/src/views/HealthControl/zhpj/healthpieChart.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import * as echarts from "echarts";
import util from "@/helper/util.js";

export default {
  props: {
    width: {
      type: String,
      default: "28.519vh",
    },
    height: {
      type: String,
      default: "28.519vh",
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$el.style.width = this.width;
    this.$el.style.height = this.height;
    this.chart = echarts.init(this.$el);
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        angleAxis: {
          type: "category",
          data: ["北", "东北", "东", "东南", "南", "西南", "西", "西北"],
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 2,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],

        radiusAxis: {},
        polar: {},
        tooltip: {
          trigger: "item",
          // formatter: '555'
        },
        series: [
          {
            type: "bar",
            data: [2, 0.5, 1, 1.2, 1.6, 2, 1, 0.5],
            coordinateSystem: "polar",
            // name: "[0.0:2.5]",
            stack: "a",
            emphasis: {
              focus: "series",
            },
          },
        ],
        textStyle: {
          color: "#9a60b4",
          fontSize: "19",
          fontWeight: 800,
        },
        // legend: {
        //   show: false,
        //   data: [
        //     "[0.0:2.5]",
        //     "[2.5:5.0]",
        //     "[5.0:7.5]",
        //     "[7.5:10.0]",
        //     "[10.0:12.5]",
        //     "[12.5:15.0]",
        //     "[15.0:17.5]",
        //     "[17.5:20.0]",
        //   ],
        //   // orient: "vertical", //设置显示顺序，默认水平（水平，竖直）
        //   // x:0, //水平位置
        //   // y: 70, //竖直位置
        //   itemGap: 5, // 设置间距
        //   textStyle: {
        //     color: "#fff",
        //   }, //文本样式
        // },
      };
      this.chart.setOption(option); // 渲染页面
    },
  },
};
</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>