vue echarts 扇形封装

先上效果图:

有这种图的引入调用就行了

import Ring from '@/components/EchartsModule/Ring.vue'components: { Ring,},data() {return {echartsList: [{ title: '平台分析', IdName: 'Platform', XTitle: '', YTitle: '' },{ title: '城市分析', IdName: 'City', XTitle: '数量', YTitle: '城市' },{ title: '商品品牌分析', IdName: 'ProductBrand', XTitle: '数量', YTitle: '商品品牌' },{ title: '店铺品牌分析', IdName: 'StoreBrand', XTitle: '数量', YTitle: '店铺品牌' },],platformList: [{ key: "pupu", doc_count: 8978, percent: "0.10%", title: "朴朴超市" },{ key: "ddmaicai", doc_count: 18377, percent: "0.21%", title: "叮咚买菜" },{ key: "missfresh", doc_count: 23800, percent: "0.27%", title: "每日优鲜" },{ key: "hema", doc_count: 27003, percent: "0.31%", title: "盒马" },{ key: "rtmart", doc_count: 99820, percent: "1.15%", title: "大润发" },{ key: "vanguard", doc_count: 168429, percent: "1.95%", title: "华润万家" },{ key: "pdj", doc_count: 463149, percent: "5.35%", title: "京东到家" },{ key: "dmall", doc_count: 743144, percent: "8.58%", title: "多点" },{ key: "ele", doc_count: 3311648, percent: "38.25%", title: "饿了么" },{ key: "meituanwm", doc_count: 3793943, percent: "43.82%", title: "美团" },],CityList: [{ key: 110000, doc_count: 996548, percent: "28.84%", title: "北京" },{ key: 310000, doc_count: 487520, percent: "14.11%", title: "上海" },{ key: 440300, doc_count: 384457, percent: "11.13%", title: "深圳" },{ key: 441900, doc_count: 283428, percent: "8.20%", title: "东莞" },{ key: 120000, doc_count: 260665, percent: "7.54%", title: "天津" },{ key: 440100, doc_count: 236849, percent: "6.86%", title: "广州" },{ key: 320100, doc_count: 211581, percent: "6.12%", title: "南京" },{ key: 330100, doc_count: 209894, percent: "6.08%", title: "杭州" },{ key: 320500, doc_count: 203020, percent: "5.88%", title: "苏州" },{ key: 420100, doc_count: 181021, percent: "5.24%", title: "武汉1回答武2汉3武汉" },]}},

        <div class="echarts-box flexColumn" v-for="item, index in echartsList" :key="index"><div class="title-box flexRow"><p class="title-name">{{ item.title }}</p><p class="flexRow" @click="OpenRegister"><span><svg class="icon" aria-hidden="true"><use xlink:href="#iconiconmore"></use></svg></span><span>全部数据</span></p></div><div class="picture" :id="item.IdName"><Ring :ListData="platformList" :id="item.IdName" v-if="index == 0"></Ring><CylindricalY v-else :ListData="CityList" :id="item.IdName" :XName="item.XTitle" :YName="item.YTitle"></CylindricalY></div></div>

组件封装代码如下:

<template><div class="Ring-box" :id="id"></div>
</template>

<script>
export default {data() {return {}},props: {ListData: {type: Array,default: () => []},id: {type: String,default: () => 'Cylindrical'}},mounted() {this.Drawing(this.id, this.ListTidy(this.ListData.reverse()))},methods: {//画圆形图Drawing(id, list) {var that = this;var colorList = ["#73a0fa","#73deb3","#e689ee","#f7c739","#eb7e65","#83d0ef","#a285d2","#ffab67","#46a9a8","#ffa8cc","#8787C0",];// var dom = this.$refs[name];var dom = document.getElementById(id);var myChart = this.$echarts.init(dom);var option;var obj = {};//判断是否有数据if (list) {list.forEach(item => {obj[item.key] = item.value;});}const downloadJson = obj;const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");canvas.width = canvas.height = 100;ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.globalAlpha = 0.08;ctx.font = "20px Microsoft Yahei";ctx.translate(50, 50);ctx.rotate(-Math.PI / 4);option = {backgroundColor: {type: "pattern",image: canvas,repeat: "repeat",},tooltip: {trigger: "item",formatter: function (e) {var { name, value } = e;value = that.NumberDealWith(value)return name + " : " + value},extraCssText: "padding:6px 10px",// position: ["center", "center"],},legend: {orient: "vertical",right: "6%",top: "center",textStyle: {color: "#303030",offset: [30, 40],},selectorLabel: {fontSize: 20,offset: [30, 40],backgroundColor: "red",},icon: "circle",itemWidth: 10,itemHeight: 10,align: "left",formatter: function (name) {var total = 0;var tarValue;for (let i = 0, l = list.length; i < l; i++) {total += list[i].value;if (list[i].key == name) {tarValue = list[i].value;}}let p = parseFloat(((tarValue / total) * 100).toFixed(2));return name + " : " + p + "%";},},series: [{type: "pie",radius: [0, "60%"],center: ["38%", "50%"],data: Object.keys(downloadJson).map(function (key) {return {name: key.replace(".js", ""),value: downloadJson[key],};}),emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},label: {// position: "aside",show: false,},itemStyle: {color: function (params) {var index = params.dataIndex;var multiple = parseInt(params.dataIndex / colorList.length);if (params.dataIndex >= colorList.length) {index = params.dataIndex - multiple * colorList.length;}return colorList[index];},},},],graphic: [{type: "image",left: "25%",top: "45%",z: 100,bounding: "raw",style: {image: "https://www.o2omind.com/img/logo_syf.png",width: 144,height: 36,opacity: 0.4,},},],};this.isLoading = false;if (option && typeof option === "object") {myChart.setOption(option);}window.addEventListener('resize', (() => {myChart.resize();}))},//数据值处理NumberDealWith(number) {if (number < 9999.99) {number = parseFloat(number.toFixed(2));} else if (number < 9999.9 * 10000) {number = parseFloat((number / 10000).toFixed(1)) + "万";} else {number = parseFloat((number / 10000 / 10000).toFixed(1)) + "亿";}return number;},//数组按需整理ListTidy(list) {var Larr = [];if (list) {list.forEach((item) => {var obj = {};obj.key = item.title;obj.value = item.doc_count;Larr.push(obj);});}return Larr;},}
}
</script>
<style>

.Ring-box{width: 100%;height: 100%;
}