echart-keyword.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="echart-content">
  3. <view class="echart-title">
  4. <view class="e-icon e3"><text class="iconfont icon-sousuoguanjianci"></text></view> <view class="e-name">搜索关键词</view>
  5. </view>
  6. <view class="echart-search">
  7. <view class="echart-search-text">
  8. <view class="search-text">所有:<text>¥10000(10个)</text></view>
  9. <view class="search-text">当前范围:<text>¥10000(10个)</text></view>
  10. </view>
  11. <view class="echart-search-date">
  12. <view class="echart-search-date-input">
  13. <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
  14. <text class="input-text">{{ queryData.startAddTime }}</text>
  15. </picker>
  16. <text class="iconfont icon-riqi"></text>
  17. </view>
  18. <view class="line">-</view>
  19. <view class="echart-search-date-input">
  20. <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
  21. <text class="input-text">{{ queryData.endAddTime }}</text>
  22. </picker>
  23. <text class="iconfont icon-riqi"></text>
  24. </view>
  25. </view>
  26. <view class="echart-search-time">
  27. <view
  28. class="time-tab"
  29. v-for="(time, index) in timeList"
  30. :class="{ current: current === index }"
  31. :key="index"
  32. @click="handleTimeClick(time.current,index)"
  33. >{{ time.label }}</view
  34. >
  35. </view>
  36. </view>
  37. <view class="echart-mains">
  38. <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :animation="false"/>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. import { mapState, mapMutations } from 'vuex'
  44. import chartMixin from './mixins/chart.mixin.js'
  45. export default {
  46. mixins: [chartMixin],
  47. data() {
  48. return {
  49. chartData: {},
  50. opts: {
  51. legend:{
  52. show:false
  53. },
  54. color: ["#9370DB"],
  55. dataLabel:true,
  56. padding: [15, 30, 0, 5],
  57. enableScroll: false,
  58. xAxis: {
  59. disableGrid: true,
  60. min: 0,
  61. axisLine: false,
  62. max: 40 ,
  63. rotateLabel:true,
  64. format:'xAxisDemo3'
  65. },
  66. yAxis: {
  67. fontSize:12,
  68. fontColor:'#CCCCCC',
  69. axisLineColor:'#DCDCDC',
  70. gridColor:'#DCDCDC',
  71. boundaryGap: 'justify',
  72. disabled:true,
  73. axisLine: false,
  74. min: 0,
  75. max: 40 ,
  76. },
  77. extra: {
  78. column: {
  79. type: "group",
  80. width: 20,
  81. meterBorde: 1,
  82. meterFillColor: "#FFFFFF",
  83. activeBgColor: "#000000",
  84. activeBgOpacity: 0.08,
  85. seriesGap: 2,
  86. categoryGap: 3,
  87. barBorderCircle: false,
  88. linearType: "custom",
  89. linearOpacity: 1,
  90. customColor:['#7B68EE','#9370DB'],
  91. colorStop: 0
  92. }
  93. }
  94. }
  95. }
  96. },
  97. created() {
  98. this.getServerData()
  99. },
  100. computed: {},
  101. methods: {
  102. getServerData() {
  103. setTimeout(() => {
  104. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  105. let res = {
  106. categories: [
  107. '美博会',
  108. '玻尿酸',
  109. '氨基酸',
  110. 'Rossa阿萨科技的和',
  111. '啊啊咔咔卡时间段',
  112. '啊啊咔咔卡时间段',
  113. '啊啊咔咔卡时间段',
  114. '啊啊咔咔卡时间段',
  115. '啊啊咔咔卡时间段',
  116. '奥术大师..'
  117. ],
  118. series: [
  119. {
  120. name: '',
  121. data: [50, 72, 100, 83, 63, 42, 42, 42, 42, 42]
  122. }
  123. ]
  124. }
  125. this.chartData = JSON.parse(JSON.stringify(res))
  126. }, 500)
  127. }
  128. },
  129. onShow() {}
  130. }
  131. </script>
  132. <style lang="scss">
  133. </style>