淺談echarts在vue裏的實際應用以及v-html綁定

就如我在 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修修改改就成了自己想要的了。

二、圖形呈現

  1. 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

去找到該元素。

  1. css
.echartsContainer {
        width: 100%;
        height: 300px;
    }
  1. 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傳送門----記得你們的小星星啊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章