Skip to content

M
Muse
Commit 3527615e authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

备份

parent 126f40e0
Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 0 deletions
src/components/viitto/lineChart2.vue 0 → 100644
View file @ 3527615e
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.PINGFANG{
font-family: "PINGFANG REGULAR";
}
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts" >
</div>
</template>
<script>
let timeData = ['2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00']
export default {
props:[
'preferpriceList',
'guestnumList',
'clickcountList',
'ordercountList',
'unitpriceList',
'day_total_guestprice',
'dateList',
'zoom'
],
data(){
return {
}
},created(){
},mounted() {
this.init()
},methods:{
init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
let _this = this;
let option = {
textStyle: {
fontFamily: 'PINGFANG REGULAR',
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
type: 'cross',
label: {
backgroundColor: '#E62382',
},
lineStyle: {
width: 4,
color: 'rgba(255,255,255,.1)'
}
},
backgroundColor: '#E62382',
confine: true,
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 2,
xAxisIndex: [0, 1]
},
{
type: 'inside',
realtime: true,
start: 0,
end: 2,
xAxisIndex: [0, 1]
}
],
axisPointer: {
snap: true,
link: {xAxisIndex: 'all'}
},
grid: [{
left: 50,
right: 50,
height: '17%'
}
, {
left: 50,
right: 50,
top: '31%',
height: '17%'
}, {
left: 50,
right: 50,
top: '55%',
height: '17%'
}, {
left: 50,
right: 50,
top: '80%',
height: '17%'
}
],
xAxis : [
{
type : 'category',
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
type : 'category',
boundaryGap : false,
data: _this.dateList,
"show": false,
},
{
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false
},
{
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
},
{
gridIndex: 3,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": true,
axisLabel: {
color: '#fff',
},
}
],
yAxis : [
{
gridIndex: 0,
name : '人数 '+ _this.day_total_guestprice.GuestNum +'人',
type : 'value',
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 60],
fontSize: 18
},
axisLabel: {
color: '#34C69C',
},
},
{
gridIndex: 0,
name : '价格',
type : 'value',
position: 'right',
splitLine: {
show: false,
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 60, 0, 0],
fontSize: 18
},
axisLabel: {
color: '#12BBFF',
},
},
{
gridIndex: 1,
name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 160],
fontSize: 18
},
axisLabel: {
color: '#F5AF19',
}
},
{
gridIndex: 2,
name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#3FD2F3',
}
},
{
gridIndex: 3,
name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [10, 0, 0, 110],
fontSize: 18
},
axisLabel: {
color: '#EE4454',
}
}
],
series : [
{
name:'人数',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
itemStyle: {
borderWidth: 2,
color: '#0F56FF',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#12BBFF",
shadowBlur: 10,
width: 5,
shadowColor: "#0F56FF"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(18,187,255,1)" },
{ offset: 1, color: "rgba(15,86,255,0)" }
])
}
},
tooltip: {
formatter: '{b}: {c}'
}
},
{
name:'价格',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
// symbol: 'none',
showSymbol: false,
data: _this.unitpriceList,
itemStyle: {
borderWidth: 2,
color: '#44D6AC',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#A7DE8A",
shadowBlur: 10,
width: 5,
shadowColor: "#44D6AC"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(167,222,138,1)" },
{ offset: 1, color: "rgba(167,222,138,0)" }
])
}
},
},
{
name:'成交总量',
type:'line',
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.preferpriceList,
itemStyle: {
borderWidth: 2,
color: '#F5AF19',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#F5AF19",
shadowBlur: 10,
width: 5,
shadowColor: "#F5AF19"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(245,175,25,1)" },
{ offset: 1, color: "rgba(245,175,25,0)" }
])
}
},
}
,
{
name:'报名单数',
type:'line',
xAxisIndex: 3,
yAxisIndex: 3,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.ordercountList,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#9345F8",
shadowBlur: 10,
width: 5,
shadowColor: "#3FD2F3"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(147,69,248,1)" },
{ offset: 1, color: "rgba(147,69,248,0)" }
])
}
},
}
,
{
name:'产品点击',
type:'line',
xAxisIndex: 4,
yAxisIndex: 4,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.clickcountList,
itemStyle: {
borderWidth: 2,
color: '#EE4454',
shadowBlur: 10,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#FFAA85",
width: 5,
shadowBlur: 10,
shadowColor: "#EE4454"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(239,71,86,1)" },
{ offset: 1, color: "rgba(239,71,86,0)" }
])
}
},
}
]
}
myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
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