|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div id="pie_echart" ref="echart"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// let colors = [
|
|
|
+// ["#FC8053", "#F2CAA4"],
|
|
|
+// ["#5583e7", "#36dddb"],
|
|
|
+// ["#f888b1", "#fbe6ee"],
|
|
|
+// ];
|
|
|
+let colors = [
|
|
|
+ "#62ADED",
|
|
|
+ "#DFE15A",
|
|
|
+ "#6EDC8D",
|
|
|
+ "#00A42E",
|
|
|
+ "#F9B447",
|
|
|
+ "#7F4FE5",
|
|
|
+ "#FF6969",
|
|
|
+ "#27CED9",
|
|
|
+ "#DF56F5",
|
|
|
+ "#DCFFAF",
|
|
|
+];
|
|
|
+let option = {
|
|
|
+ backgroundColor: "rgba(0,0,0,0)",
|
|
|
+ label: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ show: false,
|
|
|
+ text: "暂无数据",
|
|
|
+ x: "39%",
|
|
|
+ y: "28%",
|
|
|
+ textStyle: {
|
|
|
+ // rich: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#fff",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // type: "scroll",
|
|
|
+ orient: "vertical",
|
|
|
+ right: "2%",
|
|
|
+ top: "center",
|
|
|
+ data: [],
|
|
|
+ icon: "rect", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
|
|
|
+ itemWidth: 12, // 设置宽度
|
|
|
+ itemHeight: 12, // 设置高度
|
|
|
+
|
|
|
+ itemGap: 10, // 设置间距
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: "#fff", //#BCD3E5
|
|
|
+ fontSize: 14,
|
|
|
+ width: 60,
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ color: "#64DAFF",
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [5, 4],
|
|
|
+ align: "center",
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ unit: {
|
|
|
+ color: "#fff", //#BCD3E5
|
|
|
+ fontSize: 14,
|
|
|
+ width: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: ["20%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: "inner", // 数值显示在内部
|
|
|
+ formatter: (params) => {
|
|
|
+ return `${params.name} : ${params.value} "km²`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ length: 48,
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ // right: "40%",
|
|
|
+ // bottom: "10%",
|
|
|
+ top: "16%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: "pie_echart",
|
|
|
+ props: {
|
|
|
+ unit: {
|
|
|
+ type: String,
|
|
|
+ default: "km²", //"平方千米",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setOptions(cartData) {
|
|
|
+ let _this = this;
|
|
|
+ if (!this.myChart) {
|
|
|
+ // var dom = document.getElementById("pie_echart");
|
|
|
+ this.myChart = echarts.init(this.$refs.echart);
|
|
|
+ }
|
|
|
+
|
|
|
+ cartData.data.forEach((item, index) => {
|
|
|
+ option.legend.data.push(item.name);
|
|
|
+ item.itemStyle = {
|
|
|
+ color: colors[index % colors.length],
|
|
|
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: colors[index % colors.length],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: colors[index % colors.length],
|
|
|
+ // },
|
|
|
+ // ]),
|
|
|
+ };
|
|
|
+ // dataAll += item.value;
|
|
|
+ });
|
|
|
+ if (cartData.type == "vertical") {
|
|
|
+ option.series[0].radius = ["27%", "42%"];
|
|
|
+ option.series[0].center = ["50%", "30%"];
|
|
|
+ option.legend.height = "40%";
|
|
|
+ option.legend.top = "60%";
|
|
|
+ option.legend.orient = "horizontal";
|
|
|
+ } else {
|
|
|
+ option.series[0].radius = ["45%", "70%"];
|
|
|
+ option.series[0].center = ["25%", "50%"];
|
|
|
+ option.legend.height = "100%";
|
|
|
+ option.legend.top = "center";
|
|
|
+ option.legend.orient = "vertical";
|
|
|
+ }
|
|
|
+ option.legend.right = cartData.legend_right || "2%";
|
|
|
+ let max = cartData.max || 4;
|
|
|
+ option.legend.textStyle.rich.name.width = max * 15;
|
|
|
+ option.legend.formatter = function (name) {
|
|
|
+ const sItem = cartData.data.find((item) =>
|
|
|
+ `${item.name}`.includes(`${name}`)
|
|
|
+ );
|
|
|
+ if (sItem) {
|
|
|
+ let aname = name.length > max ? name.substr(0, max) + "..." : name;
|
|
|
+ return `{name|${aname}} {value|${sItem.value}} {unit|${_this.$props.unit}} `;
|
|
|
+ // return name + 'sItem.value';
|
|
|
+ } else {
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ option.series[0].data = cartData.data;
|
|
|
+ option.series[0].label.normal.formatter = function (params) {
|
|
|
+ return `${params.name} : ${params.value} ${_this.$props.unit}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ if (cartData.data.length <= 0) {
|
|
|
+ option.title.show = true;
|
|
|
+ } else {
|
|
|
+ option.title.show = false;
|
|
|
+
|
|
|
+ }
|
|
|
+ this.myChart.resize();
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ // if (cartData.isclick) {
|
|
|
+ // legendselectchanged
|
|
|
+ this.myChart.on("legendselectchanged", function (params) {
|
|
|
+ let iseyes = params.selected[params.name];
|
|
|
+ _this.$emit("echartClick", params.name, { iseyes });
|
|
|
+ });
|
|
|
+ this.myChart.on("click", function (params) {
|
|
|
+ _this.$emit("echartClick", params.name, { color: params.color });
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.setOptions();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.pie_echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
