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


Posted in Vue.js onJanuary 21, 2021

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 中使用柱状图 的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解Vue的mixin策略
Nov 19 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
如何编写jquery插件
2017/03/29 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python如何把嵌套列表转变成普通列表
2018/03/20 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Python 求向量的余弦值操作
2021/03/04 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
人力资源专员岗位职责
2014/01/30 职场文书
Golang 实现WebSockets
2022/04/24 Golang