如何在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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
解读Vue组件注册方式
May 15 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
第三节 定义一个类 [3]
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python读取各种文件数据方法解析
2018/12/29 Python
python 为什么说eval要慎用
2019/03/26 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
会走路的树教学反思
2014/02/20 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
合作经营协议书范本
2014/09/16 职场文书
指导老师鉴定意见
2015/06/05 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android