• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
扬帆46 显示全部楼层 发表于 2021-10-25 19:15:33 |阅读模式 打印 上一主题 下一主题
1.在html文件导入echart
  1. <!-- 引入echarts -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
复制代码
2.在main.js上挂载echarts对象
  1. Vue.prototype.$echarts = window.echarts
  2. // 使用时直接使用this.$echarts
复制代码
3.页面布局
  1. <template>
  2. <div class="com-container">
  3.   <div class="com-chart" ref="sellerRef"></div>
  4. </div>
  5. </template>
复制代码
4.data中的数据
  1. export default {
  2. data () {
  3.   return {
  4.    // 初始化的图表
  5.    chartInstance: null,
  6.    allDate: null, // 服务器返回的数据
  7.   }
  8. },
  9. }
  10. ```js
  11. ##### 5.methods中的逻辑
  12. ```js
  13. methods: {
  14.   // 初始化echarts对象
  15.   initEchart(){
  16.     // 获取dom对象
  17.     this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  18.   },
  19.   // 获取服务器的数据
  20.   async getData(){
  21.     const {data:res} = await this.$http.get('seller')
  22.     this.allDate = res
  23.     // 返会的数据结构是 name商家 value数值
  24.    // 对返回的数据进行从小打到排序 sort方法
  25.    this.allDate.sort((a, b) => {
  26.     return a.value - b.value
  27.    })
  28.     // 调用更新视方法
  29.     this.updateChart()
  30.   },
  31.   // 更新图表
  32.   updateChart(){
  33.   // y轴类目轴的数据
  34.   const sellerNames = this.allDate.map(item=>{
  35.     // 根据你的需求调整
  36.     return item.name
  37.   })
  38.   // x轴数值轴的数据
  39.   const sellerValues = this.allDate.map(item=>{
  40.     return item.value
  41.   })
  42.      const option = {
  43.     xAxis: {
  44.      type: 'value'
  45.     },
  46.     yAxis: {
  47.      type: 'category',
  48.      // y轴坐标轴使用遍历出来的name
  49.      data: sellerNames
  50.     },
  51.     series: [
  52.      {
  53.       // 类型为柱状图
  54.       type: 'bar',
  55.       // x轴数据需要设置在series的data类型为遍历的value
  56.       data: sellerValues
  57.      }
  58.     ]
  59.   }
  60.   // 渲染optio数据给dom对象
  61.   this.chartInstance.setOption(option)
  62. },
复制代码
mounted钩子函数调用
  1. // dom加载完成调用
  2. mounted () {
  3.   this.initChart()
  4.   this.getData()
  5. },
复制代码
更改柱形图配置


1.在index.html 引入主题配置文件
  1. <!-- 引入主题 -->
  2. <script src="./static/lib/theme/chalk.js"></script>
复制代码
2.在须要使用主题的地方使用 初始化获取dom传入chalk
  1.    this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')
复制代码
3.option的配置 LinearGradient(x1,x2,y1,y2)线性渐变
  1.    const option = {
  2.     title: {
  3.      text: '| 商家销售统计',
  4.      textStyle: {
  5.       fontSize: 66
  6.      },
  7.      left: 20,
  8.      top: 20
  9.     },
  10.     // 坐标轴配置
  11.     grid: {
  12.      top: '20%',
  13.      left: '3%',
  14.      right: '6%',
  15.      bottom: '3%',
  16.      // 距离包含坐标轴文字
  17.      containLabel: true
  18.     },
  19.     xAxis: {
  20.      type: 'value'
  21.     },
  22.     yAxis: {
  23.      type: 'category',
  24.      // y轴坐标轴使用遍历出来的name
  25.      data: sellerNames
  26.     },
  27.     series: [
  28.      {
  29.       // 类型为柱状图
  30.       type: 'bar',
  31.       // x轴数据需要设置在series的data类型为遍历的value
  32.       data: sellerValues,
  33.       // 柱的宽度
  34.       barWidth: 66,
  35.       // 柱文字 默认不展示
  36.       label: {
  37.        show: true,
  38.        // 文字靠右显示
  39.        position: 'right',
  40.        textStyle: {
  41.         // 颜色为白色
  42.         color: 'white'
  43.        }
  44.       },
  45.       // 控制柱的每一项
  46.       itemStyle: {
  47.        // 控制柱的圆角半径
  48.        barBorderRadius: [0, 33, 33, 0],
  49.        // 线性渐变
  50.        // 指定不同百分比的颜色数值
  51.        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
  52.         {
  53.          // 百分之0的样式
  54.          offset: 0,
  55.          color: '#5052EE'
  56.         },
  57.         {
  58.          // 百分之百
  59.          offset: 1,
  60.          color: '#AB6EE5'
  61.         }
  62.        ])
  63.       }
  64.      }
  65.     ],
  66.     tooltip: {
  67.      trigger: 'axis',
  68.      axisPointer: {
  69.       type: 'line', // 默认为直线,可选为:'line' | 'shadow'
  70.       z: 0, // 背景层级
  71.       lineStyle: {
  72.        width: 66, // 背景宽度
  73.        color: '#2D3443' // 背景颜色
  74.       }
  75.      }
  76.     }
  77.    }
  78.    ```
复制代码
以上就是如安在vue 中使用柱状图 并自修改配置的具体内容,更多关于vue 中使用柱状图 的资料请关注脚本之家别的相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作