ops
/
jump-web
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add echarts examples

master
taylor 9 years ago
parent
ca8fe545db
commit
f536767c95
19 changed files with 263 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/index.html
  2. 1
      dist/static/css/app.3ea7fe31eb086ca151ec27f10bac96ab.css.map
  3. 4
      dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css
  4. 1
      dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css.map
  5. 2
      dist/static/js/app.70d7d8998416b892b65f.js
  6. 1
      dist/static/js/app.70d7d8998416b892b65f.js.map
  7. 2
      dist/static/js/app.db48dc6e1f98478901ed.js
  8. 1
      dist/static/js/app.db48dc6e1f98478901ed.js.map
  9. 2
      dist/static/js/manifest.2136b0a9b21fdd409c6e.js
  10. 2
      dist/static/js/manifest.f3b6a946c034792f7a68.js
  11. 2
      dist/static/js/manifest.f3b6a946c034792f7a68.js.map
  12. 67
      dist/static/js/vendor.26a7220dc2fbfce51280.js
  13. 1
      dist/static/js/vendor.26a7220dc2fbfce51280.js.map
  14. 33
      dist/static/js/vendor.ebbf7765a7035881a57f.js
  15. 1
      dist/static/js/vendor.ebbf7765a7035881a57f.js.map
  16. 1
      package.json
  17. 3
      src/components/Home.vue
  18. 179
      src/components/charts/echarts.vue
  19. 12
      src/main.js

2
dist/index.html
View File

@ -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>

1
dist/static/css/app.3ea7fe31eb086ca151ec27f10bac96ab.css.map
File diff suppressed because it is too large
View File

4
dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css
File diff suppressed because it is too large
View File

1
dist/static/css/app.641bf9e17f010d14106aa37ba6563788.css.map
File diff suppressed because it is too large
View File

2
dist/static/js/app.70d7d8998416b892b65f.js
File diff suppressed because it is too large
View File

1
dist/static/js/app.70d7d8998416b892b65f.js.map
File diff suppressed because it is too large
View File

2
dist/static/js/app.db48dc6e1f98478901ed.js
File diff suppressed because it is too large
View File

1
dist/static/js/app.db48dc6e1f98478901ed.js.map
File diff suppressed because it is too large
View File

2
dist/static/js/manifest.2136b0a9b21fdd409c6e.js
View File

@ -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

2
dist/static/js/manifest.f3b6a946c034792f7a68.js
View File

@ -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

2
dist/static/js/manifest.f3b6a946c034792f7a68.js.map
File diff suppressed because it is too large
View File

67
dist/static/js/vendor.26a7220dc2fbfce51280.js
File diff suppressed because it is too large
View File

1
dist/static/js/vendor.26a7220dc2fbfce51280.js.map
File diff suppressed because it is too large
View File

33
dist/static/js/vendor.ebbf7765a7035881a57f.js
File diff suppressed because it is too large
View File

1
dist/static/js/vendor.ebbf7765a7035881a57f.js.map
File diff suppressed because it is too large
View File

1
package.json
View File

@ -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",

3
src/components/Home.vue
View File

@ -180,6 +180,9 @@
float: right;
margin-right: 20px;
padding-top: 5px;
}
.tip-logout i {
cursor: pointer;
}

179
src/components/charts/echarts.vue
View File

@ -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>

12
src/main.js
View File

@ -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' }
]
}
]

Write Preview
Loading…
Cancel
Save