vue中vue-schart ： vue.js 的圖表組件或者vue中引入echart圖表

vue-schart 是使用vue.js封裝了sChart.js圖表庫的一個小組件。支持vue.js 1.x & 2.x

安裝

npm install vue-schart --save

在vue組件中使用

• 引入該組件

import Schart from 'vue-schart'

• 註冊該組件

compnents:{ Schart }

• 在template標籤中使用

<schart :canvasId="canvasId" :type="type" :width="width" :data="data" :options="options">
</schart>

• 圖表中的數據

// bar表示的是柱狀圖 //只能使用name和value。name爲座標的標識，value爲當前數據的數量
data(){ return { canvasId: 'myCanvas', type: 'bar', width: 600, height: 500, data: [ {name: '這'，value: 1}, {name: '是'，value: 2}, {name: '一'，value: 3}, {name: '個'，value: 4}, {name: '例'，value: 5}, {name: '子'，value: 6} ], //可選參數
 options: { title: 'Total sales of stores in recent years' } } }

• 數據響應 
  數據變化時，從新渲染圖表

methods: { changeData(){ // 整個 data 被從新賦值時
        this.data = [ {name:'短袖', value:1200}, {name:'休閒褲', value:1222}, {name:'連衣裙', value:1283}, {name:'外套', value:1314} ]; // data 裏一個屬性值被修改時
        this.$set(this.data, 1, {name:'短裙',value:500}); } }

vue中vue-schart(圖表組件)的應用：https://blog.csdn.net/hhf235678/article/details/78835299

它的倉庫git地址：https://github.com/lin-xin/vue-schart

 

vue項目中使用echarts圖表

在後臺管理系統中，圖表是一個很廣泛的元素。目前經常使用的圖標插件有 charts,  Echarts, highcharts。此次將介紹 Echarts 在 Vue 項目中的應用。

1、安裝插件

使用 cnpm 安裝 Echarts

cnpm install echarts -S

和以前介紹的 axios 相似，echarts 也不能經過 Vue.use() 進行全局調用

一般是在須要使用圖表的 .vue 文件中直接引入

import echarts from 'echarts'

 

也能夠在 main.js 中引入，而後修改原型鏈

Vue.prototype.$echarts = echarts

而後就能夠全局使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

2、建立圖表

首先須要在 HTML 中建立圖表的容器

須要注意的是，圖表的容器必須指定寬高，也就是說 width，height 不能使用百分比，只能用 px

這樣確實不夠靈活，不過咱們能夠用 js 來改變 width 和 height，使圖表容器可以自適應，具體的實現請日後看

 

而後在 mounted 中建立圖表，具體的配置參考官方文檔，這裏再也不贅述

 5分鐘上手echart。webpack使用echart     http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 

3、按需引入

上面引入的 echarts 包含了全部圖表，但有時候咱們只須要一兩個基本圖表，這時候完整的 echarts 就顯得累贅

假如只須要建立一個餅圖，那麼能夠這麼作：

// 引入基本模板
  let echarts = require('echarts/lib/echarts') // 引入餅圖組件
  require('echarts/lib/chart/pie') // 引入提示框和圖例組件
  require('echarts/lib/component/tooltip') require('echarts/lib/component/legend')

能夠按需引入的模塊列表見 https://github.com/ecomfe/echarts/blob/master/index.js

4、適應容器

上面說過，圖表的容器必須固定寬高，這確實是一個比較反人類的設定

爲了解決這個問題，須要給圖表容器外面再加一個容器，而這個外容器的寬高能夠適應頁面。上面的 <div class=」charts」> 就是這樣的外容器

let chartBox = document.getElementsByClassName('charts')[0] let myChart = document.getElementById('myChart') // 用於使chart自適應高度和寬度,經過窗體高寬計算容器高寬
function resizeCharts () { myChart.style.width = chartBox.style.width + 'px' myChart.style.height = chartBox.style.height + 'px' } // 設置容器高寬
resizeCharts() let mainChart = echarts.init(myChart) mainChart.setOption(options)

當頁面加載的時候，將外容器的寬高，賦給圖表容器

但這只是解決了頁面加載時的自適應問題

若是在頁面加載以後，仍須要圖表自適應寬高，就須要用到 echarts 的媒體查詢

vue項目中使用echarts圖表     https://blog.csdn.net/wojiaomaxiaoqi/article/details/78131542