HTML:
<template>
<div class="tendencyChart">
<HeaderNav :navList="navList" :parentPath="parentPath"></HeaderNav>
<div class="nav">
<Row>
<Col span="6" class="">
<p :class="{'active':isActive=='0'}" @click="selFun('0')">
<span>1个月</span>
</p>
</Col>
<Col span="6" class="">
<p :class="{'active':isActive=='1'}" @click="selFun('1')">
<span>3个月</span>
</p>
</Col>
<Col span="6" class="">
<p :class="{'active':isActive=='2'}" @click="selFun('2')">
<span>6个月</span>
</p>
</Col>
<Col span="6" class="">
<p :class="{'active':isActive=='3'}" @click="selFun('3')">
<span>1年</span>
</p>
</Col>
</Row>
</div>
<div id="chartsMain" ref="main" style=""></div>
</div>
</template>JS:
<script>
import HeaderNav from '../../../components/header.vue'
import echarts from 'echarts';
import {HOMEPAGE_A} from '../../../store/action-types'
import {mapMutations, mapActions, mapGetters, mapState} from 'vuex'
export default{
data(){
return {
//头部参数
navList: '定投价格趋势图',
parentPath: 'home',
isActive: '0',
params: {
timeRange: ''
},
myChart: '',
yData: '',
xData: '',
bar: {
//提示框组件，包括提示框浮层和 axisPointer。
tooltip: {
trigger: 'axis',
borderColor: '#000',
padding: [5, 10],
confine:true,
position: function (pt) {
return [pt[0], '10%'];
},
axisPointer: {
lineStyle:{
color:'#FF7600'
}
}
},
title: {
text: '单位： /元',
textStyle: {
color: '#FF7600',
fontSize: '12',
fontWeight: 'normal'
},
padding: [25, 35]
},
//设置图表位置
grid: {
top: 60,
bottom: 80,
left: 20,
right: 30,
//grid 区域是否包含坐标轴的刻度标签。[ default: false ]
containLabel: true
},
xAxis: {
data: [],
//轴线单位坐标线对应的方向
axisTick: {
show: false
},
//从零刻度开始
boundaryGap: false,
//设置轴线的属性
axisLine: {
lineStyle: {
color: '#F6A623',
width: 1,
}
},
axisLabel: {
show: true,
// interval:0,//显示全部数据
textStyle: {
fontSize: ".2rem",
color: "#FF7600",
align: "center"
}
},
//网格线
splitLine: {
show: false
},
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
fontSize: ".2rem",
color: "#FF7600",
align: "right"
},
formatter: function (e) {
return e;
}
},
//设置轴线的属性
axisLine: {
show: false,
lineStyle: {
color: '#fff',
width: 1,
}
},
//网格线
splitLine: {
show: true,
lineStyle: {
color: "#F6A623",
type: "solid"
}
},
},
//滑块
dataZoom: [
{
type: 'slider',
xAxisIndex: [0],
//组件高度
height: 20,
//下边的距离
bottom: 15,
//字体颜色
textStyle: {
color: '#fff',
},
//边框颜色
borderColor: 'transparent',
//选中范围的填充颜色
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#F88B30'
}, {
offset: 1,
color: '#F9B84C'
}]),
//控制手柄的尺寸
handleSize: 15,
//手柄的样式配置
handleStyle: {
color: '#fff',
shadowBlur: 10,
shadowColor: 'rgba(255, 255, 255, 1)',
},
//背景块样式
dataBackground: {
lineStyle: {
width: 0
},
areaStyle: {
color: 'rgba(0,0,0,0.2)',
}
},
//手柄的 icon 形状
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter',
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty'
},
],
series: [
{
name: '定投价格',
type: 'line',
data: [],
animationDuration: 1500,
//平滑曲线
// smooth: true,
//每个折点显示数值
label: {
normal: {
show: false
}
},
symbol: 'none',
symbolSize:6,
//拐点颜色设置
itemStyle: {
normal: {
color: "#FF7600"
},
},
//折线样式
lineStyle: {
normal: {
color: '#fff',
width: 1
}
},
//面积样式
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(255,188,0,0.5)'},
{offset: 0.5, color: 'rgba(248,180,10,0.5)'},
{offset: 1, color: 'rgba(240,198,23,0.5)'}
]
)
}
},
}
]
}
}
},
created(){
this.setListFun();
},
methods: {
...mapActions({
getSysPriceGraph: HOMEPAGE_A.getSysPriceGraph
}),
setListFun(){
var _this = this;
this.getSysPriceGraph(this.params).then(function (res) {
if (res.code === '1') {
for (var i = 0; i < res.data.xList.length; i++) {
res.data.xList[i] = _this.format(res.data.xList[i]);
}
_this.xData = res.data.xList;
_this.yData = res.data.yList;
_this.myChart.setOption({
xAxis: {
data: _this.xData
},
series: {
data: _this.yData
}
})
}
});
},
selFun: function (type) {
this.isActive = type;
this.params.timeRange = type;
this.setListFun();
},
drawLineChart(){
//初始化charts
var a = document.getElementById('chartsMain');
this.myChart = echarts.init(a);
this.myChart.setOption(this.bar);
//图形自适应窗口大小
window.onresize = this.myChart.resize;
},
format(val){
var date = new Date(val);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
// return y + '-' + m + '-' + d;
return m + '-' + d;
}
},
mounted(){
//设置容器高
var height = document.body.offsetHeight;
this.$refs.main.style.height = (height / 50 - 2.16) + 'rem';
this.drawLineChart();
},
components: {
HeaderNav,
echarts
}
}
</script>CSS:
<style lang="scss">
.tendencyChart {
.nav {
height: .79rem;
line-height: .79rem;
border-bottom:.01rem solid #e8e8e8;
background: #fff;
div{
}
p {
text-align: center;
font-size: .30rem;
color: #999999;
}
p.active > span{
color: #FF7600;
border-bottom:.01rem solid #FF7600;
line-height: .79rem;
display: inline-block;
font-family: 'PingFangSC-Medium';
}
}
#chartsMain {
width: 100%;
/*background: linear-gradient(to bottom, #F88B30 0%, #F9D24C 100%) !important;*/
background: #fff !important;
}
.chart {
height: 100%;
}
}
</style>