如何在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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php调整服务器时间的方法
2015/04/03 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python脚本开机自启的实现方法
2019/06/28 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python操作Excel的学习笔记
2021/02/18 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
基督教婚礼主持词
2014/03/14 职场文书
安全生产月演讲稿
2014/05/09 职场文书
环保倡议书格式范文
2014/05/14 职场文书
升国旗演讲稿
2014/09/05 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Python Flask实现进度条
2022/05/11 Python