Commit d112c835 authored by zhengjiangtao's avatar zhengjiangtao

右侧模块样式调整

parent 69a32f24
...@@ -82,9 +82,9 @@ ...@@ -82,9 +82,9 @@
.statistical-right{ .statistical-right{
height: 100%; height: 100%;
width: 353px; width: 355px;
float: right; float: right;
padding-top: 65px; padding-top: 40px;
.echart-week { .echart-week {
width: 321px !important; width: 321px !important;
...@@ -92,6 +92,7 @@ ...@@ -92,6 +92,7 @@
background-image: url('/src/assets/panoramic/statistical/main_bg_line_bg.png') !important; background-image: url('/src/assets/panoramic/statistical/main_bg_line_bg.png') !important;
background-repeat:no-repeat!important; background-repeat:no-repeat!important;
background-position:31px 47px!important; background-position:31px 47px!important;
left: 24px
} }
...@@ -102,6 +103,7 @@ ...@@ -102,6 +103,7 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
margin-top: -4px;
} }
......
...@@ -17,7 +17,7 @@ const option = { ...@@ -17,7 +17,7 @@ const option = {
textStyle: { textStyle: {
color: 'rgba(255,255,255,1)', color: 'rgba(255,255,255,1)',
fontSize: '14', fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN" fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
}, },
...@@ -37,7 +37,7 @@ const option = { ...@@ -37,7 +37,7 @@ const option = {
textStyle: { textStyle: {
color: 'rgba(255,255,255,1)', color: 'rgba(255,255,255,1)',
fontSize: '14', fontSize: '14',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN" fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
}, },
...@@ -91,9 +91,9 @@ class SafetyIndexWeek extends Component { ...@@ -91,9 +91,9 @@ class SafetyIndexWeek extends Component {
} }
componentDidMount() { componentDidMount() {
safetyIndexWeekAction().then(data =>{ safetyIndexWeekAction().then(data => {
this.setState({ this.setState({
data:data data: data
}) })
}) })
} }
...@@ -106,15 +106,16 @@ class SafetyIndexWeek extends Component { ...@@ -106,15 +106,16 @@ class SafetyIndexWeek extends Component {
boundaryGap: false, boundaryGap: false,
data: map.get("dates"), data: map.get("dates"),
axisLabel: { axisLabel: {
interval:0,//横轴信息全部显示 interval: 0,//横轴信息全部显示
// rotate:40, // rotate:40,
textStyle: { textStyle: {
color: 'rgba(255,255,255,1)', color: 'rgba(255,255,255,1)',
fontSize: '14', fontSize: '12',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN" fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
}, },
margin: 15,//刻度标签与轴线之间的距离。
} }
}, },
...@@ -130,11 +131,12 @@ class SafetyIndexWeek extends Component { ...@@ -130,11 +131,12 @@ class SafetyIndexWeek extends Component {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,1)', color: 'rgba(255,255,255,1)',
fontSize: '14', fontSize: '12',
fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN" fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
}, },
margin: 15,//刻度标签与轴线之间的距离。
}, },
}, },
...@@ -142,29 +144,53 @@ class SafetyIndexWeek extends Component { ...@@ -142,29 +144,53 @@ class SafetyIndexWeek extends Component {
series: [{ series: [{
data: map.get("values"), data: map.get("values"),
type: 'line', type: 'line',
symbol: 'circle',//折线点设置为实心点
smooth: true, //这个是把线变成 smooth: true, //这个是把线变成
itemStyle: { itemStyle: {
normal: { normal: {
color: "#FF7400", //折线点的颜色 color: "#E1B623", //折线点的颜色
lineStyle: { lineStyle: {
width: 3,//折线宽度 width: 3,//折线宽度
color: "#DDBF28"//折线颜色 //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#FF0000'
}, {
offset: 0.2,
color: '#DDBF28'
}, {
offset: 0.4,
color: '#FF7400'
}, {
offset: 0.5,
color: '#00ADFF'
}, {
offset: 0.6,
color: '#DDBF28'
}])
} }
} }
}, },
areaStyle: { areaStyle: {
normal: { normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上#766016 transparent
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: '#00ADFF' color: '#00ADFF'
}, { }, {
offset: 0.5, offset: 0.1,
color: '#DDBF28' color: '#6e6a26'
}, { }, {
offset: 1, offset: 0.2,
color: '#FF7400' color: '#766016'
}, {
offset: 0.5,
color: '#4b2006'
},{
offset: 0.6,
color: '#280d07'
}]) }])
} }
...@@ -174,26 +200,26 @@ class SafetyIndexWeek extends Component { ...@@ -174,26 +200,26 @@ class SafetyIndexWeek extends Component {
}; };
} }
handleData = (data) =>{ handleData = (data) => {
let map = new Map(); let map = new Map();
let dates = []; let dates = [];
let values = []; let values = [];
if(data && data.length > 0){ if (data && data.length > 0) {
data.map(item =>{ data.map(item => {
let time2 = item.date.substring(5); let time2 = item.date.substring(5);
dates.push(time2) dates.push(time2)
values.push(item.value) values.push(item.value)
}) })
} }
map.set("dates",dates); map.set("dates", dates);
map.set("values",values); map.set("values", values);
return map; return map;
} }
render() { render() {
let {data} = this.state; let { data } = this.state;
let map = this.handleData(data); let map = this.handleData(data);
return ( return (
<div className="safetyIndexWeek"> <div className="safetyIndexWeek">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment