<template> <div class="chart" :id="id"></div> </template> <script> import util from "@/helper/util.js"; import partten from "@/helper/partten.js"; import * as echarts from "echarts"; export default { name: "dsah-pie", componentName: "dsah-pie", props: { width: { type: String, default: "100%", }, height: { type: String, default: "200px", }, // 内部饼图数据 innerData: { type: Array, default: () => [ { value: 700, unit: "个", name: "行业大类1", }, { value: 679, unit: "个", name: "行业大类2", }, { value: 1548, unit: "个", name: "行业大类3", }, ], }, // 外部饼图数据 outerData: { type: Array, default: () => [ { value: 310, unit: "个", name: "邮件营销", }, { value: 234, unit: "个", name: "联盟广告", }, { value: 335, unit: "个", name: "视频广告", }, { value: 548, unit: "个", name: "百度", }, { value: 351, unit: "个", name: "谷歌", }, { value: 247, unit: "个", name: "必应", }, ], }, // 颜色 color: { type: String, default: "green", }, }, data() { return { id: "", chart: null, }; }, computed: {}, methods: { initChart() { let legend1 = this.innerData.map((v) => v.name); let legend2 = this.outerData.map((v) => v.name); let legendData = [...legend1, ...legend2]; let option = { tooltip: { trigger: "item", backgroundColor: "rgba(0,0,0,0.3)", textStyle: { color: "#fff", fontSize: util.vh(16), }, }, grid: { top: 32, left: 60, right: 40, bottom: 24, }, legend: { orient: "vertical", //纵向图例 right: "16", bottom: 32, itemWidth: 15, itemHeight: 15, //icon: 'circle', itemGap: 12, //图例item间距 textStyle: { color: "#fff", fontSize: util.vh(12), }, data: legend1, }, series: [ { name: "访问来源", type: "pie", center: ["40%", "50%"], radius: [0, "35%"], itemStyle: { normal: {}, }, label: { normal: { show: false, }, }, labelLine: { normal: { show: false, }, }, data: this.innerData, }, { name: "访问来源", type: "pie", center: ["40%", "50%"], radius: ["55%", "95%"], data: this.outerData, labelLine: { normal: { // length: 40, // length2: 120, lineStyle: { color: "#fff", fontSize: util.vh(14), }, }, }, itemStyle: { normal: { borderWidth: util.vh(12), borderColor: "#071812", }, }, label: { normal: { formatter: (params) => { return "{percent|" + params.percent.toFixed(2) + "%}"; }, padding: [0, 0, 0, 0], rich: { color: "#fff", percent: { fontSize: util.vh(12), color: "#fff", }, }, }, }, }, ], }; this.chart.setOption(option); } }, 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.initChart(); }, updated() { this.initChart(); }, }; </script> <style lang="less" scoped> .chart { width: 100%; height: 100%; display: block; margin: auto; } </style>