123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- export default function getData() {
- var data = [{
- value: 100,
- name: 'Chrome移动版',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 80,
- name: 'Google Chrome',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 65,
- name: '微信浏览器',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 65,
- name: '手机百度',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 60,
- name: 'UC浏览器(其他)',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 60,
- name: 'QQ手机浏览器',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 50,
- name: 'Safari移动版',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- },
- {
- value: 90,
- name: '其它',
- label: {
- color: '#fff'
- },
- itemStyle: {
- },
- emphasis: {
- itemStyle: {
- }
- }
- }
- ];
- function angleText(i, num) {
- //每个元素的角度
- var everyAngle = 360 / num;
- //文字现在所在的角度
- var currentAngle = i * everyAngle + everyAngle / 2;
- //文字所在模块的所占角度
- var currentArea = (i + 1) * everyAngle;
- if (currentAngle <= 90) {
- return -currentAngle;
- } else if (currentAngle <= 180 && currentAngle > 90) {
- return 180 - currentAngle;
- } else if (currentAngle < 270 && currentAngle > 180) {
- return 180 - currentAngle;
- } else if (currentAngle < 360 && currentAngle >= 270) {
- return 360 - currentAngle;
- }
- }
- //有值的色图的正切处理
- var data3 = [];
- data3 = JSON.parse(JSON.stringify(data));
- for (var i = 0; i < data3.length; i++) {
- if (i === 0) {
- data3[i]['label']['color'] = '#333';
- data3[i]['itemStyle']['color'] = 'rgba(25, 255, 224)';
- data3[i]['emphasis']['itemStyle']['color'] = 'rgba(25, 255, 224)';
- data3[i]['label']['rotate'] = angleText(i, data3.length);
- } else {
- data3[i]['label']['color'] = '#fff';
- data3[i]['itemStyle']['color'] = '#4169E1';
- data3[i]['emphasis']['itemStyle']['color'] = '#6A5ACD';
- data3[i]['label']['rotate'] = angleText(i, data3.length);
- }
- }
- //最外层大圈的数据
- var data1 = [];
- data1 = JSON.parse(JSON.stringify(data));
- for (var i = 0; i < data1.length; i++) {
- data1[i].value = 1;
- data1[i]['label']['rotate'] = angleText(i, data1.length);
- if (i === 0) {
- data1[i]['label']['color'] = 'rgba(25, 255, 224)';
- }
- }
- //透明饼图的数据
- var data2 = [];
- for (var i = 0; i < data.length; i++) {
- if (i === 0) {
- data2.push({
- value: 1,
- itemStyle: {
- color: 'rgba(25, 255, 224,0.05)',
- }
- });
- } else {
- data2.push({
- value: 1,
- itemStyle: {
- color: 'transparent',
- }
- });
- }
- }
- return {
- backgroundColor: 'rgba(9, 15, 33)',
- grid: {},
- polar: {},
- angleAxis: {
- show: false,
- interval: 1,
- type: 'category',
- data: [],
- },
- //中间画圈圈的坐标轴
- radiusAxis: {
- show: false
- },
- series: [{
- type: 'pie',
- radius: ["68%", "90%"],
- hoverAnimation: false,
- itemStyle: {
- color: 'transparent'
- },
- labelLine: {
- normal: {
- show: false,
- length: 30,
- length2: 55
- },
- },
- label: {
- normal: {
- position: 'inside',
- align: 'right'
- }
- },
- name: "",
- data: data1
- }, {
- stack: 'a',
- type: 'pie',
- radius: ['75%', '42%'],
- roseType: 'area',
- zlevel: 10,
- itemStyle: {
- color: '#4169E1',
- },
- emphasis: {
- itemStyle: {
- color: '#6A5ACD'
- }
- },
- label: {
- normal: {
- show: true,
- textStyle: {
- fontSize: 18,
- color: '#fff'
- },
- position: 'inside',
- rotate: 30,
- align: 'right',
- fontWeight: 'bold',
- formatter: '{c}%'
- },
- emphasis: {
- show: true
- }
- },
- animation: false,
- data: data3
- }, {
- type: 'pie',
- zlevel: 99,
- radius: ["15%", "90%"],
- selectedOffset: 0,
- animation: false,
- hoverAnimation: false,
- label: {
- normal: {
- show: false,
- }
- },
- data: data2
- }]
- }
- }
|