淺談echarts在vue裡的實際應用以及v-html繫結
阿新 • • 發佈：2019-01-14
就如我在 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傳送門----記得你們的小星星啊