echarts 饼型玫瑰图

最新推荐文章于 2023-12-11 00:20:52 发布

zzw_bei

最新推荐文章于 2023-12-11 00:20:52 发布

阅读量177

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/zzw_bei/article/details/131711957

版权

<template>
  <div class="pie">
    <div id="container"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      /*option: {
        legend: {
          top: "bottom",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 150],
            center: ["50%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 1,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              // { value: 26, name: "rose 6" },
              // { value: 22, name: "rose 7" },
              // { value: 18, name: "rose 8" },
            ],
          },
        ],
      },*/
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            roseType: "radius",
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    let chartDom = document.getElementById("container");
    let myChart = echarts.init(chartDom);
    this.option && myChart.setOption(this.option);
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 520px;
  padding: 10px;
  margin-top: 9px;
  color: #ffffff;
  box-sizing: border-box;
  background: #013785;
  box-shadow: 0 0 10px 3px #0465a3 inset;
}
</style>