A. Vue中使用ECharts,根據父級DIV及窗口自適應圖表,數據驅動圖表
方法,使用ECharts自帶API (resize)配合VUE自定義輪詢命令飢敗飢
一、模板部分
二、js部爛返分
三、Vue自定義枯晌輪詢命令v-resize
希望對需要使用ECharts圖表的同志有所幫助.
也希望各位大佬提出我的不足,感謝
B. Vue+Echarts 實現自定義折線圖組件
網上Vue結合Echarts使用的例子少之又少，而且數據都寫好在組件內且不可復用
本文基於 Vue.js高仿餓了么外賣App ，在商家頁面添加一個簡易的可交互的平滑折線圖
Chrome調試模擬手機端操作效果：
</br>
我將拆分為兩個部分，標題和三個選擇框寫在當前頁面seller.vue中，將配置折線圖的樣式都寫在父組件seller.vue里，折線圖則抽象化為可復用的組件。
</br>
模擬一份JSON格式的 折線圖xy坐標軸數據 chartData ，其中分了日、周、月這三組數據。
** data.json：**
</br>
在 webpack 的 dev-sever.js 中讀取模擬好的 chartData 數據，然後新增個介面apiRoutes，當服務端收到請求以後，返回給客戶端 chartData
** dev-sever.js：**
</br>
Hello.vue向伺服器請求並獲取 chartData
Hello.vue：
</br>
seller.vue 中寫好標題和三個選擇框的樣式
props 接收從 Hello.vue 傳來的xy坐標軸數據 chartData
傳入 chart.vue 將要接收的數據，impData 為 chartData 中的一組數據，setData 為自定義折線圖樣式的數據。
select(type) 方法是點擊選擇框高亮，並把 impData 賦值為 chartData 中對應的一組數據
** seller.vue ：**
</br>
chart.vue組件中
prop 接收父組件 seller.vue 的傳來的 impChartData 和 setChartData
watch 觀察 impChartData 數據的變化，因為父組件點擊選擇框會改變傳入的數據，這里相應的改變數據，並渲染新的折線圖
drawLine(xData, yData, xAxisColor, lineColor, grid) 是繪制折線圖樣式的主體，我提取出了五個屬性值作為參數，
分別是x坐標軸數據、y坐標軸數據、x坐標軸指示器的顏色、折線線條的顏色、直角坐標系內繪圖網格，
分別獲取自 this.impChartData.xData、 this.impChartData.yData、 this.setChartData.xAxisColor、 this.setChartData.lineColor、 this.setChartData.grid
Echarts的 配置項 很多，如果想自定義更加個性化的樣式，比如多條折線、兩個x軸坐標，都可以設置為參數。
GitHub 上已經有達人做了幾張圖的基本模板 v-charts ，很方便就是可配置項比較少。
chart.vue：
</br>
參考文檔：
Echarts 配置項
C. vue使用Echarts4.X及5.0版本坑
之前的項目中一直用的是4.7.0及4.8.0版本的Echarts。引入的方式無非是全局引入和按需引入兩種
main.js中頌兆引入
按需引入新建個李爛myecharts.js
後來，新建了個項目，由於沒有裝Echarts就重新cnpm install echarts -S
寫頁面的時候無論如何柱狀圖表也出不來。對比了下原來是版本不一樣，新項目裝上了5.0版本。
研究了半天才找見是版本的問題。怎麼解決呢。要不降級
要不改引入方哪櫻漏法，因為之前的方法引入不可用了，echarts的源碼變了，不再支持「從'echarts/lib/echarts'導入echarts」，改用「import*as echarts from'echarts/lib/echarts'」
好了。記錄下自己的踩坑之旅。
D. 使用的是vue2.0，請問.vue文件中如何使用echarts
main.js
import echarts from "echarts"
A.vue
HTML
<div id="charts">
<div id="main" :style="{width:'600px',height:'400px'}"></div>
</div>
javascript
export default{
data (){
return {
msg:"123"
}
},
mounted (){
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
E. 在vue中 echarts 柱狀圖調後台介面
1.安裝echarts依賴
npm install echarts -S 或cnpm install echarts -S
2.全局引用
// main.js引入echarts
import echarts from 'echarts' //有時語法報錯 或使用 import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.創建組件
<template>
<div id="echarts">
<div >
<div>
<div id="myChart" :style="{ width: 骰px', height: 馄px' }"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getarrival } from '@/api/proct' //調用後台介面
export default {
name: 'Echarts',
data() {
return {
dataList: [],
obj:{
id:1
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
getarrival(this.obj).then((res) => {
this.dataList = res.data.data.arrivel_later_result.bar //介面返回數據罩散賦值物老氏this.dataList
// 基於准備好的dom，初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'))
// 繪制圖表
myChart.setOption({
title: {
text: this.dataList.title.text,
subtext: this.dataList.title.subtext,
left: this.dataList.title.left
},
grid: {
left: Ɖ%',
right: Ɗ%',
bottom: Ɖ%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: this.dataList.xAxis.data
},
yAxis: {
type: 'value'
// boundaryGap: [0, 0.01]
},
series: [
{
name: '遲到佔比',
type: 'bar',
barWidth: 30, //柱圖寬度
data: this.dataList.series[0].data
}
]
})
})
},
}
}
</script>
<style scoped>
</style>
4.效含肢果實現
F. 在vue 中使用百度echarts
前言：在vue2.0中使用 網路echarts 有三種解決方案。
這樣每次都要獲取圖表dom元素 然後通過setOption渲染數據，最後在mounted中初始化棗明。很麻煩。
vue-echarts 是ECharts 的 Vue.js 組件，基於 ECharts v4.1.0 + 開發，依賴 Vue.js v2.2.6 +，意思就是可以直接把echarts實例當中vue中的組件來使用，不用每次都獲取dom、掛在dom，輕檔岩廳松使用echarts的所用功能。。。
v-charts 是基於vue2二次封裝的圖表組件行隱庫，功能沒有echarts多 但也夠用了，官網很詳細，這里用一個官網例子說明問題。
以上，可跟據需求選用，如果需求簡單可直接用 v-charts
G. vue.js中使用echarts實現數據動態刷新功能
在vue使用echarts時，可能會遇到這樣的問題，就是數據變化時，echarts不更新
這是因為Echarts是數據驅動的，這意味著只要我們重新設置數據，那麼圖表就會隨之重新渲染
如果想要支持數據的自動刷新，必然需要一個監聽信洞攔器能夠實時監聽到數據滑胡的變化然後告知Echarts重新設置數顫蔽據。
Vue提供了「watch」：
H. 在Vue中使用echarts
由於在項目中需要對數據進行可視化處理，也就是用圖表展示，眾所周知echarts是非常強大的插件。一開始想在網上找一個基於vue封裝好的（懶譽李省事），eg:vue-echarts ，但是拉取下來發現，跟項目中使用的類型有點偏差，而且他們的數據大多都是定製好的，我很難在此基礎上進行更改（惹不起），於是選擇了放棄，最終還是選擇echarts。以下是我使用的一些心得體會~
我的示例是在vue-cli搭建
首先需要全局引入
在main.js中
在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
注意：我們要在mounted生命周期函數中實例化echarts對象。因為我們要確保dom元素已經掛載到頁面中
這樣一個簡單的圖表就完成了，是不是慶如遲覺得很簡單？假如在一個大型的項目中，而且數據是非常復雜的？那麼該如何操作？
由於全局引入會將所有的echarts圖表打包，導致體積過大
在Echarts.vue文件中
使用 require 而不是 import
基於前面的疑問，加上實際運用到項目中遇到的一些問題，我思考使用組件的形式。
從上邊可以看出，你每次在使用echarts的時候，都必須要重復的引入，這樣很不方便
vue作為一個組件化開發的框架，我們可以使用組件的方式進行集成。每次我們引入組件，進行使用，這樣就方便的多。
下面是一個我自己對echarts進行的一個簡單的vue組件的集成。
在echarts中
子組件：
props部分是我接收到的參數，父組件獲取數據分發橡搭，data是父組件分發給echarts的數據源。
父組件：
如果在大型的項目，而且圖表又非常的多，那麼vuex少不了。如果把數據集中存儲到了vuex中，echarts組件再從vuex中獲取數據，我們也能隨時保存獲取的結果，對這些數據可以添加收藏也可以加入緩存中，下次再請求可以先從緩存調用。接下來會繼續分享vuex的使用~~~
I. 使用的是vue2.0，請問.vue文件中如何使用echarts
main.js
import echarts from "echarts"
A.vueHTML
<div id="charts">
<div id="main" :style="{width:'600px',height:'400px'}"></div>
</div>
javascript
export default{
data (){
return {
msg:"123"
}
},
mounted (){
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: 'ECharts 入門示例褲顫基' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫"洞大,"褲子","高跟鞋胡謹","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
J. 在vue裡面引入echarts（柱狀圖，餅圖，折線圖））
1.安裝echarts
npm install echarts -S
2.在main.js中引用echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.封裝chart組件(復制粘貼就好了)
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="bar" style="width: 600px;height:400px;"></div>
<div id="pie" style="width: 600px;height:400px;"></div>
<div id="line"並兆 style="width: 600px;height:400px;"></div>
在script裡面寫下面內容
export default{
mounted(){
this.drawLine();//調用這個方法
},
methods:{
drawLine () {
var echarts = require('echarts');
var barChart = echarts.init(document.getElementById('bar'));
var pieChart = echarts.init(document.getElementById('pie'));
var lineChart = echarts.init(document.getElementById('line'));
barChart.setOption({
title: {
text: '行鬧柱狀圖'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["肉夾饃", "饅頭", "豆沙包", "粉絲湯", "豆包", "油條"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
pieChart.setOption({
title: {
text: '餅圖'
},
series: [{
name: '訪問來源',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
data: [ // 數據數組，name 為數據項名稱，value 為數據項值
{
value: 235,
name: '視頻廣告'
},
{
value: 274,
name: '聯盟廣告'
},
{
value: 310,
name: '郵件營銷'
},
{
value: 335,
name: '直接訪問'
},
{
value: 400,
name: '搜索引擎'
}
]
}]
});
lineChart.setOption({
title: {
text: '折線圖',
},
tooltip: {},
legend: {
data: ['銷量', '試穿', '退貨檔蔽罩'],
x: 'right'
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '試穿',
type: 'line',
data: [30, 40, 50, 20, 12, 30]
}, {
name: '退貨',
type: 'line',
data: [1, 2, 1, 3, 5, 2]
}]
});
}
}
}