Vue Echarts实现带滚动效果的柱形图

本文实例为大家分享了Vue Echarts实现带滚动效果柱形图的具体代码,供大家参考,具体内容如下

代码

<template>
  <div class="timeLineview">
    <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>
    <div v-bind:style="{ height: noHeight + 'px' }" class="nomore">
      {{ noData }}
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  components: {},
  name: "timeLine",
  props: {
    question: {}
  },
  data() {
    return {
      datainfo: [],
      datatitle: [],
      chart: null,
      heightData: 300,
      noHeight: 0,
      noData: ""
    };
  },
  methods: {
    resize() {
      this.chart.resize();
    },
    find() {
    //获取数据
      if (this.question) {
        for (let index = 0; index < this.question.length; index++) {
          if (this.question[index].statValue > 0) {
          //y轴
            this.datainfo.push(this.question[index].statValue);
            //X轴
            this.datatitle.push(this.question[index].statLabel);
          }
        }
      }

      this.chart = echarts.init(this.$refs.categoryChart);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {},
        legend: {},
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: (100 / this.datainfo.length) * 5   //显示五个
          },
          {
            type: "inside",
            start: 0,
            end: (100 / this.datainfo.length) * 5//显示五个
          }
        ],
        xAxis: {
          data: this.datatitle
        },
        yAxis: { minInterval: 1 },   //显示为整数 最小间距1
        series: [
          {
            type: "bar",
            name: "数量",
            data: this.datainfo,

            itemStyle: {
              color: "#77bef7"
            }
          }
        ]
      };
      this.chart.setOption(option);
      if (this.datainfo.length > 0) {
        this.heightData = 300;
      } else {
        this.heightData = 0;
        this.noHeight = 300;
        this.noData = "暂无数据";
      }
    }
  },
  mounted() {
    this.find();
  },
  created() {}
};
</script>

<style  lang="less" scoped>
.nomore {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
</style>

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 如何在vue 中使用柱状图 并自修改配置

    1.在html文件导入echart <!-- 引入echarts --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> 2.在main.js上挂载echarts对象 Vue.prototype.$echarts = window.echarts // 使用时直接使用this.$echarts 3.页面结构 <templ

  • vue+echarts实现3D柱形图

    本文实例为大家分享了vue+echarts实现3D柱形图的具体代码,供大家参考,具体内容如下 1.安装echarts npm install echarts --save 2.引入echarts import echarts from "echarts"; //修改原型链,可在全局使用 Vue.prototype.$echarts = echarts; 3.创建图表 首先需要在 HTML 中创建图表的容器 <div id="echarts_park">&

  • vue基于echarts实现立体柱形图

    立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染 代码如下: (1)注册绘制图形 registry () { let MyCubeRect = this.$echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 20, zWidth: 8, zHeight: 4 }, buildPath: functio

  • vue使用echarts实现立体柱形图

    本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码,供大家参考,具体内容如下 立体柱形图是由前面.右面.上面三部分组成,绘制时需要先绘制前面为一个图形,右面和上面绘制为一个图形,然后在echats中注册,在option的series中renderItem中渲染代码如下: (1)注册绘制图形 registry () {       let MyCubeRect = this.$echarts.graphic.extendShape({         shape: {      

  • vue+echarts实现堆叠柱状图

    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen

  • Vue使用Echarts实现立体柱状图

    本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码,供大家参考,具体内容如下 预览: 代码: 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div> </template> CSS部分: .r

  • vue使用echarts实现水平柱形图实例

    文件结构: testData.js文件 const dtuEdition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线V1.0.0': 20, '有方有线V1.2.0': 15, '有方有线V2.0.1': 10, '有方有线V3.0.0': 8, '有方有线V3.2.0': 5, '有方有线V3.4.0': 4, '有方有线V4.0.0': 3, '有方有线V4.0.2': 2, '有方有线V4.0.3': 1 }

  • vue echarts实现柱状图动态展示

    本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div class="dan"> <div id="scalesize" :style="{width: '100%', height: '100%'}"></div> </div> </template> <script> i

  • 使用D3.js+Vue实现一个简单的柱形图

    最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表.这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图.不了解D3的请移步D3 Data-Driven Documents,它是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最流行的可视化库之一. 说明 采用Vue-cli脚手架快速搭建项目 npm 安装 D3 实现一个简单的柱形图 项目搭建 使用vue-cli搭建单页应用: # 安装 vue-cli $ npm install --gl

  • vue echarts实现横向柱状图

    本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div> </div>

随机推荐