mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-24 05:46:03 +08:00
优化首页瓶装图
This commit is contained in:
java110
parent
228f998a2f
commit
866750abda
@ -1,5 +1,5 @@
|
||||
body {
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0px 10px;
|
||||
background: url(../images/bg_body.jpg) no-repeat;
|
||||
width: 100%;
|
||||
}
|
||||
@ -163,7 +163,7 @@ small {
|
||||
|
||||
.box5_con {
|
||||
width: 100%;
|
||||
height: 957px;
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -175,7 +175,6 @@ small {
|
||||
|
||||
.box5_con_bot {
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="box1_con" id="box1"></div>
|
||||
</div>
|
||||
<div class="box2 m-20">
|
||||
<div class="title">费用</div>
|
||||
<div class="title">报修</div>
|
||||
<div class="box2_con" id="box2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box4 m-20">
|
||||
<div class="title">投诉报修</div>
|
||||
<div class="title">费用</div>
|
||||
<div class="box4_con" id="box4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,9 +13,9 @@ option = {
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#fff',
|
||||
fontSize:12
|
||||
textStyle: {//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
@ -26,16 +26,16 @@ option = {
|
||||
left: 'left',
|
||||
data: ['已售', '空闲']
|
||||
},
|
||||
color : [ 'green', 'red' ],
|
||||
color: ['green', 'red'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '65%',
|
||||
center: ['40%', '40%'],
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{value: 335, name: '已售'},
|
||||
{value: 310, name: '空闲'}
|
||||
{ value: 90, name: '已售' },
|
||||
{ value: 10, name: '空闲' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
@ -43,6 +43,15 @@ option = {
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} : {c} '
|
||||
},
|
||||
labelLine: { show: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -3,16 +3,6 @@ var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('Class' + i);
|
||||
data1.push((Math.random() * 2).toFixed(2));
|
||||
data2.push(-Math.random().toFixed(2));
|
||||
}
|
||||
|
||||
var emphasisStyle = {
|
||||
itemStyle: {
|
||||
@ -25,74 +15,53 @@ var emphasisStyle = {
|
||||
};
|
||||
|
||||
option = {
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
data: ['已缴费', '未交费'],
|
||||
left: 10
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
name: '费用项',
|
||||
axisLine: {onZero: true},
|
||||
splitLine: {show: false},
|
||||
splitArea: {show: false}
|
||||
},
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#fff',
|
||||
fontSize:12
|
||||
},
|
||||
yAxis: {
|
||||
inverse: true,
|
||||
splitArea: {show: false}
|
||||
},
|
||||
grid: {
|
||||
left: 0
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
data: ['已处理', '未处理']
|
||||
},
|
||||
color: ['yellow','red'],
|
||||
series: [
|
||||
{
|
||||
name: '已缴费',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: '未交费',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data2
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: 90, name: '已处理'},
|
||||
{value: 10, name: '未处理'}
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b} : {c} '
|
||||
},
|
||||
labelLine: { show: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.on('brushSelected', renderBrushed);
|
||||
|
||||
function renderBrushed(params) {
|
||||
var brushed = [];
|
||||
var brushComponent = params.batch[0];
|
||||
|
||||
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
|
||||
var rawIndices = brushComponent.selected[sIdx].dataIndex;
|
||||
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
|
||||
}
|
||||
|
||||
myChart.setOption({
|
||||
title: {
|
||||
backgroundColor: '#333',
|
||||
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 100,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
@ -2,142 +2,97 @@ var dom = document.getElementById("box4");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
var data4 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
xAxisData.push('Class' + i);
|
||||
data1.push((Math.random() * 2).toFixed(2));
|
||||
data2.push(-Math.random().toFixed(2));
|
||||
}
|
||||
|
||||
var emphasisStyle = {
|
||||
itemStyle: {
|
||||
barBorderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
option = {
|
||||
backgroundColor: '',
|
||||
legend: {
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#fff',
|
||||
fontSize:12
|
||||
},
|
||||
data: ['图一','图二', '张三', '李四']
|
||||
data: ['已缴费', '未交费'],
|
||||
left: 10
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
name: '费用项',
|
||||
axisLine: {onZero: true},
|
||||
splitLine: {show: false},
|
||||
splitArea: {show: false}
|
||||
},
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#fff',
|
||||
fontSize:12
|
||||
},
|
||||
yAxis: {
|
||||
inverse: true,
|
||||
splitArea: {show: false}
|
||||
},
|
||||
grid: {
|
||||
left: 0
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
indicator: [
|
||||
{ text: '指标一' },
|
||||
{ text: '指标二' },
|
||||
{ text: '指标三' },
|
||||
{ text: '指标四' },
|
||||
{ text: '指标五' }
|
||||
],
|
||||
center: ['25%', '50%'],
|
||||
radius: 120,
|
||||
startAngle: 90,
|
||||
splitNumber: 4,
|
||||
shape: 'circle',
|
||||
name: {
|
||||
formatter:'【{value}】',
|
||||
textStyle: {
|
||||
color:'#72ACD1'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['rgba(114, 172, 209, 0.2)',
|
||||
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
|
||||
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.5)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
indicator: [
|
||||
{ text: '参数一', max: 150 },
|
||||
{ text: '参数二', max: 150 },
|
||||
{ text: '参数三', max: 150 },
|
||||
{ text: '参数四', max: 120 },
|
||||
{ text: '参数五', max: 108 },
|
||||
{ text: '参数六', max: 72 }
|
||||
],
|
||||
center: ['75%', '50%'],
|
||||
radius: 120
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '雷达图',
|
||||
type: 'radar',
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
// color: 各异,
|
||||
lineStyle: {
|
||||
width: 4
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [100, 8, 0.40, -80, 2000],
|
||||
name: '图一',
|
||||
symbol: 'rect',
|
||||
symbolSize: 5,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: [60, 5, 0.30, -100, 1500],
|
||||
name: '图二',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 255, 255, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
name: '已缴费',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: '成绩单',
|
||||
type: 'radar',
|
||||
radarIndex: 1,
|
||||
data: [
|
||||
{
|
||||
value: [120, 118, 130, 100, 99, 70],
|
||||
name: '张三',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter:function(params) {
|
||||
return params.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: [90, 113, 140, 30, 70, 60],
|
||||
name: '李四',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.9,
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
color: '#B8D3E4',
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
color: '#72ACD1',
|
||||
offset: 1
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
name: '未交费',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
emphasis: emphasisStyle,
|
||||
data: data2
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.on('brushSelected', renderBrushed);
|
||||
|
||||
function renderBrushed(params) {
|
||||
var brushed = [];
|
||||
var brushComponent = params.batch[0];
|
||||
|
||||
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
|
||||
var rawIndices = brushComponent.selected[sIdx].dataIndex;
|
||||
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
|
||||
}
|
||||
|
||||
myChart.setOption({
|
||||
title: {
|
||||
backgroundColor: '#333',
|
||||
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 100,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user