In the VUE use Echarts

Step One: Download echarts

npm install echarts --save

Step two: main.js introduced in the project

import echarts from 'echarts'

Vue.prototype. $ Echarts = echarts

Third step: in component

Written in the 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 an object mounted echarts lifecycle functions. Because we want to make sure dom element has been mounted to the page

This is a requirement wants to achieve

When you click on the x-axis of the chart displays five years. The x-axis of the chart show 12 months when clicked months. The default display for a week.

 

Because of my background direct return an array

code show as below

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