var $lteChart = $('#lte-chart'),
$volteChart = $('#volte-chart'),
$imsiChart = $('#imsi-chart');
var viewHelper = {
initlteChart: function () {
var lteChart = echarts.init(document.getElementById('lte-chart'));
var color = ['#41A4F5', '#F1C40F', '#5E3FFF'];
var chartData = [{
name: '4G 附着',
value: 1152,
fail: 0,
sum:1152,
unit: '次',
},
{
name: '网页浏览',
value: 1152,
fail: 0,
sum:1152,
unit: '次'
},
{
name: 'WAP浏览',
value: 1152,
fail: 0,
sum:1152,
unit: '次'
},
];
var arrName = [],
arrValue = [],
pieSeries = [];
chartData.forEach((v, i) => {
arrName.push(v.name);
arrValue.push(v.value);
});
chartData.forEach((v, i) => {
pieSeries.push({
name: v.name,
type: 'pie',
clockwise: false,
hoverAnimation: false,
radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
center: ['45%', '50%'],
label: {
show: false
},
data: [{
value: v.value,
name: v.name
}, {
value: v.fail,
name: '',
itemStyle: {
color: "rgba(0,0,0,0.1)"
}
}]
});
});
var option = {
color: color,
tooltip: {
show: false,
position: ['80%', '0%']
},
legend: {
itemWidth: 15,
// itemHeight:15,
itemGap: 13,
orient: 'vertical',
y: '7.5%',
x: '45%',
data: arrName,
icon: 'circle',
textStyle: {
color: '#000',
fontSize: 12,
rich: {
0: {
color: '#a4c708',
fontSize: 12,
fontWeight: 600
},
1: {
color: '#65F7CB',
fontSize: 12,
fontWeight: 600
},
},
},
selectedMode: false,
formatter: function (name) {
console.log(name);
var index = 0;
var sum = 0;
var datas = chartData;
var legendData = option.legend.data;
console.log(datas);
datas.forEach(function (v, i) {
if (v.name == name) {
index = i;
sum = v.sum;
}
})
// name + ': {' + 1 + '|' + datas[index].value + '} 万 | ' + ((datas[index].value / sum) * 100).toFixed(2) + '%';
return name + ': {' + 0 + '|' + datas[index].value + '} 次 ' + ' 成功率:{' + 1 + '|' + ((datas[index].value / sum) * 100).toFixed(2) + '%' + '}';
}
},
grid: {
top: '15%',
bottom: '54%',
left: "50%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabe: {
formatter: function (param) {
var item = chartData[param];
console.log(item);
return '{name|' + item.name + '}{bd||}{value|' + item.value + '}{unit|元}{percent|' + item.percent + '}'
},
interval: 0,
inside: true,
textStyle: {
color: "#333",
fontSize: 14,
rich: {
name: {
color: '#666',
fontSize: 14,
},
bd: {
color: '#ccc',
padding: [0, 5],
fontSize: 14,
},
percent: {
color: '#333',
fontSize: 14,
},
value: {
color: '#333',
fontSize: 16,
fontWeight: 500,
padding: [0, 0, 0, 20]
},
unit: {
fontSize: 14
}
}
},
show: true
},
// data: lineYAxis
}],
xAxis: [{
show: false
}],
series: pieSeries
};
lteChart.setOption(option);
},
initVolteChart: function () {
var volteChart = echarts.init(document.getElementById('volte-chart'));
// var data = [{
// name: 'iphone 6',
// value: 77
// }, {
// name: 'iphone 6plus',
// value: 54
// }, {
// name: 'iphone 6s',
// value: 47
// }, {
// name: 'iphone 5s',
// value: 46
// }, {
// name: 'iphone 5',
// value: 38
// }, {
// name: 'OPPO',
// value: 35
// }, {
// name: '其他',
// value: 1680
// }];
// var color = ['#41A4F5', '#fad155', '#eeb303', '#5E3FFF', '#5ae7e0', '#76dd80', '#bbb8b8'];
// var option = {
// legend:{
// show:false
// },
// color: color,
// series: [{
// name: 'Top 终端型号',
// type: 'pie',
// radius: ['35%', '65%'],
// center: ['50%', '50%'],
// data: data,
// label: {
// textStyle: {
// fontSize: 13,
// },
// formatter: '{d}%'
// },
// labelLine: {
// normal: {
// show: true,
// length: 20,
// length2: 15
// },
// emphasis: {
// show: true
// }
// },
// },// 边框的设置
// {
// radius: ['26%', '27%'],
// center: ['50%', '50%'],
// type: 'pie',
// label: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// labelLine: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// animation: false,
// tooltip: {
// show: false
// },
// data: [{
// value: 1,
// itemStyle: {
// color: "rgba(0,0,0,0.1)",
// },
// }],
// },
// {
// name: '外边框',
// type: 'pie',
// clockWise: false, //顺时加载
// hoverAnimation: false, //鼠标移入变大
// center: ['50%', '50%'],
// radius: ['74%', '75%'],
// label: {
// normal: {
// show: false
// }
// },
// data: [{
// value: 1,
// itemStyle: {
// color: "rgba(0,0,0,0.1)",
// },
// }],
// },]
// }
var color = ['#41A4F5', '#F1C40F', '#5E3FFF'];
var chartData = [{
name: 'v2v',
value: 2304,
fail: 0,
sum:2304,
unit: '次',
},
{
name: '智能网',
value: 2304,
fail: 0,
sum:2304,
unit: '次'
},
{
name: '短彩信',
value: 2304,
fail: 0,
sum:2304,
unit: '次'
},
];
var arrName = [],
arrValue = [],
pieSeries = [];
chartData.forEach((v, i) => {
arrName.push(v.name);
arrValue.push(v.value);
});
chartData.forEach((v, i) => {
pieSeries.push({
name: v.name,
type: 'pie',
clockwise: false,
hoverAnimation: false,
radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
center: ['45%', '50%'],
label: {
show: false
},
data: [{
value: v.value,
name: v.name
}, {
value: v.fail,
name: '',
itemStyle: {
color: "rgba(0,0,0,0.1)"
}
}]
});
});
var option = {
color: color,
tooltip: {
show: false,
position: ['80%', '0%']
},
legend: {
itemWidth: 15,
// itemHeight:15,
itemGap: 13,
orient: 'vertical',
y: '7.5%',
x: '45%',
data: arrName,
icon: 'circle',
textStyle: {
color: '#000',
fontSize: 12,
rich: {
0: {
color: '#a4c708',
fontSize: 12,
fontWeight: 600
},
1: {
color: '#65F7CB',
fontSize: 12,
fontWeight: 600
},
},
},
selectedMode: false,
formatter: function (name) {
console.log(name);
var index = 0;
var sum = 0;
var datas = chartData;
var legendData = option.legend.data;
console.log(datas);
datas.forEach(function (v, i) {
if (v.name == name) {
index = i;
sum = v.sum;
}
})
// name + ': {' + 1 + '|' + datas[index].value + '} 万 | ' + ((datas[index].value / sum) * 100).toFixed(2) + '%';
return name + ': {' + 0 + '|' + datas[index].value + '} 次 ' + ' 成功率:{' + 1 + '|' + ((datas[index].value / sum) * 100).toFixed(2) + '%' + '}';
}
},
grid: {
top: '15%',
bottom: '54%',
left: "50%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabe: {
formatter: function (param) {
var item = chartData[param];
console.log(item);
return '{name|' + item.name + '}{bd||}{value|' + item.value + '}{unit|元}{percent|' + item.percent + '}'
},
interval: 0,
inside: true,
textStyle: {
color: "#333",
fontSize: 14,
rich: {
name: {
color: '#666',
fontSize: 14,
},
bd: {
color: '#ccc',
padding: [0, 5],
fontSize: 14,
},
percent: {
color: '#333',
fontSize: 14,
},
value: {
color: '#333',
fontSize: 16,
fontWeight: 500,
padding: [0, 0, 0, 20]
},
unit: {
fontSize: 14
}
}
},
show: true
},
// data: lineYAxis
}],
xAxis: [{
show: false
}],
series: pieSeries
};
volteChart.setOption(option);
},
initImsiChart: function () {
var imsiChart = echarts.init(document.getElementById('imsi-chart'));
// var data = ['视频', '综合', '下载', '电商', '其他'];
// var color = ['#41A4F5', '#fad155', '#5E3FFF', '#5ae7e0', '#76dd80'];
// var option = {
// // title: {
// // text: '南丁格尔玫瑰图',
// // subtext: '纯属虚构',
// // left: 'center'
// // },
// legend: {
// show:false,
// left: 'center',
// bottom: 10,
// data: data,
// textStyle: {
// color: '#fff'
// }
// },
// color: color,
// series: [
// {
// name: '',
// type: 'pie',
// radius: ['40%', '70%'],
// center: ['50%', '50%'],
// roseType: 'area',
// label: {
// normal: {
// show: true,
// formatter: "{c}个",
// textStyle: {
// fontSize: 13,
// },
// position: 'outside'
// },
// emphasis: {
// show: true
// }
// },
// labelLine: {
// normal: {
// show: true,
// length: 20,
// length2: 15
// },
// emphasis: {
// show: true
// }
// },
// data: [{
// value: 31,
// name: '视频'
// },
// {
// value: 142,
// name: '综合'
// },
// {
// value: 53,
// name: '下载'
// },
// {
// value: 26,
// name: '电商'
// },
// {
// value: 132,
// name: '其他'
// },
// ],
// },
// {
// radius: ['35%', '36%'],
// center: ['50%', '50%'],
// type: 'pie',
// label: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// labelLine: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// animation: false,
// tooltip: {
// show: false
// },
// data: [{
// value: 1,
// itemStyle: {
// color: "rgba(0,0,0,0.1)",
// },
// }],
// },
// {
// radius: ['75%', '76%'],
// center: ['50%', '50%'],
// type: 'pie',
// label: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// labelLine: {
// normal: {
// show: false
// },
// emphasis: {
// show: false
// }
// },
// animation: false,
// tooltip: {
// show: false
// },
// data: [{
// value: 1,
// itemStyle: {
// color: "rgba(0,0,0,0.1)",
// },
// }],
// },
// ]
// };
var color = ['#41A4F5', '#F1C40F', '#5E3FFF'];
var chartData = [{
name: 'ue2v',
value: 2304,
fail: 0,
sum:2304,
unit: '次',
},
{
name: 'ag2v',
value: 2304,
fail: 0,
sum:2304,
unit: '次'
},
{
name: 'ue2ag',
value: 2304,
fail: 0,
sum:2304,
unit: '次'
},
];
var arrName = [],
arrValue = [],
pieSeries = [];
chartData.forEach((v, i) => {
arrName.push(v.name);
arrValue.push(v.value);
});
chartData.forEach((v, i) => {
pieSeries.push({
name: v.name,
type: 'pie',
clockwise: false,
hoverAnimation: false,
radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
center: ['45%', '50%'],
label: {
show: false
},
data: [{
value: v.value,
name: v.name
}, {
value: v.fail,
name: '',
itemStyle: {
color: "rgba(0,0,0,0.1)"
}
}]
});
});
var option = {
color: color,
tooltip: {
show: false,
position: ['80%', '0%']
},
legend: {
itemWidth: 15,
// itemHeight:15,
itemGap: 13,
orient: 'vertical',
y: '7.5%',
x: '45%',
data: arrName,
icon: 'circle',
textStyle: {
color: '#000',
fontSize: 13,
// fontWeight: 600,
rich: {
0: {
color: '#a4c708',
fontSize: 13,
fontWeight: 600
},
1: {
color: '#65F7CB',
fontSize: 13,
fontWeight: 600
},
},
},
selectedMode: false,
formatter: function (name) {
console.log(name);
var index = 0;
var sum = 0;
var datas = chartData;
var legendData = option.legend.data;
console.log(datas);
datas.forEach(function (v, i) {
if (v.name == name) {
index = i;
sum = v.sum;
}
})
// name + ': {' + 1 + '|' + datas[index].value + '} 万 | ' + ((datas[index].value / sum) * 100).toFixed(2) + '%';
return name + ': {' + 0 + '|' + datas[index].value + '} 次 ' + ' 成功率:{' + 1 + '|' + ((datas[index].value / sum) * 100).toFixed(2) + '%' + '}';
}
},
grid: {
top: '15%',
bottom: '54%',
left: "50%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabe: {
formatter: function (param) {
var item = chartData[param];
console.log(item);
return '{name|' + item.name + '}{bd||}{value|' + item.value + '}{unit|元}{percent|' + item.percent + '}'
},
interval: 0,
inside: true,
textStyle: {
color: "#333",
fontSize: 14,
rich: {
name: {
color: '#666',
fontSize: 14,
},
bd: {
color: '#ccc',
padding: [0, 5],
fontSize: 14,
},
percent: {
color: '#333',
fontSize: 14,
},
value: {
color: '#333',
fontSize: 16,
fontWeight: 500,
padding: [0, 0, 0, 20]
},
unit: {
fontSize: 14
}
}
},
show: true
},
// data: lineYAxis
}],
xAxis: [{
show: false
}],
series: pieSeries
};
imsiChart.setOption(option);
},
init: function () {
this.initlteChart();
this.initVolteChart();
this.initImsiChart();
}
}
$(window).ready(function () {
viewHelper.init();
})
本文通过具体示例展示了如何使用ECharts配置不同类型的图表，包括4G附着、网页及WAP浏览等业务场景的数据展示，并详细介绍了图表的颜色、图例、网格、坐标轴等配置项。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
