Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_38335589
uni-app
提交
89e29c36
U
uni-app
项目概览
weixin_38335589
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
89e29c36
编写于
11月 07, 2018
作者:
X
xiaoyucoding
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: 优化 ECharts 示例
上级
e141bb43
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
162 addition
and
157 deletion
+162
-157
examples/hello-uniapp/pages/template/echarts/echarts.vue
examples/hello-uniapp/pages/template/echarts/echarts.vue
+162
-157
未找到文件。
examples/hello-uniapp/pages/template/echarts/echarts.vue
浏览文件 @
89e29c36
<
template
>
<div
class=
"container"
>
<view
class=
"page-section-title"
style=
"display: block;"
>
<text>
这是uni-app集成mpvue-echarts的图表示例,mpvue-echarts组件的用法参考:
</text>
<text
class=
"navigate"
@
tap=
"goBrowser"
selectable
>
https://github.com/F-loat/mpvue-echarts
</text>
</view>
<view
class=
"canvasView"
>
<view
class=
"title"
>
饼图示例
</view>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"pieInit"
canvasId=
"pie"
/>
</view>
<view
class=
"canvasView"
>
<view
class=
"title"
>
折线图示例
</view>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"lineInit"
canvasId=
"line"
/>
</view>
</div>
<div
class=
"container"
>
<view
class=
"page-section-title"
style=
"display: block;"
>
<text>
这是uni-app集成mpvue-echarts的图表示例,mpvue-echarts组件的用法参考:
</text>
<text
class=
"navigate"
@
tap=
"goBrowser"
selectable
>
https://github.com/F-loat/mpvue-echarts
</text>
</view>
<view
class=
"canvasView"
>
<view
class=
"title"
>
饼图示例
</view>
<button
type=
"primary"
size=
"mini"
@
click=
"updatePie"
>
修改饼状图数据
</button>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"pieInit"
canvasId=
"pie"
ref=
"pieChart"
/>
</view>
<view
class=
"canvasView"
>
<view
class=
"title"
>
折线图示例
</view>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"lineInit"
canvasId=
"line"
ref=
"lineChart"
/>
</view>
</div>
</
template
>
<
script
>
import
*
as
echarts
from
'
../../../components/echarts/echarts.simple.min.js
'
;
import
mpvueEcharts
from
'
../../../components/mpvue-echarts/src/echarts.vue
'
;
import
*
as
echarts
from
'
../../../components/echarts/echarts.simple.min.js
'
;
import
mpvueEcharts
from
'
../../../components/mpvue-echarts/src/echarts.vue
'
;
function
getPieOption
()
{
return
{
animation
:
false
,
backgroundColor
:
'
#F8F8F8
'
,
color
:
[
'
#37A2DA
'
,
'
#32C5E9
'
,
'
#67E0E3
'
,
'
#91F2DE
'
,
'
#FFDB5C
'
,
'
#FF9F7F
'
],
series
:
[{
label
:
{
normal
:
{
fontSize
:
14
}
},
type
:
'
pie
'
,
center
:
[
'
50%
'
,
'
50%
'
],
radius
:
[
0
,
'
60%
'
],
data
:
[{
value
:
55
,
name
:
'
北京
'
},
{
value
:
20
,
name
:
'
武汉
'
},
{
value
:
10
,
name
:
'
杭州
'
},
{
value
:
20
,
name
:
'
广州
'
},
{
value
:
38
,
name
:
'
上海
'
}],
itemStyle
:
{
emphasis
:
{
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowColor
:
'
rgba(0, 2, 2, 0.3)
'
}
}
}]
}
}
let
pieOption
=
{
animation
:
false
,
backgroundColor
:
'
#F8F8F8
'
,
color
:
[
'
#37A2DA
'
,
'
#32C5E9
'
,
'
#67E0E3
'
,
'
#91F2DE
'
,
'
#FFDB5C
'
,
'
#FF9F7F
'
],
series
:
[{
label
:
{
normal
:
{
fontSize
:
14
}
},
type
:
'
pie
'
,
center
:
[
'
50%
'
,
'
50%
'
],
radius
:
[
0
,
'
60%
'
],
data
:
[{
value
:
55
,
name
:
'
北京
'
},
{
value
:
38
,
name
:
'
上海
'
},
{
value
:
20
,
name
:
'
广州
'
},
{
value
:
10
,
name
:
'
杭州
'
}],
itemStyle
:
{
emphasis
:
{
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowColor
:
'
rgba(0, 2, 2, 0.3)
'
}
}
}]
};
function
getLineOption
()
{
return
{
animation
:
false
,
color
:
[
'
#37A2DA
'
,
'
#9FE6B8
'
],
legend
:
{
data
:
[
'
蒸发量
'
,
'
降水量
'
]
},
grid
:
{
x
:
35
,
x2
:
10
,
y
:
30
,
y2
:
25
},
calculable
:
false
,
xAxis
:
[{
type
:
'
category
'
,
data
:
[
'
1月
'
,
'
2月
'
,
'
3月
'
,
'
4月
'
,
'
5月
'
,
'
6月
'
,
'
7月
'
,
'
8月
'
,
'
9月
'
,
'
10月
'
,
'
11月
'
,
'
12月
'
]
}],
yAxis
:
[{
type
:
'
value
'
,
splitArea
:
{
show
:
true
}
}],
series
:
[{
name
:
'
蒸发量
'
,
type
:
'
line
'
,
data
:
[
2.0
,
4.9
,
7.0
,
23.2
,
25.6
,
76.7
,
135.6
,
162.2
,
32.6
,
20.0
,
6.4
,
3.3
]
},
{
name
:
'
降水量
'
,
type
:
'
line
'
,
data
:
[
2.6
,
5.9
,
9.0
,
26.4
,
28.7
,
70.7
,
175.6
,
182.2
,
48.7
,
18.8
,
6.0
,
2.3
]
}]
}
}
let
lineOption
=
{
animation
:
false
,
color
:
[
'
#37A2DA
'
,
'
#9FE6B8
'
],
grid
:
{
x
:
35
,
x2
:
10
,
y
:
30
,
y2
:
25
},
calculable
:
false
,
xAxis
:
[{
type
:
'
category
'
,
data
:
[
'
1月
'
,
'
2月
'
,
'
3月
'
,
'
4月
'
,
'
5月
'
,
'
6月
'
,
'
7月
'
,
'
8月
'
,
'
9月
'
,
'
10月
'
,
'
11月
'
,
'
12月
'
]
}],
yAxis
:
[{
type
:
'
value
'
,
splitArea
:
{
show
:
true
}
}],
series
:
[{
name
:
'
蒸发量
'
,
type
:
'
line
'
,
data
:
[
2.0
,
4.9
,
7.0
,
23.2
,
25.6
,
76.7
,
135.6
,
162.2
,
32.6
,
20.0
,
6.4
,
3.3
]
},
{
name
:
'
降水量
'
,
type
:
'
line
'
,
data
:
[
2.6
,
5.9
,
9.0
,
26.4
,
28.7
,
70.7
,
175.6
,
182.2
,
48.7
,
18.8
,
6.0
,
2.3
]
}]
};
export
default
{
data
()
{
return
{
echarts
,
pieInit
:
function
(
canvas
,
width
,
height
)
{
let
pieChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
pieChart
)
export
default
{
data
()
{
return
{
echarts
:
echarts
,
updateStatus
:
false
}
},
methods
:
{
goBrowser
()
{
// #ifdef APP-PLUS
plus
.
runtime
.
openURL
(
'
https://github.com/F-loat/mpvue-echarts
'
);
// #endif
// #ifdef MP-WEIXIN
uni
.
showModal
({
content
:
'
请复制链接在浏览器里打开
'
,
showCancel
:
false
})
// #endif
},
updatePie
()
{
// 参考 mpvue-charts 的懒加载示例
// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue
pieChart
.
setOption
(
getPieOption
())
return
pieChart
},
lineInit
:
function
(
canvas
,
width
,
height
)
{
let
lineChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
lineChart
)
if
(
this
.
updateStatus
)
{
return
;
}
pieOption
.
series
[
0
].
data
.
push
({
value
:
20
,
name
:
'
武汉
'
});
this
.
$refs
.
pieChart
.
init
();
},
pieInit
(
canvas
,
width
,
height
)
{
let
pieChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
pieChart
)
lineChart
.
setOption
(
getLineOption
())
return
lineChart
}
}
},
methods
:
{
goBrowser
()
{
// #ifdef APP-PLUS
plus
.
runtime
.
openURL
(
"
https://github.com/F-loat/mpvue-echarts
"
);
// #endif
// #ifdef MP-WEIXIN
uni
.
showModal
({
content
:
"
请复制链接在浏览器里打开
"
,
showCancel
:
false
})
// #endif
}
},
components
:
{
mpvueEcharts
}
}
pieChart
.
setOption
(
pieOption
)
return
pieChart
},
lineInit
(
canvas
,
width
,
height
)
{
let
lineChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
lineChart
)
lineChart
.
setOption
(
lineOption
)
return
lineChart
}
},
components
:
{
mpvueEcharts
}
}
</
script
>
<
style
>
page
,
view
{
display
:
flex
;
/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。如不了解flex布局,请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page
,
view
{
display
:
flex
;
/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。如不了解flex布局,请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page
{
min-height
:
100%
;
}
page
{
min-height
:
100%
;
}
.title
{
margin-left
:
30
upx
;
color
:
#8f8f94
;
}
.title
{
margin-left
:
30
upx
;
color
:
#8f8f94
;
}
.container
{
padding-bottom
:
30
upx
;
box-sizing
:
border-box
;
}
.container
{
padding-bottom
:
30
upx
;
box-sizing
:
border-box
;
}
.container
,
.canvasView
{
flex
:
1
;
flex-direction
:
column
;
}
.container
,
.canvasView
{
flex
:
1
;
flex-direction
:
column
;
}
.navigate
{
color
:
#007AFF
;
}
</
style
>
.navigate
{
color
:
#007AFF
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录