How to use histograms and self modify configurations in vue

1. Import echart in html file

 <!--  Introduce echarts -->
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

2. Mount an echarts object on main. js

Vue.prototype.$echarts = window.echarts
//  Use directly when using this.$echarts

3. Page structure

<template>
 <div class="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</template>

4. Data in data

export default {
 data () {
  return {
   //  Initialized chart 
   chartInstance: null,
   allDate: null, //  Data returned by the server 
  }
 },
}
```js
##### 5.methods Logic in 
```js
methods: {
  //  Initialization echarts Object 
  initEchart(){
    //  Get dom Object 
    this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  //  Getting data from the server 
  async getData(){
    const {data:res} = await this.$http.get('seller')
    this.allDate = res
    //  The data structure of the return is  name Merchant  value Numerical value 
   //  Sort the returned data from small to small  sort Method 
   this.allDate.sort((a, b) => {
    return a.value - b.value
   })
    //  Call the update view method 
    this.updateChart()
  },
  //  Update Chart 
  updateChart(){
  // y Data of axis category axis 
  const sellerNames = this.allDate.map(item=>{
    //  Adjust according to your needs 
    return item.name
  })
  // x Axis numerical axis data 
  const sellerValues = this.allDate.map(item=>{
    return item.value
  })
     const option = {
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y Axis coordinate axis uses traversed name
     data: sellerNames
    },
    series: [
     {
      //  Type is histogram 
      type: 'bar',
      // x Axis data needs to be set in series Adj. data Of type traversal value
      data: sellerValues
     }
    ]
  }
  //  Render optio Data to dom Object 
  this.chartInstance.setOption(option)
},

mounted hook function call

 // dom Load completion call 
 mounted () {
  this.initChart()
  this.getData()
 },

Change Column Chart Configuration

1. Introducing theme profiles in index. html

 <!--  Introducing a topic  -->
 <script src="./static/lib/theme/chalk.js"></script>

2. Use initialization to get dom to pass chalk where you need to use topics

   this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')

3. Configuration of option Linear gradient of LinearGradient (x1, x2, y1, y2)

   const option = {
    title: {
     text: '|  Merchant sales statistics ',
     textStyle: {
      fontSize: 66
     },
     left: 20,
     top: 20
    },
    //  Axis configuration 
    grid: {
     top: '20%',
     left: '3%',
     right: '6%',
     bottom: '3%',
     //  Distance contains coordinate axis text 
     containLabel: true
    },
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y Axis coordinate axis uses traversed name
     data: sellerNames
    },
    series: [
     {
      //  Type is histogram 
      type: 'bar',
      // x Axis data needs to be set in series Adj. data Of type traversal value
      data: sellerValues,
      //  Width of column 
      barWidth: 66,
      //  Column writing   Not displayed by default 
      label: {
       show: true,
       //  Text is displayed to the right 
       position: 'right',
       textStyle: {
        //  The color is white 
        color: 'white'
       }
      },
      //  Each of the control columns 1 Items 
      itemStyle: {
       //  Fillet radius of control column 
       barBorderRadius: [0, 33, 33, 0],
       //  Linear gradient 
       //  Specify different percentages of color values 
       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         //  Percent 0 Style of 
         offset: 0,
         color: '#5052EE'
        },
        {
         //  100 percent 
         offset: 1,
         color: '#AB6EE5'
        }
       ])
      }
     }
    ],
    tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'line', //  The default is straight line, and can be selected as: 'line' | 'shadow'
      z: 0, //  Background level 
      lineStyle: {
       width: 66, //  Background width 
       color: '#2D3443' //  Background color 
      }
     }
    }
   }
   ```

The above is how to use the bar chart in vue and self-modifying configuration details, more information about the use of bar chart in vue please pay attention to other related articles on this site!