如何在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中的逻辑```jsmethods: {
  // 初始化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 Echarts实现带滚动效果的柱形图
• vue+echarts实现3D柱形图
• vue基于echarts实现立体柱形图
• vue使用echarts实现水平柱形图实例
• 使用D3.js+Vue实现一个简单的柱形图
• Vue使用Echarts实现立体柱状图
• vue echarts实现横向柱状图
• vue echarts实现柱状图动态展示
• vue+echarts实现堆叠柱状图
• vue使用echarts实现立体柱形图

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！