在VUE中使用Echarts

第一步：下载echarts

npm install echarts --save

第二步：在项目中main.js引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

第三步：在组件中使用

在template标签中写

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

在script标签中

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]         

                                 }

                               ]       

                       });   

               } 

           }

          }

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这是客户想要的图表

当点击年时图表的x轴显示5个年份。点击月时图表的x轴显示12个月。默认显示一周。

由于后台直接返回我一个数组

代码如下

在method中的代码