vue專案之echarts的整理匯總（持續更新中）
- vue專案之echarts的整理匯總（持續更新中）
- echarts安裝
- 柱狀圖和折線圖
- 餅狀圖
vue專案之echarts的整理匯總（持續更新中）
echarts安裝
這里不多說，npm安裝和按需加載可看官網
獲取 Apache ECharts
npm install echarts -S
柱狀圖和折線圖
上手先看效果，不然無法繼續進行下去，代碼如下
<template>
<div class="page-two">
<baseTitleBar
backgroundColor="#FFF"
:leftEle="leftEle"
:title="title"
titleColor="#000"
></baseTitleBar>
<div id="histogram"></div>
<div id="linechart"></div>
<van-button type="primary" @click="handleHistogramData">更新柱狀圖資料</van-button>
<van-button type="info" @click="handleLinechartData">更新折線圖資料</van-button>
</div>
</template>
<script>
import baseTitleBar from '@/components/titleBar/baseTitleBar'
import * as echarts from 'echarts'
export default {
name: 'index',
components: {
baseTitleBar
},
props: {},
data() {
return {
leftEle: {
iconName: 'iconback',
color: '#000',
fontSize: '.36rem',
method: this.back
},
title: '頁面二',
histogram: null,
linechart: null,
fontSize: 0,
dataNewWeek: [10, 40, 50, 20, 15, 25,30],
dataLastWeek: [5, 20, 36, 10, 30, 20, 10]
}
},
methods: {
// 用于處理自適應時元素的寬高比例大小
handleFontSize(res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
if (!clientWidth) return
this.fontSize = 100 * (clientWidth / 1920)
// console.log(this.fontSize)
return res * this.fontSize
},
// 回傳上一層
back() {
if (this.$getUserAgent() == 0) {
try {
u.native.onBack()
} catch (e) {
this.$router.go(-1)
}
} else {
try {
window.webkit.messageHandlers.onFinish.postMessage('close')
} catch (e) {
this.$router.go(-1)
}
}
},
// 柱狀圖
initHistogram() {
// 這里的判斷是列印臺 There is a chart instance already initialized on the dom！警告
if (this.histogram != null && this.histogram != "" && this.histogram != undefined){
this.histogram.dispose()
}
// 基于準備好的dom，初始化echarts實體
this.histogram = echarts.init(document.getElementById('histogram'))
// 繪制圖表
this.histogram.setOption({
title: {
text: '指標對比'
},
legend: {
orient: 'vertical',
left: 'center',
bottom: 'bottom',
//設定區分（哪條線屬于什么）
data: ['這周', '上周']
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [
{
name: '這周',
type: 'bar',
data: this.dataNewWeek,
barGap: '0%',
barWidth: this.handleFontSize(0.8) // 柱圖寬度
// barWidth : 20, // 柱圖寬度
},
{
name: '上周',
type: 'bar',
data: this.dataLastWeek,
barGap: '0%',
// barWidth : this.fontSize(20), // 柱圖寬度
barWidth: this.handleFontSize(0.8) // 柱圖寬度
// barWidth : 20, // 柱圖寬度
}
]
}, true)
},
// 折線圖
initLinechart() {
// 這里的判斷是列印臺 There is a chart instance already initialized on the dom！警告
if (this.linechart != null && this.linechart != "" && this.linechart != undefined){
this.linechart.dispose()
}
// 基于準備好的dom，初始化echarts實體
this.linechart = echarts.init(document.getElementById('linechart'))
// 指定圖表的配置項和資料
let option = {
title: {
text: '指標對比'
},
tooltip: {
//設定tip提示
trigger: 'axis'
},
legend: {
orient: 'vertical',
left: 'center',
bottom: 'bottom',
//設定區分（哪條線屬于什么）
data: ['這周', '上周']
},
color: ['#8AE09F', '#FA6F53'], //設定區分（每條線是什么顏色，和 legend 一一對應）
xAxis: {
//設定x軸
type: 'category',
boundaryGap: false, //坐標軸兩邊不留白
data: ['10.01', '10.02', '10.03', '10.04', '10.05', '10.06', '10.07'],
// name: 'DATE', //X軸 name
nameTextStyle: {
//坐標軸名稱的文字樣式
color: '#FA6F53',
fontSize: 14,
padding: [0, 0, 0, 10]
},
axisLine: {
//坐標軸軸線相關設定，
lineStyle: {
color: '#FA6F53'
}
},
axisLabel: {
interval: 0
// rotate: 50
}
},
yAxis: {
// name: '指標對比',
nameTextStyle: {
color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 10, 0]
},
axisLine: {
lineStyle: {
color: '#FA6F53'
}
},
type: 'value'
},
series: [
{
name: '這周',
data: this.dataNewWeek,
type: 'line', // 型別為折線圖
lineStyle: {
// 線條樣式 => 必須使用normal屬性
normal: {
color: '#8AE09F'
}
}
},
{
name: '上周',
data: this.dataLastWeek,
type: 'line',
lineStyle: {
normal: {
color: '#FA6F53'
}
}
}
]
}
// 使用剛指定的配置項和資料顯示圖表，
this.linechart.setOption(option, true)
},
handleHistogramData(){
this.dataNewWeek = [20, 50, 80, 60, 75, 85, 100]
this.dataLastWeek = [10, 40, 40, 20, 15, 25, 60]
},
handleLinechartData(){
this.dataNewWeek = [20, 50, 80, 60, 75, 85, 100]
this.dataLastWeek = [10, 40, 40, 20, 15, 25, 60]
},
},
mounted() {
let _this = this
this.initHistogram()
this.initLinechart()
// 用于處理圖表的瀏覽器視窗自適應
window.onresize = function () {
_this.linechart.resize()
_this.histogram.resize() // 若有多個圖表變動，可多寫
_this.handleFontSize() // 視窗變化，更新圖表大小視圖
}
},
watch: {
fontSize(){
this.initHistogram()
this.initLinechart()
},
// 資料更新，更新echarts圖表
dataNewWeek(){
this.initHistogram()
this.initLinechart()
},
}
}
</script>
<style lang="scss" scoped>
#histogram {
width: 100%;
height: 5rem;
}
#linechart {
width: 100%;
height: 5rem;
}
</style>
餅狀圖
上手先看效果，不然無法繼續進行下去，代碼如下
<template>
<div class="page-two">
<baseTitleBar
backgroundColor="#FFF"
:leftEle="leftEle"
:title="title"
titleColor="#000"
></baseTitleBar>
<div id="piechart"></div>
<van-button type="primary" @click="handlePiechartData">
更新餅狀圖資料
</van-button>
</div>
</template>
<script>
import baseTitleBar from '@/components/titleBar/baseTitleBar'
import * as echarts from 'echarts'
export default {
name: 'index',
components: {
baseTitleBar
},
props: {},
data() {
return {
leftEle: {
iconName: 'iconback',
color: '#000',
fontSize: '.36rem',
method: this.back
},
title: '頁面三',
piechart: null,
fontSize: 0,
pieData: [
{ value: 100, name: '包子' },
{ value: 200, name: '油條' },
{ value: 300, name: '豆漿' },
{ value: 100, name: '胡辣湯' },
{ value: 300, name: '八寶粥' }
]
}
},
methods: {
handleFontSize(res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
if (!clientWidth) return
this.fontSize = 100 * (clientWidth / 1920)
// console.log(this.fontSize)
return res * this.fontSize
},
// 回傳上一層
back() {
if (this.$getUserAgent() == 0) {
try {
u.native.onBack()
} catch (e) {
this.$router.go(-1)
}
} else {
try {
window.webkit.messageHandlers.onFinish.postMessage('close')
} catch (e) {
this.$router.go(-1)
}
}
},
// 餅狀圖
initPiechart() {
// 這里的判斷是列印臺 There is a chart instance already initialized on the dom！警告
if (
this.piechart != null &&
this.piechart != '' &&
this.piechart != undefined
) {
this.piechart.dispose()
}
// 基于準備好的dom，初始化echarts實體
this.piechart = echarts.init(document.getElementById('piechart'))
// 指定圖表的配置項和資料
let option = {
title: {
text: '早餐大比拼',
subtext: '早餐分類',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'center',
bottom:'bottom',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: this.handleFontSize(2), // 餅狀圖大小
center: ['50%', '60%'], // 餅狀圖上下左右的位置
data: this.pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
// 使用剛指定的配置項和資料顯示圖表，
this.piechart.setOption(option, true)
},
handlePiechartData() {
this.pieData = [
{ value: 300, name: '包子' },
{ value: 100, name: '油條' },
{ value: 100, name: '豆漿' },
{ value: 200, name: '胡辣湯' },
{ value: 500, name: '八寶粥' }
]
}
},
mounted() {
let _this = this
this.initPiechart()
window.onresize = function () {
_this.piechart.resize() // 若有多個圖表變動，可多寫
_this.handleFontSize() // 視窗變化，更新圖表大小視圖
}
},
watch: {
fontSize() {
this.initPiechart()
},
pieData() {
this.initPiechart()
}
}
}
</script>
<style lang="scss" scoped>
#piechart {
width: 100%;
height: 5rem;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/342228.html
標籤：其他
下一篇：一文讀懂什么是VUE