LineChartMultid.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <div :style="{ padding: '0 0 32px 32px' }">
  3. <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
  4. <v-chart :force-fit="true" :height="height" :data="data" :scale="scale">
  5. <v-tooltip/>
  6. <v-axis/>
  7. <v-legend/>
  8. <v-line position="type*y" color="x"/>
  9. <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/>
  10. </v-chart>
  11. </div>
  12. </template>
  13. <script>
  14. import {DataSet} from '@antv/data-set'
  15. export default {
  16. name: 'LineChartMultid',
  17. props: {
  18. title: {
  19. type: String,
  20. default: ''
  21. },
  22. dataSource: {
  23. type: Array,
  24. default: () => [
  25. {type: 'Jan', jeecg: 7.0, jeebt: 3.9},
  26. {type: 'Feb', jeecg: 6.9, jeebt: 4.2},
  27. {type: 'Mar', jeecg: 9.5, jeebt: 5.7},
  28. {type: 'Apr', jeecg: 14.5, jeebt: 8.5},
  29. {type: 'May', jeecg: 18.4, jeebt: 11.9},
  30. {type: 'Jun', jeecg: 21.5, jeebt: 15.2},
  31. {type: 'Jul', jeecg: 25.2, jeebt: 17.0},
  32. {type: 'Aug', jeecg: 26.5, jeebt: 16.6},
  33. {type: 'Sep', jeecg: 23.3, jeebt: 14.2},
  34. {type: 'Oct', jeecg: 18.3, jeebt: 10.3},
  35. {type: 'Nov', jeecg: 13.9, jeebt: 6.6},
  36. {type: 'Dec', jeecg: 9.6, jeebt: 4.8}
  37. ]
  38. },
  39. fields: {
  40. type: Array,
  41. default: () => ['jeecg', 'jeebt']
  42. },
  43. height: {
  44. type: Number,
  45. default: 254
  46. }
  47. },
  48. data() {
  49. return {
  50. scale: [{
  51. dataKey: 'x',
  52. min: 0,
  53. max: 1
  54. }],
  55. style: {stroke: '#fff', lineWidth: 1}
  56. }
  57. },
  58. computed: {
  59. data() {
  60. const dv = new DataSet.View().source(this.dataSource)
  61. dv.transform({
  62. type: 'fold',
  63. fields: this.fields,
  64. key: 'x',
  65. value: 'y'
  66. })
  67. return dv.rows
  68. }
  69. }
  70. }
  71. </script>
  72. <style scoped>
  73. </style>