前言
最近可視化浪潮越發凶猛
但是有些小伙伴們就慌了，覺得自己不是很懂，或者說對里面的參數不是很清楚，所以也就印象也就很模糊
那么今天嚴老濕就帶大家好好梳理梳理思路，順便也帶大家寫幾個Demo
首先得認識Echarts
Echarts商業級數據圖表，它是一個純JavaScript的圖標庫，兼容絕大部分的瀏覽器，底層依賴輕量級的canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
簡單起步
創建vue-cli
我們還是老套路，先創建一個vue-cli ,如果你已經創建了項目可以跳轉到 下一步
vue create project
cd project
yarn serve
配置啥的 就不用老嚴多說了吧（你已經是一個成熟的前端開發者了~）
安裝 Echarts
以下幾種安裝方式擇其一
本項目安裝的是采用的yarn， echarts 版本號是 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
到了這一步說明你已經把准備工作做完了
清空多余代碼
我們先把頁面其他不需要用到的代碼給清除吧
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
創建一個容器
創建一個 id 為EChart 的div 作為容器 (使用id會有個小問題，在最后解答)
<div id="EChart" style="width: 300px; height: 300px;"></div>
創建一個方法
getRenderer() {
console.log(this.$echarts);
// 基於准備好的dom，初始化echarts實例
let EChart = this.$echarts.init(document.getElementById("EChart"));
// 配置參數
let config = {
title: { text: "悲傷日記" },
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 設置參數
EChart.setOption(config);
},
生命周期中調用此方法
mounted() {
// 在生命周期中調用 getRenderer 方法
this.getRenderer();
},
請看大屏幕
吃瓜群眾：“這特么不是官方示例么？能不能炫一點”
嚴老師：“說實話確實有點low ，不要慌這才哪到哪呢，我們先從基礎講堂開始嘛”
先了解其參數
先講講其中簡單的一些配置參數，枯燥乏味，但是摸清楚之后，以后畫圖那是順手得一**
先整點簡單、常用的來看看（備注里面皆是對應API地址）
| 參數名 | 作用 | 備注 |
|---|---|---|
title |
作為圖表名稱 | https://echarts.apache.org/zh/option.html#title |
legend |
作為圖表的標記 | 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 |
掰扯了這么多，估計大家心里也沒個底，實戰一下吧
來造作一下下
series type
來吧！！展示
折線圖
修改折線圖,復制上面的config代碼
只用修改一處地方，那就是series 中的type屬性為line即可
let config = {
title: { text: "悲傷日記" },
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
},
yAxis: {},
series: [
{
name: "銷量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
};
餅狀圖
餅狀圖，我們也來看看，將type修改為pie
當然我們需要把多余的X軸Y軸配置刪除咯,data數據格式也需要修改一下
let config = {
tooltip: {},
legend:{
data : ["嚴","老","濕"]
},
series: [
{
name: "銷量",
type: "pie",
data: [
{value:20,name:"嚴"},
{value:10,name:"老"},
{value:15,name:"濕"}
],
},
],
};
儀表盤
儀表盤將 type 修改為 gauge
let config = {
series: [
{
name: "銷量",
type: "gauge",
data: [50],
},
],
};
嗯~ 看起來有那么一點味道了
畫一個老嚴的臉
let config = {
series: [
{
name: "銷量",
type: "funnel",
data: [
{value: 60, name: '訪問'},
{value: 40, name: '咨詢'},
{value: 20, name: '訂單'},
{value: 80, name: '點擊'},
{value: 100, name: '展現'}
]
},
],
};
哈哈哈 倒三角就是老嚴的臉了 （腦補一下下）
legend
剛剛其實我們已經用到了這個參數噢 ps：餅狀圖
legend 可以作為圖表的標記或顏色的名稱描述(專業名詞：圖例)
它的type有兩個參數plain || scroll
默認為plain 當圖表內容比較豐富的時候可以使用 scroll 可以帶有滾動操作
color
都說顏色是Web的靈魂所在，每一個人都是畫手
官方默認配色 ：
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
我們也可以自己修改顏色,規則是按數據對應的index找color顏色
例如這樣：
let config = {
color:["red","blue","yellow"],
legend:{
data : ["嚴","老","濕"]
},
series: [
{
name: "銷量",
type: "pie",
data: [
{value:20,name:"嚴"},
{value:10,name:"老"},
{value:15,name:"濕"}
],
},
],
};
yAxis
我們還是以線條為參考8
先看看基礎篇,我們在y軸聲明了一個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
}]
};
但是有時候呢，我們會根據需求，要做一個雙Y軸，顧名思義雙Y軸，在加一個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軸基本同理，直接改成數組就成為雙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',
}]
};
到了上面基礎篇也就差不多了
使用id為問題所在
其實我們講了這么多，我們梳理梳理最開始的問題
- id重名怎么辦？
- 數據多個渲染怎么辦？
答案：使用ref，因為vue是單頁面，使用id出現 重名會導致渲染問題
具體怎么使用我們來看看
<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同樣的初始化參數 但是我們此次使用的是ref
let EChart = this.$echarts.init(this.$refs.EChart)
// 配置參數
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',
}]
};
// 設置參數
EChart.setOption(config);
總結
使用echarts 的熟練度最主要的就是寫得多，社區的案例也是多不勝數，面向社區開發就好了
社區地址：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
參考文獻
https://echarts.apache.org/zh/option.html
https://echarts.apache.org/examples/zh/index.html
- END -
喜歡可以關注“悲傷日記”公眾號，持續為您推送好文
