如何在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.页面结构

<template>
 <div class="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</template>

4.data中的数据

export default {
 data () {
  return {
   // 初始化的图表
   chartInstance: null,
   allDate: null, // 服务器返回的数据
  }
 },
}
```js
##### 5.methods中的逻辑
```js
methods: {
  // 初始化echarts对象
  initEchart(){
    // 获取dom对象
    this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // 获取服务器的数据
  async getData(){
    const {data:res} = await this.$http.get('seller')
    this.allDate = res
    // 返会的数据结构是 name商家 value数值
   // 对返回的数据进行从小打到排序 sort方法
   this.allDate.sort((a, b) => {
    return a.value - b.value
   })
    // 调用更新视方法
    this.updateChart()
  },
  // 更新图表
  updateChart(){
  // y轴类目轴的数据
  const sellerNames = this.allDate.map(item=>{
    // 根据你的需求调整
    return item.name
  })
  // x轴数值轴的数据
  const sellerValues = this.allDate.map(item=>{
    return item.value
  })
     const option = {
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y轴坐标轴使用遍历出来的name
     data: sellerNames
    },
    series: [
     {
      // 类型为柱状图
      type: 'bar',
      // x轴数据需要设置在series的data类型为遍历的value
      data: sellerValues
     }
    ]
  }
  // 渲染optio数据给dom对象
  this.chartInstance.setOption(option)
},

mounted钩子函数调用

 // dom加载完成调用
 mounted () {
  this.initChart()
  this.getData()
 },

更改柱形图配置

1.在index.html 引入主题配置文件

 <!-- 引入主题 -->
 <script src="./static/lib/theme/chalk.js"></script>

2.在需要使用主题的地方使用 初始化获取dom传入chalk

   this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')

3.option的配置 LinearGradient(x1,x2,y1,y2)线性渐变

   const option = {
    title: {
     text: '| 商家销售统计',
     textStyle: {
      fontSize: 66
     },
     left: 20,
     top: 20
    },
    // 坐标轴配置
    grid: {
     top: '20%',
     left: '3%',
     right: '6%',
     bottom: '3%',
     // 距离包含坐标轴文字
     containLabel: true
    },
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y轴坐标轴使用遍历出来的name
     data: sellerNames
    },
    series: [
     {
      // 类型为柱状图
      type: 'bar',
      // x轴数据需要设置在series的data类型为遍历的value
      data: sellerValues,
      // 柱的宽度
      barWidth: 66,
      // 柱文字 默认不展示
      label: {
       show: true,
       // 文字靠右显示
       position: 'right',
       textStyle: {
        // 颜色为白色
        color: 'white'
       }
      },
      // 控制柱的每一项
      itemStyle: {
       // 控制柱的圆角半径
       barBorderRadius: [0, 33, 33, 0],
       // 线性渐变
       // 指定不同百分比的颜色数值
       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         // 百分之0的样式
         offset: 0,
         color: '#5052EE'
        },
        {
         // 百分之百
         offset: 1,
         color: '#AB6EE5'
        }
       ])
      }
     }
    ],
    tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'line', // 默认为直线,可选为:'line' | 'shadow'
      z: 0, // 背景层级
      lineStyle: {
       width: 66, // 背景宽度
       color: '#2D3443' // 背景颜色
      }
     }
    }
   }
   ```

以上就是如何在vue 中使用柱状图 并自修改配置的详细内容,更多关于vue 中使用柱状图 的资料请关注我们其它相关文章!

(0)

相关推荐

  • 使用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实现水平柱形图实例

    文件结构: 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 中使用柱状图 并自修改配置

    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中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • 如何在Vue中抽离接口配置文件

    Vue中抽离接口配置文件的问题及解决方法 问题背景 在通常开发中,我们经常把接口配置文件写在src目录里, 虽然有了一些方便,但也引发出一个新的问题,就是每次接都要重新编译. 解决方法 如果是cli2在static文件夹下创建XXX.js文件 如果是cli3在public文件夹下创建XXX.js文件 这两个文件夹下的内容将会原封不动地打包都dist里 在XXX.js下代码,定义全局变量,这样我们便能在任何地方使用 window.$4002API = { URL:'http://baidu.com

  • 如何在Vue中使localStorage具有响应式(思想实验)

    响应式是Vue.js的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个问题时,让Vue响应式与 localStorage 一起使用. 如果运行以下代码,则会看到计数器显示为静态值,并且不会像我们期望的那样发生变化,这是因为setInterval在 localStorage 中更改了该值. new Vue({ el: "#counter", data:

  • 如何在vue 中引入使用jquery

    1.首先在配置文件中添加 cnpm install  下载jquery文件 2.在webpack配置文件中添加下面代码 3.接着在webpack.base.conf.js中module.exports的最后加入下面代码 4.最后在main.js中全局引入 5.引入完成以后重启项目,就可以在全局使用jquery了 以上就是如何在vue 中引入使用jquery的详细内容,更多关于vue 引入使用jquery的资料请关注我们其它相关文章!

  • 如何在VUE中使用vue-awesome-swiper

    一:首先进入项目目录中安装 install vue-awesome-swiper@2.6.7 --save 二.使用 全局挂载: import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

  • 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用. 在本文中我们将用 Vue.js 构建一个简单的看板应用.看板是一种项目管理工具,使用户可以从头到尾直观地管理项目. Trello.Pivotal Tracker 和 Jira 等工具都属于看板应用. 设置看板 运行以下命令创建我们的看板项目: vue create kanban-board 在创建项目时,该选择只包含 Babel 和 ESlint 的默认预设. 完成后,删除默认组件 H

  • 如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • 如何在 Vue 中使用 JSX

    JSX 是什么 JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性 为什么要在 Vue 中使用 JSX 有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的 createElement( 'anchored-h

  • 如何在vue中使用pdfjs预览pdf文件

    目录 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf文件下载下来,通过电脑安装的专用于打开pdf的软件来查看pdf文件呢.如果有个需求说不要让用户安装软件呢,毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛.ok,有了这样的需求那我们是不是也得去实现嘛,毕竟这理由咱也没法反驳啊. 思考 既然都提出来了,那就想想怎么使用咯.既然需要用到pdf.不知道有没有关于js能够操作的库文件来帮我呢?果断一百度,咱们今天的主角就来

随机推荐