|
|
@@ -0,0 +1,221 @@
|
|
|
+<template>
|
|
|
+ <div id="pie_echart" ref="echart"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+let option = {
|
|
|
+ backgroundColor: "rgba(0,0,0,0)",
|
|
|
+ title: {
|
|
|
+ text: "报建数量",
|
|
|
+ x: "20%",
|
|
|
+ textStyle: {
|
|
|
+ // rich: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#fff",
|
|
|
+ fontWeight: "bold",
|
|
|
+ // align: "35%"
|
|
|
+
|
|
|
+ // a: {
|
|
|
+ // color: "#fff",
|
|
|
+ // fontSize: 42,
|
|
|
+ // align: "35%",
|
|
|
+ // },
|
|
|
+ // b: {
|
|
|
+ // fontSize: 20,
|
|
|
+ // color: "#fff",
|
|
|
+ // fontWeight: "bold",
|
|
|
+ // align: "35%",
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ x: "20%",
|
|
|
+ y: "45%",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ right: "10%",
|
|
|
+ top: "center",
|
|
|
+ data: ["城市报建", "私宅报建"],
|
|
|
+ icon: "rect", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
|
|
|
+ itemWidth: 10, // 设置宽度
|
|
|
+ itemHeight: 10, // 设置高度
|
|
|
+
|
|
|
+ itemGap: 10, // 设置间距
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ graphic: [
|
|
|
+ {
|
|
|
+ type: "group",
|
|
|
+ top: "middle",
|
|
|
+ left: "center",
|
|
|
+ id: "data",
|
|
|
+ children: [
|
|
|
+ // {
|
|
|
+ // type: "text",
|
|
|
+ // id: "current",
|
|
|
+ // top: 40,
|
|
|
+ // style: {
|
|
|
+ // text: dataAll,
|
|
|
+ // font: 'bolder 36px "Microsoft YaHei", sans-serif',
|
|
|
+ // fill: "#fff",
|
|
|
+ // textAlign: "center"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "text",
|
|
|
+ // id: "all",
|
|
|
+ // top: 80,
|
|
|
+ // left:'10%',
|
|
|
+ // style: {
|
|
|
+ // text: "报建数量",
|
|
|
+ // font: 'bolder 14px "Microsoft YaHei", sans-serif',
|
|
|
+ // fill: "#fff",
|
|
|
+ // // textAlign: "center"
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "轮次",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["45%", "80%"],
|
|
|
+ center: ["30%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: "inner", // 数值显示在内部
|
|
|
+ formatter: (params) => {
|
|
|
+ return `${params.name}` + ":" + +params.value + "个";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ length: 48,
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: "20%",
|
|
|
+ // right: "40%",
|
|
|
+ // bottom: "10%",
|
|
|
+ top: "16%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: "pie_echart",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setOptions(dataList) {
|
|
|
+ if (!this.myChart) {
|
|
|
+ // var dom = document.getElementById("pie_echart");
|
|
|
+ this.myChart = echarts.init(this.$refs.echart);
|
|
|
+ }
|
|
|
+ var color2 = [
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#FC8053",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#F2CAA4",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#5583e7",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#36dddb",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#f888b1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#fbe6ee",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // var dataAll = 0;
|
|
|
+ dataList.forEach((item, index) => {
|
|
|
+ item.itemStyle = color2[index];
|
|
|
+ // dataAll += item.value;
|
|
|
+ });
|
|
|
+ option.series[0].data = dataList;
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.setOptions();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.pie_echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
zpf