站長(zhǎng)資訊網(wǎng)
使用方法：1、用“yarn add echarts”或“npm install echarts -S”或“cnpm install echarts -S”命令安裝Echarts；2、在main.js中用“import echarts from 'echarts' Vue.prototype.$echarts = echarts”進(jìn)行引入；3、在vue頁(yè)面中調(diào)用相關(guān)api即可。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
Echarts 商業(yè)級(jí)數(shù)據(jù)圖表，它是一個(gè)純JavaScript的圖標(biāo)庫(kù)，兼容絕大部分的瀏覽器，底層依賴輕量級(jí)的canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
Echarts，它是一個(gè)與框架無(wú)關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue。
簡(jiǎn)單起步
安裝 Echarts
以下幾種安裝方式擇其一
本項(xiàng)目安裝的是采用的yarn， echarts 版本號(hào)是 4.8.0
// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S
全局引入
在main.js中
import echarts from 'echarts' Vue.prototype.$echarts = echarts
到了這一步說(shuō)明你已經(jīng)把準(zhǔn)備工作做完了
清空多余代碼
我們先把頁(yè)面其他不需要用到的代碼給清除吧
<template> <div class="home"> </div> </template> <script> export default { name: 'Home', } </script>
創(chuàng)建一個(gè)容器
創(chuàng)建一個(gè) id 為EChart 的div 作為容器 (使用id會(huì)有個(gè)小問(wèn)題，在最后解答)
<div id="EChart" style="width: 300px; height: 300px;"></div>
創(chuàng)建一個(gè)方法
getRenderer() { console.log(this.$echarts); // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 let EChart = this.$echarts.init(document.getElementById("EChart")); // 配置參數(shù) let config = { title: { text: "悲傷日記" }, tooltip: {}, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"], }, yAxis: {}, series: [ { name: "銷量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; // 設(shè)置參數(shù) EChart.setOption(config); },
生命周期中調(diào)用此方法
mounted() { // 在生命周期中調(diào)用 getRenderer 方法 this.getRenderer(); },
請(qǐng)看大屏幕
吃瓜群眾：“這特么不是官方示例么？能不能炫一點(diǎn)”
嚴(yán)老師：“說(shuō)實(shí)話確實(shí)有點(diǎn)low ，不要慌這才哪到哪呢，我們先從基礎(chǔ)講堂開(kāi)始嘛”
先了解其參數(shù)
先講講其中簡(jiǎn)單的一些配置參數(shù)，枯燥乏味，但是摸清楚之后，以后畫圖那是順手得一**
先整點(diǎn)簡(jiǎn)單、常用的來(lái)看看（備注里面皆是對(duì)應(yīng)API地址）
| 參數(shù)名 | 作用 | 備注 |
|---|---|---|
title |
作為圖表名稱 | https://echarts.apache.org/zh/option.html#title |
legend |
作為圖表的標(biāo)記 | https://echarts.apache.org/zh/option.html#legend |
xAxis |
作為圖表的X軸 | https://echarts.apache.org/zh/option.html#xAxis |
yAxis |
作為圖表的Y軸 | https://echarts.apache.org/zh/option.html#yAxis |
series |
作為圖表的系列 | https://echarts.apache.org/zh/option.html#series |
color |
作為圖表的顏色列表 | https://echarts.apache.org/zh/option.html#color |
掰扯了這么多，估計(jì)大家心里也沒(méi)個(gè)底，實(shí)戰(zhàn)一下吧
來(lái)造作一下下
series type
來(lái)吧！！展示
折線圖
修改折線圖,復(fù)制上面的config代碼
只用修改一處地方，那就是series 中的type屬性為line即可
let config = { title: { text: "悲傷日記" }, tooltip: {}, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"], }, yAxis: {}, series: [ { name: "銷量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], };
餅狀圖
餅狀圖，我們也來(lái)看看，將type修改為pie
當(dāng)然我們需要把多余的X軸Y軸配置刪除咯,data數(shù)據(jù)格式也需要修改一下
let config = { tooltip: {}, legend:{ data : ["嚴(yán)","老","濕"] }, series: [ { name: "銷量", type: "pie", data: [ {value:20,name:"嚴(yán)"}, {value:10,name:"老"}, {value:15,name:"濕"} ], }, ], };
儀表盤
儀表盤將 type 修改為 gauge
let config = { series: [ { name: "銷量", type: "gauge", data: [50], }, ], };
嗯~ 看起來(lái)有那么一點(diǎn)味道了
畫一個(gè)老嚴(yán)的臉
let config = { series: [ { name: "銷量", type: "funnel", data: [ {value: 60, name: '訪問(wèn)'}, {value: 40, name: '咨詢'}, {value: 20, name: '訂單'}, {value: 80, name: '點(diǎn)擊'}, {value: 100, name: '展現(xiàn)'} ] }, ], };
哈哈哈 倒三角就是老嚴(yán)的臉了 （腦補(bǔ)一下下）
legend
剛剛其實(shí)我們已經(jīng)用到了這個(gè)參數(shù)噢 ps：餅狀圖
legend 可以作為圖表的標(biāo)記或顏色的名稱描述(專業(yè)名詞：圖例)
它的type有兩個(gè)參數(shù)plain || scroll
默認(rèn)為plain 當(dāng)圖表內(nèi)容比較豐富的時(shí)候可以使用 scroll 可以帶有滾動(dòng)操作
color
都說(shuō)顏色是Web的靈魂所在，每一個(gè)人都是畫手
官方默認(rèn)配色 ：
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
我們也可以自己修改顏色,規(guī)則是按數(shù)據(jù)對(duì)應(yīng)的index找color顏色
例如這樣：
let config = { color:["red","blue","yellow"], legend:{ data : ["嚴(yán)","老","濕"] }, series: [ { name: "銷量", type: "pie", data: [ {value:20,name:"嚴(yán)"}, {value:10,name:"老"}, {value:15,name:"濕"} ], }, ], };
yAxis
我們還是以線條為參考8
先看看基礎(chǔ)篇,我們?cè)趛軸聲明了一個(gè)name
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"銷量", type: 'value' }], series: [{ name:'銷量', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] };
但是有時(shí)候呢，我們會(huì)根據(jù)需求，要做一個(gè)雙Y軸，顧名思義雙Y軸，在加一個(gè)Y軸就好了
let config = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis:[ { name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }
xAxis
x軸與y軸基本同理，直接改成數(shù)組就成為雙x軸了
let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] };
到了上面基礎(chǔ)篇也就差不多了
使用id為問(wèn)題所在
其實(shí)我們講了這么多，我們梳理梳理最開(kāi)始的問(wèn)題
-
id重名怎么辦？
-
數(shù)據(jù)多個(gè)渲染怎么辦？
答案：使用ref，因?yàn)関ue是單頁(yè)面，使用id出現(xiàn) 重名會(huì)導(dǎo)致渲染問(wèn)題
具體怎么使用我們來(lái)看看
<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同樣的初始化參數(shù) 但是我們此次使用的是ref let EChart = this.$echarts.init(this.$refs.EChart) // 配置參數(shù) let config = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },{ type: 'category', data: ['0', '1', '2', '3', '4', '5', '6'] }], yAxis:[{ name:"l", type: 'value' }, { name:"r", type: 'value' }], series: [{ name:'l', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }, { name:'r', data: [20, 10, 60, 100, 300, 600, 800], type: 'bar', }] }; // 設(shè)置參數(shù) EChart.setOption(config);
