寫在前面

在即將結束的iview項目中，用到了大量的echarts3內容，簡要記錄下，在iview項目中，如何加載使用echarts3，并使其能夠自適應頁面大小。

開始

頁面模板中添加帶 id 的 div 元素

<template><div style="width:100%;height:100%;" id="chart-div"></div> </template> 復制代碼

js 代碼中引入echarts

import echarts from 'echarts'; 復制代碼

data 中定義統計圖對象

data () {return {exampleChart: null // 統計圖對象} }, 復制代碼

computed 中計算統計圖option

computed: {exampleChartOption () {let xAxisData = [];let seriesData = [];// 動態數據的獲取及修改let option = {tooltip : {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data:['列子']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type : 'category',boundaryGap : false,data : xAxisData}],yAxis: [{type : 'value'}],series: [{name:'列子',type:'line',areaStyle: {normal:{// 折線圖 填充色的線性漸變color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgb(255, 70, 131)' // 0% 處的顏色}, {offset: 1, color: 'rgb(255, 158, 68)' // 100% 處的顏色}], false)}},data: seriesData}]};return option;} } 復制代碼

methods 中進行統計圖的繪制

通過 id 來綁定 div

methods: {drawExampleChart: function () {this.exampleChart = echarts.init(document.getElementById('chart-div'));this.exampleChart.setOption(this.exampleChartOption);} } 復制代碼

mounted 中進行統計圖的掛載和 窗口自適應

$nextTick 是為了確保dom元素已經構建了之后，才進行統計圖的繪制

mounted () {this.$nextTick(() => {this.drawExampleChart();let _self = this;window.addEventListener('resize', function () {_self.exampleChart.resize();});}); } 復制代碼

watch 中監聽 option 的改變，使統計圖重新渲染

deep: true 表示深度監聽，可監聽對象內的變化

watch: {exampleChartOption: {handler: function (newVal, oldVal) {if (this.exampleChart) {if (newVal) {this.exampleChart.setOption(newVal);} else {this.exampleChart.setOption(oldVal);}} else {this.drawExampleChart();}},deep: true} } 復制代碼

將該統計圖以組件的形式，加入到所需的頁面中。

總結

該iview項目中，用到了大量的echarts3，包括柱狀圖，折線圖，餅圖，雷達圖，散點圖，基于geojson數據加載的地圖，異性柱狀圖，遷徙圖。

轉載于:https://juejin.im/post/5bea6a0d51882516fa637378

總結

以上是生活随笔為你收集整理的在iview项目中添加echarts3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。