|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div id="lineBar">
|
|
|
|
|
|
+ <div id="line">
|
|
<div :id="id" style="width: 99%;height:400px;"></div>
|
|
<div :id="id" style="width: 99%;height:400px;"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -9,7 +9,7 @@ const _ = require('lodash');
|
|
import * as echarts from 'echarts';
|
|
import * as echarts from 'echarts';
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
export default {
|
|
export default {
|
|
- name: 'lineBar',
|
|
|
|
|
|
+ name: 'line',
|
|
props: {
|
|
props: {
|
|
x: { type: Array, default: () => ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
|
|
x: { type: Array, default: () => ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
|
|
data: { type: Array, default: () => [] }, //[5, 20, 36, 10, 10, 20]
|
|
data: { type: Array, default: () => [] }, //[5, 20, 36, 10, 10, 20]
|
|
@@ -20,7 +20,7 @@ export default {
|
|
components: {},
|
|
components: {},
|
|
data: function() {
|
|
data: function() {
|
|
return {
|
|
return {
|
|
- id: `lineBar${_.random(100000, 999999)}`,
|
|
|
|
|
|
+ id: `line${_.random(100000, 999999)}`,
|
|
chart: undefined,
|
|
chart: undefined,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
@@ -41,10 +41,14 @@ export default {
|
|
this.isInit = true;
|
|
this.isInit = true;
|
|
}
|
|
}
|
|
this.chart.setOption({
|
|
this.chart.setOption({
|
|
|
|
+ animationDuration: 1000,
|
|
title: {
|
|
title: {
|
|
text: this.title,
|
|
text: this.title,
|
|
left: 'center',
|
|
left: 'center',
|
|
},
|
|
},
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ },
|
|
legend: {
|
|
legend: {
|
|
show: true,
|
|
show: true,
|
|
top: 30,
|
|
top: 30,
|