Echarts饼图的使用

1.【template】

<div class="chart" id="hp-chartOne" :style="{width: '100px', height: '100px'}"></div>


2.【methods】

let chartThree = echarts.init($('#hp-chartThree')[0]);
chartThree.setOption({
  color: [
    "#4f9dfb",
     "#d8d8d8"
  ],
  legend: {
     x: "left",
     y: "bottom",
     data: []
  },
  calculable: true,
  series: [
  {
    name: "半径模式",
    type: "pie",
    radius: [25, 32],
    avoidLabelOverlap: false,
    center: ["50%", "50%"],
    label: {
      normal: {
        show: true,
        position: 'center'
      },
      emphasis: {
        show: true
      }
    },
    labelLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: false
      }
    },
    data: [
     {
       value: 70,
       name: "完成",
       label: {
         normal: {
           formatter: [
             "{title|{d}}{title|%}",
           ].join("\n"),
           rich: {
            title: {
             color: "#4f9dfb",
             align: "left",
             fontSize: 15,
             padding: [0, 0, 0, 0]
            }
           }
         }
       }
     },
    {
       value: 30,
       name: "",
     },
   ]
  }
 ]
 });

猜你喜欢

转载自blog.csdn.net/weixin_43837268/article/details/84817553