Basix/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refine echarts demo

Browse source
This commit is contained in:
Pan 2017-06-30 15:36:21 +08:00
parent b15caf637f
commit 4b4bf494b0
8 changed files with 703 additions and 699 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
src/components/Charts/keyboard.vue
View file

@ -2,111 +2,111 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/visualMap'); export default {
export default { props: {
name: 'barPercent', className: {
props: { type: String,
className: { default: 'chart'
type: String, },
default: 'chart' id: {
}, type: String,
id: { default: 'chart'
type: String, },
default: 'chart' width: {
}, type: String,
width: { default: '200px'
type: String, },
default: '200px' height: {
}, type: String,
height: { default: '200px'
type: String, }
default: '200px' },
} data() {
}, return {
data() { chart: null
return {}; };
}, },
mounted() { mounted() {
this.initBar(); this.initChart();
}, },
methods: { beforeDestroy() {
initBar() { if (!this.chart) {
this.chart = echarts.init(document.getElementById(this.id)); return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = []; const xAxisData = [];
const data = []; const data = [];
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
xAxisData.push(i + '号'); xAxisData.push(i + '号');
data.push(Math.round(Math.random() * 2 + 3)) data.push(Math.round(Math.random() * 2 + 3))
} }
this.chart.setOption( this.chart.setOption(
{ {
backgroundColor: '#08263a', backgroundColor: '#08263a',
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
show: false, show: false,
data: xAxisData data: xAxisData
}, },
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 50, max: 50,
dimension: 0, dimension: 0,
inRange: { inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
} }
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#4a657a' color: '#4a657a'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#08263f' color: '#08263f'
} }
}, },
axisTick: {} axisTick: {}
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
data, data,
name: '撸文数', name: '撸文数',
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 5, barBorderRadius: 5,
shadowBlur: 10, shadowBlur: 10,
shadowColor: '#111' shadowColor: '#111'
} }
}, },
animationEasing: 'elasticOut', animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut', animationEasingUpdate: 'elasticOut',
animationDelay(idx) { animationDelay(idx) {
return idx * 20; return idx * 20;
}, },
animationDelayUpdate(idx) { animationDelayUpdate(idx) {
return idx * 20; return idx * 20;
} }
}] }]
}) })
} }
} }
} }
</script> </script>

278
src/components/Charts/keyboard2.vue
View file

@ -2,148 +2,148 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/visualMap'); export default {
export default { props: {
name: 'barPercent', className: {
props: { type: String,
className: { default: 'chart'
type: String, },
default: 'chart' id: {
}, type: String,
id: { default: 'chart'
type: String, },
default: 'chart' width: {
}, type: String,
width: { default: '200px'
type: String, },
default: '200px' height: {
}, type: String,
height: { default: '200px'
type: String, }
default: '200px' },
data() {
return {
chart: null
};
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = [];
const data = [];
const data2 = [];
for (let i = 0; i < 50; i++) {
xAxisData.push(i);
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
} }
}, this.chart.setOption(
data() { {
return {}; backgroundColor: '#08263a',
}, xAxis: [{
mounted() { show: false,
this.initBar(); data: xAxisData
}, }, {
methods: { show: false,
initBar() { data: xAxisData
this.chart = echarts.init(document.getElementById(this.id)); }],
visualMap: {
const xAxisData = []; show: false,
const data = []; min: 0,
const data2 = []; max: 50,
for (let i = 0; i < 50; i++) { dimension: 0,
xAxisData.push(i); inRange: {
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
}
this.chart.setOption(
{
backgroundColor: '#08263a',
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20;
},
animationDelayUpdate(idx) {
return idx * 20;
} }
}) },
} yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20;
},
animationDelayUpdate(idx) {
return idx * 20;
}
})
} }
} }
}
</script> </script>

404
src/components/Charts/lineMarker.vue
View file

