Skip to content

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

no message

parent 05906477
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 723 additions and 0 deletions
src/components/viitto/dataLook.vue 0 → 100644
View file @ c4478ff8
This diff is collapsed.
src/components/viitto/lineChart.vue 0 → 100644
View file @ c4478ff8
<style>
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts">
</div>
</template>
<script>
let timeData = ['6/12 2:00', '6/12 3:00', '6/12 4:00', '6/12 5:00']
export default {
components: {
},
data(){
return {
}
},mounted() {
this.init()
},methods:{
init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data:['流量','降雨量'],
x: 'left'
},
axisPointer: {
link: {xAxisIndex: 'all'}
},
grid: [{
left: 50,
right: 50,
height: '20%'
}, {
left: 50,
right: 50,
top: '35%',
height: '20%'
}, {
left: 50,
right: 50,
top: '60%',
height: '20%'
}, {
left: 50,
right: 50,
top: '85%',
height: '20%'
}],
xAxis : [
{
type : 'category',
boundaryGap : false,
data: timeData,
"show": false,
},
{
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom',
"show": false
},
{
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom',
"show": false,
},
{
gridIndex: 3,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom'
}
],
yAxis : [
{
name : '人数',
type : 'value',
max : 60,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 1,
name : '成交总量',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 2,
name : '报名单数',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 3,
name : '产品点击',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
}
],
series : [
{
name:'人数',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data:[4,15,20,29],
itemStyle: {
normal: {
lineStyle: {
color: "#12BBFF",
shadowBlur: 10,
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)" }
])
}
},
},
{
name:'价格',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data:[5,15.02,4,45],
itemStyle: {
normal: {
lineStyle: {
color: "#A7DE8A",
shadowBlur: 10,
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: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [23,88,12,45],
itemStyle: {
normal: {
lineStyle: {
color: "#F5AF19",
shadowBlur: 10,
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: 2,
yAxisIndex: 2,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [8,5,6,7],
itemStyle: {
normal: {
lineStyle: {
color: "#9345F8",
shadowBlur: 10,
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: 3,
yAxisIndex: 3,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [67,96,33,108],
itemStyle: {
normal: {
lineStyle: {
color: "#FFAA85",
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
src/router.js
View file @ c4478ff8
...@@ -4,6 +4,7 @@ import login from './views/login' ...@@ -4,6 +4,7 @@ import login from './views/login'
import index from './views/index' import index from './views/index'
import viittoData from './components/viitto/viittoData' import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2' import viittoData2 from './components/viitto/viittoData2'
import dataLook from './components/viitto/dataLook'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -34,6 +35,11 @@ export default new Router({ ...@@ -34,6 +35,11 @@ export default new Router({
path: '/viittoData2', path: '/viittoData2',
name: 'viittoData2', name: 'viittoData2',
component: viittoData2, component: viittoData2,
},
{
path: '/dataLook',
name: 'dataLook',
component: dataLook,
} }
] ]
}) })
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