vue使用Echarts圖表
在開發后台系統時，使用圖表進行數據可視化，這樣會使數據更直觀、清晰、美觀。所以我在項目里選用Echart，對部分數據進行圖表顯示。
一、使用Echarts的兩種方法：
1.npm命令安裝
npm install echarts --save
2.CDN方法引入
index.html中，<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
上面的兩種方法，我采用的是第二種方法，一開始我用的是第一種方法，經過測試后發現項目運行速度會被拖慢，所以選用的第二種方法。
二、調用Echarts
//vue文件
<div class="echarts"> //ref 被用來給DOM元素或子組件注冊引用信息,想要在Vue中直接操作DOM元素，就必須用ref屬性進行注冊 <div class="chart" ref="myEchartPillar" > </div> <div class="chart" ref="myEchartLine" > </div> </div> <script> export default { //渲染的圖表的方法放在mounted()，因為mounted()在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作 mounted() { this.getPillar(); this.getLine(); }, methods:{ // 渲染柱形圖表 getPillar() { let that = this; // 基於准備好的dom(myEchartPillar)，初始化echarts實例 let myChart = echarts.init(this.$refs.myEchartPillar); //指定圖表的配置項和數據，繪制圖表 myChart.setOption({ // 圖表名稱 title: { text: "柱形統計圖" }, // 圖表顏色 color: ["#6284d3"], // 提示 tooltip: { //觸發類型,axis:坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 trigger: "axis", axisPointer: { // 坐標軸指示器，坐標軸觸發有效，默認為直線，可選為：'line' | 'shadow' type: "shadow" } }, grid: { show: true, //grid 組件離容器左側的距離。 left: "3%", //grid 組件離容器右側的距離。 right: "4%", //grid 組件離容器下側的距離。 bottom: "3%", //grid 區域是否包含坐標軸的刻度標簽。true這常用於『防止標簽溢出』的場景，標簽溢出指的是，標簽長度動態變化時，可能會溢出容器或者覆蓋其他組件。 containLabel: true, // 網格背景色，此配置項生效的前提是，設置了 show: true backgroundColor: "#E7F1F5" }, //直角坐標系 grid 中的 x 軸 xAxis: [ { //'category' 類目軸 type: "category", //坐標軸名稱 name: "時間", //坐標軸名稱顯示位置 nameLocation: "end", //坐標數據 data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐標軸刻度相關設置 axisTick: { // 為 true 可以保證刻度線和標簽對齊 alignWithLabel: true }, //坐標軸名稱與軸線之間的距離 nameGap: 2 } ], //直角坐標系 grid 中的 y 軸 yAxis: [ { //'value' 數值軸，適用於連續數據 type: "value", //坐標軸名稱 name: "使用量（次數）", //坐標軸的標簽是否響應和觸發鼠標事件，默認不響應 triggerEvent: true } ], //系列列表。每個系列通過 type 決定自己的圖表類型 series: [ { //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列 name: "櫃子使用量", //類型為柱狀/條形圖 type: "bar", //柱條的寬度，不設時自適應。支持設置成相對於類目寬度的百分比。 barWidth: "60%", //圖形上的文本標簽，可用於說明圖形的一些數據信息 label: { normal: { //是否顯示標簽 show: true, //通過相對的百分比或者絕對像素值表示標簽相對於圖形包圍盒左上角的位置 position: "top" } }, //系列中的數據內容數組 data: [1, 3, 5, 7, 9, 11, 13] } ] }); //解決自適應 setTimeout(function() { window.addEventListener("resize", () => { myChart.resize(); }); }, 500); }, // 獲取折線圖 getLine() { let that = this; let myChart = echarts.init(this.$refs.myEchartLine); myChart.setOption({ title: { text: "折線統計圖" // text: that.$t("profitChart.Revenuechart") }, color: ["#6284d3"], tooltip: { trigger: "axis", formatter: "時間 : {b}<br/>收益 : {c}元", axisPointer: { type: "line" } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", name: "日期", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], boundaryGap: false, axisTick: { alignWithLabel: true }, nameGap: 2 } ], yAxis: [ { type: "value", name: "金額（元）" } ], series: [ { name: "櫃子使用量", //類型為折線圖 type: "line", //折線樣式 lineStyle: { normal: { //寬度 width: 3, //陰影顏色 shadowColor: "rgba(0,0,0,0.1)", // 陰影的模糊范圍 shadowBlur: 10, // 陰影的縱向位移量 shadowOffsetY: 10 } }, areaStyle: { normal: { // 折線范圍內的背景色 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#E7F1F5" }, { offset: 1, color: "#E7F1F5" } ]) } }, data: [1, 3, 5, 7, 9, 11, 13] } ] }); setTimeout(function() { window.addEventListener("resize", () => { myChart.resize(); }); }, 500); }, } } <script> 柱形圖表示例圖：
柱形統計圖.jpg
折線圖表示例圖：
折線統計圖.jpg
注意事項：
有時候echarts會不顯示，這個時候要注意是否有以下問題。
1.創建實例時，最好用let聲明；
let myChart = echarts.init(this.$refs.myEchartPillar);
2.容器寬高不能設置百分比，要設置具體的數值；
<div style="height:790px;width:400px;" ref="myEchartPillar" ></div>
3.考慮dom有沒有渲染；
渲染的圖表的方法放在mounted()或updated()中，不要放在created()中。
餅圖、散點圖等圖表用法與上類似，感興趣的小伙伴兒可以寫寫例子，感受一下圖表的神奇之處(～￣▽￣)～。