其他echarts：?

echarts繪制一個柱狀圖，柱狀折線圖

?echarts繪制一個餅圖

echarts繪制一個環形圖2?

效果圖：

代碼：

<template><div class="wrapper"><!-- 環形圖 --><div ref="doughnutChart" id="doughnutChart"></div></div>
</template><script>
export default {mixins: [],components: {},props: {table: {type: Object,default: {datas: {},color: [],},},hollowOut: {//是否中空type: Boolean,default: false,},},data() {return {limitLength: 7, //顯示name長度showTotalNum: false, //是否顯示總數totalNum: 100, //總數showLegend: false, //是否顯示label標簽};},created() {},mounted() {},watch: {table: {handler(newVal) {if (newVal) {// 進行數據處理操作if (newVal.limitLength) this.limitLength = newVal.limitLength;this.showLegend = newVal.showLegend;//計算總數if (newVal.showTotalNum) {this.showTotalNum = newVal.showTotalNum;this.totalNum = this.calculatePropertySum(newVal.datas, "VALUE");}const generateRandomColor = () => {var r = Math.floor(Math.random() * 201); // 隨機生成紅色通道值（0-200）var g = Math.floor(Math.random() * 255); // 隨機生成綠色通道值（0-200）var b = Math.floor(Math.random() * 201); // 隨機生成藍色通道值（0-200）let hex ="#" + componentToHex(r) + componentToHex(g) + componentToHex(b);return hex;};const componentToHex = (c) => {let hex = c.toString(16);return hex.length == 1 ? "0" + hex : hex;};newVal.datas.map((item, index) => {if (!newVal.color[index]) {let a = generateRandomColor();newVal.color.push(a);}});setTimeout(() => {this.init();});}},},},methods: {init() {let option = {tooltip: {trigger: "item",formatter: "{b} : {c} ({d}%)",},title: [{show: this.showTotalNum,text: this.totalNum,left: this.$common.adjustOffset(this.totalNum,this.table.legendLocation == "left" ? "70%" : "48.5%",this.table.legendLocation == "left" ? "50%" : "50%").adjustedLeft,top: this.$common.adjustOffset(this.totalNum,this.table.legendLocation == "left" ? "70%" : "48.5%",this.table.legendLocation == "left" ? "50%" : "50%").adjustedTop,textStyle: {color: "#333333",fontSize: "22",fontWeight: "600",textAlign: "center", // 設置標題居中對齊},},{show: this.showTotalNum,text: "總計",left: this.$common.adjustOffset("總計",this.table.legendLocation == "left" ? "70.5%" : "48.5%",this.table.legendLocation == "left" ? "37.5%" : "37.5%").adjustedLeft,top: this.$common.adjustOffset("總計",this.table.legendLocation == "left" ? "70.5%" : "46.5%",this.table.legendLocation == "left" ? "37.5%" : "37.5%").adjustedTop,textStyle: {color: "#333333",fontSize: "12",fontWeight: "500",textAlign: "center", // 設置標題居中對齊},},],//顏色注釋顯示的位置legend: {orient:this.table.legendLocation == "left" ? "vertical" : "horizontal",// right: 10,// top: "center",type: "scroll", //顏色過多可以滾動left: this.table.legendLocation == "left" ? 0 : "center",top: this.table.legendLocation == "left" ? "top" : "bottom",icon: this.table.legendIcon ? "circle" : "",formatter: (name) => {let seriesData = option.series[0].data; // 數據在series的第幾個中let total = 0;for (let i = 0; i < seriesData.length; i++) {total += seriesData[i].value;}for (let j = 0; j < seriesData.length; j++) {if (name === seriesData[j].name) {let percent = ((seriesData[j].value / total) * 100).toFixed(2);if (name.length > this.limitLength) {return (name.substring(0, this.limitLength) +"..." +" " +seriesData[j].value +" " +percent +"%");} else {return name + " " + seriesData[j].value + " " + percent + "%";}}}},},series: [{type: "pie",center:this.table.legendLocation == "left"? ["72%", "50%"]: ["50%", "46%"],radius:this.table.legendLocation == "left"? ["50%", "70%"]: ["42%", "62%"], //餅圖的半徑,第一項是內半徑，第二項是外半徑avoidLabelOverlap: false,itemStyle: {color: (params) => {let index = params.dataIndex;return this.table.color[index];},},label: {show: this.showLegend,position: "outer",formatter: "{c}",},data: this.table.datas.map((item, index) => {let obj = {label: { color: this.table.color[index] },name: item.NAME,value: item.VALUE || item.NUM,};return obj;}),},],};let chartDom = this.$refs.doughnutChart;let myChart = this.$E.init(chartDom);myChart.setOption(option);},//計算總和calculatePropertySum(arr, property) {return arr.reduce((sum, obj) => {const value = parseFloat(obj[property]);if (!isNaN(value)) {return sum + value;} else {return sum;}}, 0);},},
};
</script><style scoped lang="scss">
.wrapper {width: 100%;height: 100%;position: relative;#doughnutChart {width: 100%;height: 100%;box-sizing: border-box;position: absolute;top: 0;left: 0;}
}
</style>

調用：

<DoughnutChart:table="table":style="{ height: heightNew }"
/>
// table
/*** {"datas": [{"NAME": "南京醫科大學康達學院","VALUE": 20},{"NAME": "江蘇護理職業學院","VALUE": 25},{"NAME": "無錫太湖學院","VALUE": 16},{"NAME": "江蘇醫藥職業學院","VALUE": 47},{"NAME": "安徽省淮北衛生學校","VALUE": 5},{"NAME": "江蘇衛生健康職業學院","VALUE": 10},{"NAME": "太湖創意職業技術學院","VALUE": 2}],"color": ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc","#8364FF","#36F4D7","#FBB03C"],"showPercentage": true,"showLegend": true,"showTotalNum": true,"limitLength": 10
}*/