其他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
}*/