vue+element-ui+echarts 項目搭建

1，  環境搭建

　　1.1，        Node環境

　　　　　　　　官方下載node

　　　　　　　　檢查安裝情況

　　　　　　　　node –v

　　　　　　　　npm –v

　　1.2，        安裝cnpm

       　　    npm install –g cnpm --registry=https://registry.npm.taobao.org

　　1.3，        安裝vue-cli

　　　　　　cnpm install vue-cli -g

2，  項目構建

　　vue init webpack ‘project-name’

　　創建成功后，進入項目根目錄，初始化項目並運行

　　　

　cnpm install

　cnpm run dev

 

 　　

　　

              

 

 

 

 

 

3，  查看項目目錄

 　　　　

 

 

 

4，  創建頁面相關文件夾

　　　　/src/page

　　　　內部創建頁面文件

　　　　　　/src/page/index.vue

             　　 /src/page/ele.vue

　　　　配置路由 /src/router/index.js

             

 

 

 

        

5，  引入echarts

     　　安裝：cnpm install echarts –S

 

　　5.1全局引入

 

　　進入/src/main.js

　　　　

import echarts from 'echarts'

Vue.config.productionTip = false

Vue.prototype.$echarts = echarts

 

 

 

　　　　具體使用：

  

<div id="echartsId"></div>

 下方echarts的具體配置，可以官網，直接復制官網內的配置

mounted(){
let myChart = this.$echarts.init(document.getElementById('echartsId'))

      myChart.setOption(

      {

        tooltip: {

            trigger: 'axis',

            axisPointer: {            // 坐標軸指示器，坐標軸觸發有效

                type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'

            }

        },

        legend: {

            data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎', '百度', '谷歌', '必應', '其他']

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis: [

            {

                type: 'category',

                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

            }

        ],

        yAxis: [

            {

                type: 'value'

            }

        ],

        series: [

            {

                name: '直接訪問',

                type: 'bar',

                data: [320, 332, 301, 334, 390, 330, 320]

            },

            {

                name: '郵件營銷',

                type: 'bar',

                stack: '廣告',

                data: [120, 132, 101, 134, 90, 230, 210]

            },

            {

                name: '聯盟廣告',

                type: 'bar',

                stack: '廣告',

                data: [220, 182, 191, 234, 290, 330, 310]

            },

            {

                name: '視頻廣告',

                type: 'bar',

                stack: '廣告',

                data: [150, 232, 201, 154, 190, 330, 410]

            },

            {

                name: '搜索引擎',

                type: 'bar',

                data: [862, 1018, 964, 1026, 1679, 1600, 1570],

                markLine: {

                    lineStyle: {

                        type: 'dashed'

                    },

                    data: [

                        [{type: 'min'}, {type: 'max'}]

                    ]

                }

            },

            {

                name: '百度',

                type: 'bar',

                barWidth: 5,

                stack: '搜索引擎',

                data: [620, 732, 701, 734, 1090, 1130, 1120]

            },

            {

                name: '谷歌',

                type: 'bar',

                stack: '搜索引擎',

                data: [120, 132, 101, 134, 290, 230, 220]

            },

            {

                name: '必應',

                type: 'bar',

                stack: '搜索引擎',

                data: [60, 72, 71, 74, 190, 130, 110]

            },

            {

                name: '其他',

                type: 'bar',

                stack: '搜索引擎',

                data: [62, 82, 91, 84, 109, 110, 120]

            }

        ]

    });
}
 

 

　　

　　5.2 局部引用(進入頁面引入)

　　　　let echarts = require('echarts/lib/echarts')

　　　　// 引入柱狀圖組件

　　　　require('echarts/lib/chart/bar')

　　　　// 引入提示框和title組件

　　　　require('echarts/lib/component/tooltip')

　　　　require('echarts/lib/component/title')

 

 

　　　　同樣直接配置試用，只需注意echarts初始化時的差異

let myChart = echarts.init(document.getElementById('echartsId'))

 

　　

 

 

6，  引用element-ui

　　安裝：

　　cnpm install element-ui –S

 

　　6.1，全局引入（/src/main.js）

   import element from "element-ui";

    import "element-ui/lib/theme-chalk/index.css";

    Vue.use(element);

 

     頁面直接使用即可　

　

 

由於這里使用的是element的layout布局，沒有樣式會看不出來效果，所以加了點樣式和按鈕

.el-row {
  margin-bottom: 20px;
 
}
 .el-row:last-child {
    margin-bottom: 0;
  }
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

　　然后這樣一個框架就搭好了，具體還要使用其他的，大家可以根據自己的需求去安裝

　　（注意：樣式我從官方文檔上復制下來的，里面用了less或者sass，所以直接使用的話，可以按上一個）

　　關於echarts和element-ui的具體使用，大家可以直接去官方文檔查看