This commit is contained in:
sakuya
parent
15c4f643c4
commit
4c3f7b4815
|
|
@ -0,0 +1,59 @@
|
|||
const T = {
|
||||
"color": [
|
||||
"#409EFF",
|
||||
"#36CE9E",
|
||||
"#E6A23C",
|
||||
"#626c91",
|
||||
"#F56C6C",
|
||||
"#909399"
|
||||
],
|
||||
'grid': {
|
||||
'left': '3%',
|
||||
'right': '3%',
|
||||
'bottom': '3%',
|
||||
'top': '40',
|
||||
'containLabel': true
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#999"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(255,255,255,0.01)",
|
||||
"rgba(0,0,0,0.01)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#999"
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default T
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div ref="scEcharts" :style="{height:height, width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import T from './echarts-theme-T.js';
|
||||
echarts.registerTheme('T', T);
|
||||
|
||||
export default {
|
||||
name: "scEcharts",
|
||||
props: {
|
||||
height: { type: String, default: "100%" },
|
||||
width: { type: String, default: "100%" },
|
||||
nodata: {type: Boolean, default: false },
|
||||
option: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
myOptions: function() {
|
||||
return this.option || {};
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.draw();
|
||||
},
|
||||
methods: {
|
||||
draw(){
|
||||
let myChart = echarts.init(this.$refs.scEcharts, 'T');
|
||||
myChart.setOption(this.myOptions);
|
||||
window.addEventListener('resize', () => myChart.resize() );
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,15 +1,85 @@
|
|||
<template>
|
||||
<el-skeleton />
|
||||
<div v-loading="loading">
|
||||
<scEcharts height="300px" :option="option"></scEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
title:"模块1",
|
||||
props: {
|
||||
msg: String
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
mounted(){
|
||||
console.log("加载C1");
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var _this = this;
|
||||
setTimeout(function() {
|
||||
_this.loading = false
|
||||
}, 500);
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['支出', '收入'],
|
||||
right: 13,
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '价格',
|
||||
"splitLine": {
|
||||
"show": false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '支出',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
shadowColor: 'rgba(0,0,0,0.2)',
|
||||
shadowBlur: 15,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
'areaStyle': {
|
||||
'opacity': 0.2
|
||||
},
|
||||
data: [35, 10, 36, 5, 5, 20],
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
shadowColor: 'rgba(0,0,0,0.2)',
|
||||
shadowBlur: 15,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
'areaStyle': {
|
||||
'opacity': 0.2
|
||||
},
|
||||
data: [15, 15, -25, 20, 20, 8],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,30 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<div style="height: 200px" ref="demo"></div>
|
||||
<scEcharts height="220px" :option="option"></scEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import T from '@/utils/echarts-theme-T.js';
|
||||
echarts.registerTheme('T', T);
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
title:"模块3",
|
||||
components: {
|
||||
echarts
|
||||
},
|
||||
props: {
|
||||
msg: String
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
loading: true,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
created() {
|
||||
var _this = this;
|
||||
setTimeout(function() {
|
||||
_this.loading = false
|
||||
}, 500);
|
||||
|
||||
const myChart = echarts.init(this.$refs.demo, 'T');
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
|
|
@ -43,33 +32,31 @@
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['预购队列', '最新成交价'],
|
||||
data: ['支出', '收入'],
|
||||
right: 13,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
data: ['周一', '周二', '周三', '周四', '周五'],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '价格',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预购队列',
|
||||
barWidth: 16,
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '价格',
|
||||
}, ],
|
||||
series: [{
|
||||
name: '支出',
|
||||
barWidth: '20%',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
data: [5, 20, 36, 10, 10],
|
||||
},
|
||||
{
|
||||
name: '最新成交价',
|
||||
type: 'line',
|
||||
data: [15, 20, 16, 20, 30, 8],
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: [15, 20, 16, 20, 30],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue