vue中使用echart （以饼图和柱状图为例）

在做的项目的时候需要全局引入，但是如果自己写一个demo页面可以选择按需引入，这里主要是来谈全局引入

1、首先：在编辑器(我使用的是vscode)的终端输入命令行npm install echarts --save,安装Echarts

2、其次：在入口文件main.js里面引入，import echarts from 'echarts'     Vue.prototype.$echarts = echarts

3、最后：

在html页面加入放置饼状图和柱状图的div，但是必须为div设置宽和高；

<!-- 饼状图 -->

< div id = "myPie" :style = " {width: '600px' ,height: '500px' ,left: '80px' } " ></ div >

</ div >

<!-- 柱状图 -->

< div style = "display:inline-block;left:230px;" id = "myBar" :style = " {width: '600px' ,height: '500px' ,} " ></ div >

在js中引入

<script>

   export default {

        data(){

             return{

                      monthNumber: [],

                      monthRevenue: [],

              }

        }   

       mounted() {

              this .queryRecentlyMonth();

              this .monthNumber = this .calculateMonth();

              this .queryRevenueExpenditureData();

       },

      methods:{

             //初始化数据

             queryRevenueExpenditureData() {

                        let that = this ;

                        queryRevenueExpenditure( this .queryRevenueExpenditureParam).then( response => {

                              that.revenueExpenditure = response.data;

                             that.drawLine();

                            } );

                         queryRevenuesForRecentMonths().then(response => {

                          let res = response.data.monthRevenues;

                          that.monthRevenue = that.calculateRevenueByMonth(res);

                           that.drawLine();

                          });

                 },

                 //计算最近6个月

                  calculateMonth() {

                       //创建现在的时间

                      var data = new Date();

                      //获取年

                      var year = data.getFullYear();

                     //获取月

                     var mon = data.getMonth() + 1 ;

                     var arry = new Array();

                     arry[ 0 ] = mon;

                     for ( var i = 1 ; i < 6 ; i ++ ) {

                         mon = mon - 1 ;

                              if (mon <= 0 ) {

                                   year = year - 1 ;

                                   mon = mon + 12 ;

                               }

                          arry[i] = mon;

                      }

                   return arry.reverse();

                 },

                //计算指定月的收入

                calculateRevenueByMonth(data) {

                       let revenues = [];

                       let months = this .monthNumber;

                       if (data) {

                           months.forEach(m => {

                           let flag = false ;

                           data.forEach(n => {

                                   let currentMonth = n.monthNumber;

                                   if (currentMonth == m) {

                                   revenues.push(n.monthRevenue);

                                   flag = true ;

                                   return ;

                            }

                       });

                      if ( ! flag) {

                            revenues.push( 0 );

                       }

                  });

                }

            return revenues;

         },    

     

drawLine() {

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

let myPie = this .$echarts.init(document.getElementById( "myPie" )); //饼状图

let myBar = this .$echarts.init(document.getElementById( "myBar" )); //柱状图

// 饼状图

myPie.setOption({

        tooltip: {

                trigger: "item"

                // formatter: "{a} <br/>{b}: {c} ({d}%)"

         },

        color: [ "#32CD32" , "#63B8FF" , " #EE4000" ],

        legend: {

               bottom: 10 ,

                left: "center" ,

                data: [ "总收入" , "总支出" , "收支差额" ]

        },

        series: [

            {

                type: "pie" ,

                radius: "65%" ,

                center: [ "50%" , "50%" ],

                selectedMode: "single" ,

                label: {

                   normal: {

                            position: "inner" ,

                            // show: false,

                            formatter: "￥{c}" //自定义显示格式(b:name, c:value, d:百分比)

                    }

                },

                data: [

                    { value: this .revenueExpenditure.totalRevenue, name: "总收入" },

                    {value: this .revenueExpenditure.totalExpenditure, name: "总支出" },

                     {value: this .revenueExpenditure.revenueExpenditureBalance, name: "收支差额" }

                 ]

          }

       ]

    });

     // 绘制图表柱状图

     myBar.setOption({

            title: { text: "" ,

                     subtext: ""

            },

            tooltip: { show: true },

            //grid 区域是否包含坐标轴的刻度标签

            // grid: { left: "1%", right: "1%", bottom: "4%", containLabel: true },

           xAxis: {

              type: "category" ,

              name: "月份" ,

             data: this .monthNumberLabel

           },

            yAxis: {

                 type: "value" ,

                 splitLine: { show: false }, //改设置不显示坐标区域内的y轴分割线

                  name: "收入（元）"

                 // data:this.monthRevenue

           },

          series: [

                {

                   type: "bar" ,

                    itemStyle: {

                    normal: { color: "#CCCCCC" }

                    // label:{show:true,formatter:function(){return }}

                },

           emphasis: {

                shadowBlur: 40 ,

                shadowOffsetX: 10 ,

                shadowColor: "rgba(0, 0, 0, 0.5)"

            },

            data: this .monthRevenue

     } ],

    label: {

        //以下为是否显示，显示位置和显示格式的设置了

        show: true , //开启显示

        position: "top" , //在上方显示

        formatter: "￥{c}" ,

        textStyle: {

            //数值样式

            color: "red" ,

            fontSize: 16

        }

    }

  });

},

//计算属性

              computed: {

                      monthNumberLabel: function () {

                                  let result = [];

                                  if ( this .monthNumber) {

                                          this .monthNumber.forEach(x => {

                                             result.push(x + "月" );

                                        });

                                    }

                                   return result;

                             }

                       }

                   }

   }

</script>