就如我在 vue与原生app交互之vue工程主动获取请求url里的参数 里说的那样,h5图形化界面是比原生好看和流畅,所以在自己app中也是提议把用户数据展示模块,独立出来用vue构造出来---------于是乎,就用到了Echarts。
大致的效果:
一、echarts的引入
Echarts既可以按需引入,又可以全部引入,在这为了快捷我是全部导入的,以后需求敲定后再作处理。
npm install echarts --save
同样,你也可以把整个echarts.js load下来直接引入。在这献上echarts相关文档
//main.js 中全部导入
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts
vue中的echarts,官方给的demo案例比较少,但是不用慌,可以根据相关demo修修改改就成了自己想要的了。
二、图形呈现
- div
<template>
<div class="month-data-container">
<div ref="echartsContainer" class="echartsContainer"></div>
<div ref="echartsContainerTwo" class="echartsContainer"></div>
</div>
</template>
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上;就是说可以通过
this.$refs.echartsContainer
去找到该元素。
- css
.echartsContainer {
width: 100%;
height: 300px;
}
- script — methods(在这展示了两个图)
<script>
export default {
data() {
return {
}
},
methods: {
//第一个图
draw_pic_one(arg) {
let dayDom = this.$refs.echartsContainer
let myChart = this.$echarts.init(dayDom) //初始化图表
myChart.setOption(arg)
},
//又一个图
draw_pic_two(arg) {
let dayDom = this.$refs.echartsContainerTwo
let myChart = this.$echarts.init(dayDom)
myChart.setOption(arg)
},
user_draw() {
let option2 = {
color: ['#ecac99'],
tooltip : { //是否显示提示框组件,包括提示框浮层和 axisPointer。
trigger: 'axis', //axis 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
title: { //图形title
left: 'center',
text: '',
},
xAxis: { //直角坐标系 grid 中的 x 轴
type: 'category', //category 适用于离散的类目数据
data: ['2018/11/11','2018/11/12','2018/11/13','2018/11/14','2018/11/15','2018/11/16','2018/11/17','2018/11/18','2018/11/19','2018/11/20',
'2018/11/21','2018/11/22','2018/11/23','2018/11/24','2018/11/25','2018/11/26','2018/11/27','2018/11/28','2018/11/29']
},
grid:{// 屏幕位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true , //是否包含坐标轴的刻度标签 true为显示
borderWidth:1 //网格的边框线宽。
},
yAxis: [
{
type: 'value',
name: '睡眠时长',
nameLocation:'center', //坐标轴名称显示位置。
nameGap: 30,//与轴线间距
},
],
dataZoom: [{ //区域缩放,从而能自由关注细节的数据信息
type: 'inside',
start: 0,
end: 100
}, {
start: 0,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [ //每个系列通过 type 决定自己的图表类型
{
name:'',
type:'line',
smooth:false,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: 'rgb(244, 206, 174)'
},
areaStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(244, 206, 174)'
}, {
offset: 1,
color: 'rgb(244, 206, 174)'
}])
},
data: [100,120,112,113,78,79,89,80,98,86,65,87,90,99,88,77,123,112,113]
}
]
}
//给上面两个图设置参数
this.draw_pic_one(option2)
this.draw_pic_two(option2)
}
},
//生命周期方法
mounted() {
// 初始化执行
this.user_draw()
}
}
</script>
这一块是最重要的一部分,也就是说,你可以在script中引入echarts的参数从而构建不同的图表。在代码里编辑了相关参数的意思,详细的文档大家可以参考echarts参数文档。
tip:在此也同时碰到一些其他的问题,简单列举下,碰到的可以参考
1)vue中定义的变量都需要this.变量名寻找,不然总是报not defined;
2)v-html绑定
eg:我在day中自己自定义了一个条块界面,在div动态添加div时,展示出来的是
<div class=‘line’>...</div>
就是说,展示出来的是文字,而不是我想要的图形。所以在这里用到v-html绑定
<template>
<div class="day-data-container">
<top></top>
<!-- 睡眠条 v-html绑定-->
<div id="one" ref="myBox" v-html="divList" >
</div>
</template>
data() {
return {
divList:'' //定义v-html对应的的变量
}
},
//在methods中添加动态方法
addOption(){
var sum =0;
this.jsonStr.forEach((item,index,arr) =>{
sum += parseInt(item.value);
});
this.jsonStr.forEach((item,index,arr) =>{
if(item.id%2==0){
this.divList += "<div class='floatTwo' style='width:"+(item.value*( 100/sum))+"%'></div>";
}
if(item.id%2>0){
this.divList += "<div class='float' style='width:"+(item.value*( 100/sum))+"%'></div>;
}
});
我这是我的需求,如果你只是看绑定样式,你大可以:
data() {
return {
divList:'<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>' //定义v-html对应的的变量
}
},
运行代码,你就可以在界面里看到
1
2
3
4
5
6
,好了,最后献上我本次的vue工程
GitHub传送门----记得你们的小星星啊