我用apexcharts vue bindings绘制了一些条形图.

正如docs所说,应该可以通过设置show:false来禁用工具栏,如图there所示.

所以我在我的助手函数上做了:

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show:false },// docs says it should do the trick
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: { distributed: true, horizontal: true }
  },
  tooltip: {
    theme: "dark"
  },
  xaxis: {
    categories: labels,
    color: "white",
    labels: {
      style: {
        colors: ["white"]
      }
    }
  },
  yaxis: {
    labels: {
      style: {
        color: "white"
      }
    }
  }
});

我通过以下方式将其传递给我的vue组件:

<template>
    <v-layout row justify-center wrap>
        <v-flex xs12>
            <apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
        </v-flex>
    </v-layout>
</template>

<script>
const doOptions = require("./do-chart-options");
const labels = [
    "Javascript",
    "Java",
    "SQL",
    "HTML",
    "CSS",
    "C",
    "C++",
    "PHP",
    "Python",
    "GO",
    "Ruby"
];
module.exports = {
    name: "chart-languages",
    data: _ => ({
        series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
        chartOptions: doOptions(labels)
    })
};
</script>

但是菜单仍然存在:

enter image description here

欢迎任何指导.

推荐答案

toolbar应该低于chart

{
  chart: {
    toolbar: {
      show: false
    }
  },
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: {
      distributed: true,
      horizontal: true
    }
  },
  ...
}

你可以查看我的演示here

Vue.js相关问答推荐

Vue 3 需要 main.js 中的文件

在哪里可以找到在线沙箱 Vuetify 3 模板来创建最小的可重现示例?

Vue.js 3 没有组件的实例?

在vuejs中使用表单追加时如何使用布尔值

传单 vue3 组件变体打开错误的标记 - 单击时弹出

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法

使用 Vue.js 将文件输入绑定到按钮

aspnet core如何在deploy上构建webpack

Vuex:如何等待动作完成?

我可以从手表调用方法并安装吗?

Vuetify 置顶工具栏

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

根据 URL 有条件地隐藏视图组件

如何使用 vuejs 从 SPA 访问 /storage -laravel- 中的图像

v-if inside v-for - 在两列中显示项目列表

在组件之间共享数据

axios 拦截器响应未定义

如何在 JEST 测试中模拟全局 Vue.js 变量

用于 nuxt.js 构建的自定义 index.html