How to use bar charts in Vue and modify the configuration yourself

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

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

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

export default {
 data () {
  return {
   // Initialized chart chartInstance: null,
   allDate: null, //Data returned by the server}
 },
}
```js
##### 5. Logic in methods ```js
methods: {
  // Initialize echarts object initEchart(){
    // Get the DOM object this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // Get 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 // Sort the returned data from small to large sort method this.allDate.sort((a, b) => {
    return a.value - b.value
   })
    // Call the update view method this.updateChart()
  },
  // Update the chart updateChart(){
  // Y-axis category axis data const sellerNames = this.allDate.map(item=>{
    // Adjust return item.name according to your needs
  })
  // Data of the x-axis value axis const sellerValues ​​= this.allDate.map(item=>{
    return item.value
  })
     const option = {
    xAxis:
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // The y-axis coordinate axis uses the traversed name
     data:sellerNames
    },
    series: [
     {
      // Type is bar chart type: 'bar',
      // The x-axis data needs to be set in the series data type as the traversal value
      data:sellerValues
     }
    ]
  }
  // Render optio data to dom object this.chartInstance.setOption(option)
},

 // DOM loading is complete call mounted () {
  this.initChart()
  this.getData()
 },

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

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

   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%',
     // The distance includes the axis text containLabel: true
    },
    xAxis:
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // The y-axis coordinate axis uses the traversed name
     data:sellerNames
    },
    series: [
     {
      // Type is bar chart type: 'bar',
      // The x-axis data needs to be set in the series data type as the traversal value
      data: sellerValues,
      // Column width barWidth: 66,
      // Column text does not display label by default: {
       show: true,
       // The text is displayed on the right position: 'right',
       textStyle: {
        // The color is white color: 'white'
       }
      },
      //Control each item in the column itemStyle: {
       // Control the corner radius of the barBorderRadius: [0, 33, 33, 0],
       // Linear gradient // Specify different percentages of color values ​​color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         // 0 percent style offset: 0,
         color: '#5052EE'
        },
        {
         // 100% offset: 1,
         color: '#AB6EE5'
        }
       ])
      }
     }
    ],
    tooltip: {
     trigger: 'axis',
     axisPointer:
      type: 'line', // Default is a straight line, optional: 'line' | 'shadow'
      z: 0, // Background level lineStyle: {
       width: 66, // background width color: '#2D3443' // background color}
     }
    }
   }
   ```