Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
良好的行为成为习惯
uni-app
提交
83ac56cd
U
uni-app
项目概览
良好的行为成为习惯
/
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,发现更多精彩内容 >>
提交
83ac56cd
编写于
11月 11, 2018
作者:
X
xiaoyucoding
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
modify: ECharts 示例新增动态修改数据的操作
上级
03dc2167
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
125 addition
and
104 deletion
+125
-104
examples/hello-uniapp/pages/template/echarts/echarts.vue
examples/hello-uniapp/pages/template/echarts/echarts.vue
+125
-104
未找到文件。
examples/hello-uniapp/pages/template/echarts/echarts.vue
浏览文件 @
83ac56cd
<
template
>
<
view
class=
"container"
>
<view
style=
"display: block; padding:30upx
;"
>
<
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>
<text
class=
"navigate"
@
click
=
"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
class=
"canvas-bar"
>
<view
class=
"title"
>
饼图示例
</view>
<button
class=
"update-btn"
type=
"primary"
size=
"mini"
@
click=
"updatePie"
>
修改饼状图数据
</button>
</view>
<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"
/>
<mpvue-echarts
:echarts=
"echarts"
:onInit=
"lineInit"
canvasId=
"line"
ref=
"lineChart"
/>
</view>
</
view
>
</
div
>
</
template
>
<
script
>
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
}
}]
}
}
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月
'
]
type
:
'
pie
'
,
center
:
[
'
50%
'
,
'
50%
'
],
radius
:
[
0
,
'
60%
'
],
data
:
[{
value
:
55
,
name
:
'
北京
'
},
{
value
:
38
,
name
:
'
上海
'
},
{
value
:
20
,
name
:
'
广州
'
}],
yAxis
:
[{
type
:
'
value
'
,
splitArea
:
{
show
:
true
itemStyle
:
{
emphasis
:
{
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowColor
:
'
rgba(0, 2, 2, 0.3)
'
}
}],
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
)
pieChart
.
setOption
(
getPieOption
())
return
pieChart
},
lineInit
:
function
(
canvas
,
width
,
height
)
{
let
lineChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
lineChart
)
lineChart
.
setOption
(
getLineOption
())
return
lineChart
}
echarts
:
echarts
,
updateStatus
:
false
}
},
methods
:
{
goBrowser
()
{
// #ifdef APP-PLUS
plus
.
runtime
.
openURL
(
"
https://github.com/F-loat/mpvue-echarts
"
);
plus
.
runtime
.
openURL
(
'
https://github.com/F-loat/mpvue-echarts
'
);
// #endif
// #ifdef MP-WEIXIN
uni
.
showModal
({
content
:
"
请复制链接在浏览器里打开
"
,
showCancel
:
false
content
:
'
请复制链接在浏览器里打开
'
,
showCancel
:
false
})
// #endif
},
updatePie
()
{
// 参考 mpvue-charts 的懒加载示例
// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue
if
(
this
.
updateStatus
)
{
return
;
}
pieOption
.
series
[
0
].
data
.
push
({
value
:
20
,
name
:
'
武汉
'
});
pieOption
.
series
[
0
].
data
.
push
({
value
:
10
,
name
:
'
杭州
'
});
this
.
$refs
.
pieChart
.
init
();
this
.
updateStatus
=
true
;
},
pieInit
(
canvas
,
width
,
height
)
{
let
pieChart
=
echarts
.
init
(
canvas
,
null
,
{
width
:
width
,
height
:
height
})
canvas
.
setChart
(
pieChart
)
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
:
{
...
...
@@ -155,6 +164,7 @@
.title
{
margin-left
:
30
upx
;
color
:
#8f8f94
;
line-height
:
3
;
}
.container
{
...
...
@@ -171,4 +181,15 @@
.navigate
{
color
:
#007AFF
;
}
</
style
>
.canvas-bar
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
}
.update-btn
{
line-height
:
3
;
margin-right
:
30
upx
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录