@ -2,218 +2,220 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line'); export default {
// 引入提示框和标题组件 props: {
require('echarts/lib/component/tooltip'); className: {
require('echarts/lib/component/title'); type: String,
require('echarts/lib/component/legend'); default: 'chart'
export default {
name: 'barPercent',
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
}, },
data() { id: {
return {}; type: String,
default: 'chart'
}, },
mounted() { width: {
this.initChart(); type: String,
default: '200px'
}, },
methods: { height: {
initChart() { type: String,
this.chart = echarts.init(document.getElementById(this.id)); default: '200px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#394056', backgroundColor: '#394056',
title: { title: {
text: '请求数', text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: { textStyle: {
fontWeight: 'normal', fontSize: 14
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
} }
}, },
legend: { splitLine: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '移动',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: { lineStyle: {
normal: { color: '#57617B'
width: 1 }
} }
}, }],
areaStyle: { series: [{
normal: { name: '移动',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ type: 'line',
offset: 0, smooth: true,
color: 'rgba(137, 189, 27, 0.3)' symbol: 'circle',
}, { symbolSize: 5,
offset: 0.8, showSymbol: false,
color: 'rgba(137, 189, 27, 0)' lineStyle: {
}], false), normal: {
shadowColor: 'rgba(0, 0, 0, 0.1)', width: 1
shadowBlur: 10 }
} },
}, areaStyle: {
itemStyle: { normal: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: 'rgb(137,189,27)', offset: 0,
borderColor: 'rgba(137,189,2,0.27)', color: 'rgba(137, 189, 27, 0.3)'
borderWidth: 12 }, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
} }
}, },
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, { }, {
name: '电信', name: '电信',
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1
} }
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: 'rgba(0, 136, 212, 0.3)' color: 'rgba(0, 136, 212, 0.3)'
}, { }, {
offset: 0.8, offset: 0.8,
color: 'rgba(0, 136, 212, 0)' color: 'rgba(0, 136, 212, 0)'
}], false), }], false),
shadowColor: 'rgba(0, 0, 0, 0.1)', shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10 shadowBlur: 10
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(0,136,212)', color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)', borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12 borderWidth: 12
} }
}, },
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150] data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, { }, {
name: '联通', name: '联通',
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
normal: { normal: {
width: 1 width: 1
} }
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: 'rgba(219, 50, 51, 0.3)' color: 'rgba(219, 50, 51, 0.3)'
}, { }, {
offset: 0.8, offset: 0.8,
color: 'rgba(219, 50, 51, 0)' color: 'rgba(219, 50, 51, 0)'
}], false), }], false),
shadowColor: 'rgba(0, 0, 0, 0.1)', shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10 shadowBlur: 10
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(219,50,51)', color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)', borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12 borderWidth: 12
} }
}, },
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122] data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}] }]
}) })
}
} }
} }
}
</script> </script>

500
src/components/Charts/mixchart.vue
View file

@ -2,264 +2,266 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); export default {
require('echarts/lib/chart/line'); props: {
// 引入提示框和标题组件 className: {
require('echarts/lib/component/tooltip'); type: String,
require('echarts/lib/component/title'); default: 'chart'
require('echarts/lib/component/legend');
require('echarts/lib/component/dataZoom');
export default {
name: 'barPercent',
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
}, },
data() { id: {
return {}; type: String,
default: 'chart'
}, },
mounted() { width: {
this.initChart(); type: String,
default: '200px'
}, },
methods: { height: {
initChart() { type: String,
this.chart = echarts.init(document.getElementById(this.id)); default: '200px'
const xData = (function() { }
const data = []; },
for (let i = 1; i < 13; i++) { data() {
data.push(i + '月份'); return {
chart: null
};
},
mounted() {
this.initChart();
this.chart = null;
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xData = (function() {
const data = [];
for (let i = 1; i < 13; i++) {
data.push(i + '月份');
}
return data;
}());
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: '统计',
x: '4%',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
} }
return data; },
}()); tooltip: {
this.chart.setOption({ trigger: 'axis',
backgroundColor: '#344b58', axisPointer: {
title: {
text: '统计',
x: '4%',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
borderWidth: 0,
top: 110,
bottom: 95,
textStyle: { textStyle: {
color: '#fff' color: '#fff'
} }
},
legend: {
x: '15%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['女', '男', '平均']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '女',
type: 'bar',
stack: '总量',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
},
{
name: '男',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: '平均',
type: 'line',
stack: '总量',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
} }
},
grid: {
borderWidth: 0,
top: 110,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '15%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['女', '男', '平均']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '女',
type: 'bar',
stack: '总量',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
] ]
}) },
}
{
name: '男',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: '平均',
type: 'line',
stack: '总量',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
]
})
} }
} }
}
</script> </script>

2
src/views/charts/keyboard.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboardChart height='100%' width='100%' /> <keyboard-chart height='100%' width='100%'></keyboard-chart>
</div> </div>
</div> </div>
</template> </template>

2
src/views/charts/keyboard2.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboardChart2 id='apple' height='100%' width='100%' /> <keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
</div> </div>
</div> </div>
</template> </template>

2
src/views/charts/line.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<lineMarker height='100%' width='100%' /> <line-marker height='100%' width='100%'></line-marker>
</div> </div>
</div> </div>
</template> </template>

6
src/views/charts/mixchart.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<mixchart id='apple' height='100%' width='100%' /> <mix-chart id='apple' height='100%' width='100%'></mix-chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import mixchart from 'components/Charts/mixchart'; import mixChart from 'components/Charts/mixChart';
export default { export default {
components: { mixchart } components: { mixChart }
}; };
</script> </script>