Using Echarts in Vue

Step 1: Download echarts

npm install echarts --save

Step 2: Introduce main.js in the project

import echarts from 'echarts'

Vue.prototype.$echarts = echorts

Step 3: Use in the component

write in template tag

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

in the script tag

export default { 

    name: 'test', 

    data(){ 

        return{ 

       } 

    }, 

   mounted(){   

        this.drawLine();

    },

    methods: {   

          drawLine(){       

         // 基于准备好的dom，初始化echarts实例       

             let myChart = this.$echarts.init(document.getElementById('myChart'),'light')       

          // 绘制图表       

            myChart.setOption({           

                       title: { text: '这里是表格的标题，自带加粗' },           

                       tooltip: {},           

                       // 图标中x轴的内容

                      xAxis: {               

                                   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]           

                       },     

                      // 图标中y轴的内容

                      yAxis: {},     

                       // 数据 

                      series: [

                            {                name: '销量',               

                                              type: 'bar',               

                                            data: [5, 20, 36, 10, 10, 20]         

                                 }

                               ]       

                       });   

               } 

           }

          }

　　Note: We want to instantiate the echarts object in the mounted lifecycle function. Because we want to make sure that the dom element has been mounted in the page

This is the desired requirement

The x-axis of the chart shows 5 years when the year is clicked. The x-axis of the chart shows 12 months when you click on the month. A week is displayed by default.

 

Since the background directly returns me an array

code show as below

Reprinted in: https://www.cnblogs.com/JiAyInNnNn/p/11049645.html