add echarts examples

8 years ago · f536767c95
19 changed files with 263 additions and 56 deletions
--- a/dist/index.html
+++ b/dist/index.html
@ -1 +1 @@
 <!DOCTYPE html><html><head><meta charset=utf-8><title>vue element admin</title><link href=/vueAdmin/dist/static/css/app.3ea7fe31eb086ca151ec27f10bac96ab.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/vueAdmin/dist/static/js/manifest.2136b0a9b21fdd409c6e.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/vendor.ebbf7765a7035881a57f.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/app.db48dc6e1f98478901ed.js></script></body></html>
 <!DOCTYPE html><html><head><meta charset=utf-8><title>vue element admin</title><link href=/vueAdmin/dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/vueAdmin/dist/static/js/manifest.f3b6a946c034792f7a68.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/vendor.26a7220dc2fbfce51280.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/app.70d7d8998416b892b65f.js></script></body></html>
--- a/dist/static/css/app.3ea7fe31eb086ca151ec27f10bac96ab.css.map
+++ b/dist/static/css/app.3ea7fe31eb086ca151ec27f10bac96ab.css.map
--- a/dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css
+++ b/dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css
--- a/dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css.map
+++ b/dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css.map
--- a/dist/static/js/app.70d7d8998416b892b65f.js
+++ b/dist/static/js/app.70d7d8998416b892b65f.js
--- a/dist/static/js/app.70d7d8998416b892b65f.js.map
+++ b/dist/static/js/app.70d7d8998416b892b65f.js.map
--- a/dist/static/js/app.db48dc6e1f98478901ed.js
+++ b/dist/static/js/app.db48dc6e1f98478901ed.js
--- a/dist/static/js/app.db48dc6e1f98478901ed.js.map
+++ b/dist/static/js/app.db48dc6e1f98478901ed.js.map
--- a/dist/static/js/manifest.2136b0a9b21fdd409c6e.js
+++ b/dist/static/js/manifest.2136b0a9b21fdd409c6e.js
@ -1,2 +0,0 @@
 !function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,s){for(var c,i,p=0,l=[];p<o.length;p++)i=o[p],a[i]&&l.push.apply(l,a[i]),a[i]=0;for(c in s)e[c]=s[c];for(n&&n(o,s);l.length;)l.shift().call(null,t);if(s[0])return r[0]=0,t(0)};var r={},a={0:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+"static/js/"+e+"."+{1:"ebbf7765a7035881a57f",2:"db48dc6e1f98478901ed"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p="/vueAdmin/dist/"}([]);
 //# sourceMappingURL=manifest.2136b0a9b21fdd409c6e.js.map
--- a/dist/static/js/manifest.f3b6a946c034792f7a68.js
+++ b/dist/static/js/manifest.f3b6a946c034792f7a68.js
@ -0,0 +1,2 @@
 !function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(c,o){for(var s,i,p=0,l=[];p<c.length;p++)i=c[p],a[i]&&l.push.apply(l,a[i]),a[i]=0;for(s in o)e[s]=o[s];for(n&&n(c,o);l.length;)l.shift().call(null,t);if(o[0])return r[0]=0,t(0)};var r={},a={0:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.src=t.p+"static/js/"+e+"."+{1:"26a7220dc2fbfce51280",2:"70d7d8998416b892b65f"}[e]+".js",r.appendChild(c)}},t.m=e,t.c=r,t.p="/vueAdmin/dist/"}([]);
 //# sourceMappingURL=manifest.f3b6a946c034792f7a68.js.map
--- a/dist/static/js/manifest.f3b6a946c034792f7a68.js.map
+++ b/dist/static/js/manifest.f3b6a946c034792f7a68.js.map
--- a/dist/static/js/vendor.26a7220dc2fbfce51280.js
+++ b/dist/static/js/vendor.26a7220dc2fbfce51280.js
--- a/dist/static/js/vendor.26a7220dc2fbfce51280.js.map
+++ b/dist/static/js/vendor.26a7220dc2fbfce51280.js.map
--- a/dist/static/js/vendor.ebbf7765a7035881a57f.js
+++ b/dist/static/js/vendor.ebbf7765a7035881a57f.js
--- a/dist/static/js/vendor.ebbf7765a7035881a57f.js.map
+++ b/dist/static/js/vendor.ebbf7765a7035881a57f.js.map
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "build": "node build/build.js"
  },
  "dependencies": {
    "echarts": "^3.3.2",
    "flex.css": "^1.1.6",
    "nprogress": "^0.2.0",
    "vue": "^2.0.7",
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@ -180,6 +180,9 @@
 		float: right;
 		margin-right: 20px;
 		padding-top: 5px;
 	}
 	.tip-logout i {
 		cursor: pointer;
 	}
--- a/src/components/charts/echarts.vue
+++ b/src/components/charts/echarts.vue
@ -1,23 +1,44 @@
 <template>
    <section>
        <div id="charts">
            <div id="main" :style="{width:'600px',height:'400px'}"></div>
        </div>
    <section class="chart">
        <el-row>
            <el-col :span="12">
                <div id="chartColumn" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartBar" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartPie" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
 </template>
 <script>
    import echarts from "echarts"
    import echarts from 'echarts'
    export default{
        data (){
            return {
                msg:"123"
                chartColumn:null,
                chartBar:null,
                chartLine:null,
                chartPie:null
            }
        },
        mounted (){
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                title: { text: 'ECharts 入门示例' },
        mounted:function(){
            var _this=this;
            //基于准备好的dom，初始化echarts实例
            this.chartColumn = echarts.init(document.getElementById('chartColumn'));
            this.chartBar = echarts.init(document.getElementById('chartBar'));
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            this.chartPie = echarts.init(document.getElementById('chartPie'));
            this.chartColumn.setOption({
                title: { text: 'Column Chart' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
@ -29,11 +50,149 @@
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
            this.chartBar.setOption({
                title: {
                    text: 'Bar Chart',
                    subtext: '数据来自网络'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2011年', '2012年']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
                },
                series: [
                    {
                        name: '2011年',
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    },
                    {
                        name: '2012年',
                        type: 'bar',
                        data: [19325, 23438, 31000, 121594, 134141, 681807]
                    }
                ]
            });
            this.chartLine.setOption({
                title: {
                    text: 'Line Chart'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['邮件营销','联盟广告','搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'邮件营销',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'联盟广告',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'搜索引擎',
                        type:'line',
                        stack: '总量',
                        data:[820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            });
            this.chartPie.setOption({
                title : {
                    text: 'Pie Chart',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    }
 </script>
 <style scoped>
    .chart {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/
    .el-col {
        padding: 30px 20px;
    }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -18,6 +18,7 @@ import Page3 from './components/nav1/Page3.vue'
 import Page4 from './components/nav2/Page4.vue'
 import Page5 from './components/nav2/Page5.vue'
 import Page6 from './components/nav3/Page6.vue'
 import echarts from './components/charts/echarts.vue'
 Vue.use(ElementUI)
 Vue.use(VueRouter)
@ -56,11 +57,20 @@ const routes = [
    path: '/',
    component: Home,
    name: '',
    iconCls: 'fa fa-line-chart',
    iconCls: 'fa fa-address-card',
    leaf: true,//只有一个节点
    children: [
      { path: '/page6', component: Page6, name: '导航三' }
    ]
  },
  {
    path: '/',
    component: Home,
    name: 'Charts',
    iconCls: 'fa fa-bar-chart',
    children: [
      { path: '/echarts', component: echarts, name: 'echarts' }
    ]
  }
 ]