就如我在 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傳送門----記得你們的小星星啊