|
|
@@ -414,78 +414,254 @@ let app = new Vue({
|
|
|
},
|
|
|
initChartR1 () {
|
|
|
let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
+ data = [
|
|
|
+ {
|
|
|
+ name: "高级-正高级",
|
|
|
+ value: 754,
|
|
|
},
|
|
|
- legend: {
|
|
|
- top: 'center',
|
|
|
- orient: 'vertical',
|
|
|
- left: '80%',
|
|
|
- textStyle: {
|
|
|
- color: '#9DB9EB',
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: "高级-副高级",
|
|
|
+ value: 611,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "中级",
|
|
|
+ value: 400,
|
|
|
},
|
|
|
+ {
|
|
|
+ name: "初级-助理级",
|
|
|
+ value: 200,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ arrName = getArrayValue(data, "name");
|
|
|
+ arrValue = getArrayValue(data, "value");
|
|
|
+ sumValue = eval(arrValue.join("+"));
|
|
|
+ objData = array2obj(data, "name");
|
|
|
+ optionData = getData(data);
|
|
|
+ function getArrayValue (array, key) {
|
|
|
+ var key = key || "value";
|
|
|
+ var res = [];
|
|
|
+ if (array) {
|
|
|
+ array.forEach(function (t) {
|
|
|
+ res.push(t[key]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+
|
|
|
+ function array2obj (array, key) {
|
|
|
+ var resObj = {};
|
|
|
+ for (var i = 0; i < array.length; i++) {
|
|
|
+ resObj[array[i][key]] = array[i];
|
|
|
+ }
|
|
|
+ return resObj;
|
|
|
+ }
|
|
|
+
|
|
|
+ function getData (data) {
|
|
|
+ var res = {
|
|
|
+ series: [],
|
|
|
+ yAxis: [],
|
|
|
+ };
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
|
|
|
+ res.series.push({
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
|
|
|
+ center: ["35%", "50%"],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: sumValue - data[i].value,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.series.push({
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ silent: true,
|
|
|
+ z: 1,
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
|
|
|
+ center: ["35%", "50%"],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 7.5,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgb(3, 31, 62)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2.5,
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
graphic: {
|
|
|
elements: [{
|
|
|
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
- // style: {
|
|
|
- // image: './images/pie-back.png', //这里添加图片地址
|
|
|
- // width: 180,
|
|
|
- // height: 180
|
|
|
- // },
|
|
|
- left: 'center',//
|
|
|
+ style: {
|
|
|
+ image: './images/loop.png', //这里添加图片地址
|
|
|
+ width: 320,
|
|
|
+ height: 320
|
|
|
+ },
|
|
|
+ left: '30',//
|
|
|
top: 'middle' //配置图片居中
|
|
|
}]
|
|
|
- // type: "text",
|
|
|
- // left: "center",
|
|
|
- // top: "45%",
|
|
|
- // style: {
|
|
|
- // text: "总人数2530",
|
|
|
- // textAlign: "center",
|
|
|
- // fill: "#fff",
|
|
|
- // fontSize: 20,
|
|
|
- // fontWeight: 700
|
|
|
- // }
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ icon: "circle",
|
|
|
+ top: "center",
|
|
|
+ left: "70%",
|
|
|
+ data: arrName,
|
|
|
+ width: 50,
|
|
|
+ padding: [0, 5],
|
|
|
+ itemGap: 25,
|
|
|
+ formatter: function (name) {
|
|
|
+ return (
|
|
|
+ "{title|" + name + "}\n{value|" + objData[name].value + "} {title|项}"
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ title: {
|
|
|
+ fontSize: 14,
|
|
|
+ lineHeight: 15,
|
|
|
+ color: "rgb(0, 178, 246)",
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ fontSize: 18,
|
|
|
+ lineHeight: 20,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ trigger: "item",
|
|
|
label: {
|
|
|
- normal: {
|
|
|
- position: 'inner'
|
|
|
- }
|
|
|
+ margin: 10, // label 距离轴的距离
|
|
|
+ color: '#FFF', // 文字的颜色
|
|
|
+ fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
|
+ fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
|
+ fontSize: '20', // 文字字体大小
|
|
|
+ lineHeight: '50', // 行高
|
|
|
},
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- radius: ['0%', '60%'],
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- },
|
|
|
- },
|
|
|
+ },
|
|
|
+ // formatter: "{a}<br>{b}:{c}({d}%)666",
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFF', // 文字的颜色
|
|
|
+ fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
|
+ fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
|
+ },
|
|
|
+ formatter: data => {
|
|
|
+ console.log(data)
|
|
|
+ // 小圆点
|
|
|
+ return `<br /><span style="display:inline-block;border-radius:50%;margin-right:10px; width:7px;height:7px;background-color:blue"></span>${data.name}:${data.percent}`
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ color: [
|
|
|
+ "rgb(24, 183, 142)",
|
|
|
+ "rgb(1, 179, 238)",
|
|
|
+ "rgb(22, 75, 205)",
|
|
|
+ "rgb(52, 52, 176)",
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: "21%",
|
|
|
+ bottom: "48%",
|
|
|
+ left: "36%",
|
|
|
+ containLabel: false,
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '教授' },
|
|
|
- { value: 735, name: '副教授' },
|
|
|
- { value: 580, name: '助教' },
|
|
|
- { value: 484, name: '讲师' },
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (colors) {
|
|
|
- var colorList = [
|
|
|
- '#00DCFF',
|
|
|
- '#116CFD',
|
|
|
- '#8BA2FF',
|
|
|
- '#FFC200'
|
|
|
- ];
|
|
|
- return colorList[colors.dataIndex];
|
|
|
- }
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
- }
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: optionData.yAxis,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
},
|
|
|
],
|
|
|
+ series: optionData.series,
|
|
|
}
|
|
|
myChart.setOption(option)
|
|
|
tools.loopShowTooltip(myChart, option, {
|