使用v-chart遇见的问题

v-chart 无数据时图表不显示的解决方案
双y轴刻度对齐,规定数据与右边y轴对齐

<template>
  <div id="app">
    <ve-histogram
        :data="histogramData"
        class="sss"
        :settings="chartSettings"
        :y-axis="yAxis"
        :extend="option"
      ></ve-histogram>
  </div>
</template>
<script>
import addTime from './views/addTime.vue'
import VeHistogram from 'v-charts/lib/histogram.common'

export default {
  components:{
    VeHistogram
  },
  data() {
    this.chartSettings = {
      labelMap: {
        reportDate: '日期',
        aa: '新增注册用户',
        bb: '累计注册用户',
      }
    }
    return {
      histogramData: {
        columns: ['reportDate', 'aa', 'bb'],
        rows: [
          { reportDate: '2020-8-4' },
          { reportDate: '2020-8-5' },
          { reportDate: '2020-8-6' },
          { reportDate: '2020-8-7' },
          { reportDate: '2020-8-8' },
          { reportDate: '2020-8-9' }
        ]
      },
      reportDateList: [],
      yAxis: [
        {
          type: 'value',
          name: '人数',
          min: 0,
          max: 100,
          interval: 20
        },
        {
          type: 'value',
          name: '题目数',
          min: 0,
          max: 20,
          interval: 5
        }
      ],
      option: {
        series() {
          return [
            { name: '新增用户', type: 'bar', yAxisIndex: 0 },
            { name: '累计用户', type: 'bar', yAxisIndex: 1 },
          ]
        }
      },
      // histogramData:{
      //   columns: ['日期', '新增注册用户', '累计注册用户'],
      //   rows: [{'日期':'2020-8-10', '新增注册用户':20, '累计注册用户':15}]
      // }
    }
  },
  created(){
    this.init()
  },
  methods: {
    init(){
      
      let aaData= []
      let bbData= []
      let arr =[1,1]
      for(let i=1;i<arr.length+1;i++){
        aaData.push(80*i)
        bbData.push(10
        *i)
      }
      let resultArray = [
        {name:'新增用户',type:'bar',yAxisIndex:0,aaData},
        {name:'累计用户',type:'bar',yAxisIndex:1,bbData}
      ]
      this.reportDateList = [{reportDate:'2020-8-11'},{reportDate:'2020-8-14'}]
      this.histogramData.rows = this.reportDateList
      //yAxisIndex  设置与那边y轴对齐的字段
      this.option.series = () => {
        return resultArray
      }
      let maxReviewNumberData = 166
      let maxQuestionNumberData =78
      if (maxReviewNumberData && maxQuestionNumberData) {
              // 设置双y轴刻度线对齐
              this.yAxis[0].max = Math.ceil(maxReviewNumberData / 5) * 8
              this.yAxis[0].interval = this.yAxis[0].max / 8

              this.yAxis[1].max = Math.ceil(maxQuestionNumberData / 5) * 8
              this.yAxis[1].interval = this.yAxis[1].max / 8
            }

    }
  }
};

</script>
<style>
.sss{
  width: 100%;
  height: 400px;
}
</style>

也可以判断res.data是否为空,为空就自己赋值0

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-chart 是一个基于 Vue.js 的可视化图表库,可以用来绘制各种类型的图表,包括动态词云图。 以下是使用 v-chart 绘制动态词云图的步骤: 1. 安装 v-chart 可以通过 npm 安装 v-chart: ``` npm install v-charts --save ``` 2. 导入 v-chart 在需要使用动态词云图的页面,导入 v-chart: ```javascript import VCharts from 'v-charts' Vue.use(VCharts) ``` 3. 准备数据 准备一个包含词语和权重的数组,例如: ```javascript const data = [ { text: 'vue', weight: 100 }, { text: 'javascript', weight: 80 }, { text: 'html', weight: 60 }, { text: 'css', weight: 50 }, { text: 'webpack', weight: 40 }, { text: 'node.js', weight: 30 }, { text: 'npm', weight: 20 }, { text: 'git', weight: 10 } ] ``` 4. 使用 v-chart 绘制动态词云图 在模板使用 v-chart 组件,设置 type 属性为 wordcloud,设置 data 属性为准备好的数据数组: ```html <template> <v-chart :data="data" type="wordcloud" /> </template> <script> export default { data() { return { data: [ { text: 'vue', weight: 100 }, { text: 'javascript', weight: 80 }, { text: 'html', weight: 60 }, { text: 'css', weight: 50 }, { text: 'webpack', weight: 40 }, { text: 'node.js', weight: 30 }, { text: 'npm', weight: 20 }, { text: 'git', weight: 10 } ] } } } </script> ``` 5. 调整样式 可以通过设置 v-chart 组件的 style 属性来调整动态词云图的样式,例如: ```html <template> <v-chart :data="data" type="wordcloud" :style="{ height: '500px' }" /> </template> ``` 以上就是使用 v-chart 绘制动态词云图的基本步骤。需要注意的是,v-chart 组件只提供了基本的词云图功能,如果需要更多高级功能,可以考虑使用其他词云图库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值