order_ucharts.vue 954 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <view class="charts-box">
  3. <ucharts type="line" :chartData="chartData" :opts="opts" :ontouch="true" @scrollRight="scrollRight" />
  4. </view>
  5. </template>
  6. <script>
  7. import {
  8. throttle
  9. } from '@/utils/validate.js'
  10. import ucharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  11. export default {
  12. components: {
  13. ucharts
  14. },
  15. data() {
  16. return {
  17. chartData: {
  18. categories: ["1", "2", "3", "4", "5", "6", '7', '8'],
  19. series: [{
  20. name: "销售额",
  21. data: [18, 27, 21, 24, 6, 28, 66, 54]
  22. }]
  23. },
  24. opts: {
  25. enableScroll: true, //开启图表拖拽功能
  26. xAxis: {
  27. scrollShow: true, //新增是否显示滚动条,默认false
  28. itemCount: 4 //x轴单屏显示数据的数量,默认为5个
  29. }
  30. },
  31. };
  32. },
  33. methods: {
  34. scrollRight: throttle(function() {
  35. }, 300)
  36. }
  37. };
  38. </script>
  39. <style>
  40. .charts-box {
  41. width: 100%;
  42. height: 300px;
  43. }
  44. </style>