面對elementUi的內(nèi)卷，度娘找準了自己差異化賽道，通過對勢能積累的簡單復用實現(xiàn)了價值轉(zhuǎn)化，通過特有抓手找到了自己擅長的垂直領(lǐng)域，實現(xiàn)了行業(yè)共建和載體打通，通過點線結(jié)合的對焦性打法，找到了前端行業(yè)的精細化引爆點，深追未來可視化大屏的潮流，面對無數(shù)前端工程師頭疼的圖表，百度推出了Echarts，這個引爆整個行業(yè)的第三方插件。

接下來為大家演示一個簡單的例子

首先，我們通過以下代碼npm安裝Echarts

npm install echarts

我們直接百度搜索Echarts，來到Echarts的官網(wǎng)，點擊左上角的示例，點擊第一個折線圖中的基礎(chǔ)折線圖。

接下來點擊完整代碼：

簡單介紹一下

通過,

import * as echarts from 'echarts';

在頁面內(nèi)引入Echarts

var chartDom = document.getElementById('main');

以上代碼是規(guī)定表格生成的位置，通過js獲取元素的id，此時必須給元素設(shè)置寬高，圖表才能正常顯示

var myChart = echarts.init(chartDom);，

這里基于準備好的dom，初始化Echarts實例

PS：

//此處引用echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

//此時頁面中引入時需要把初始化實例的代碼改成如下所示，這樣頁面中就不需要import * as echarts from 'echarts'來引入了

var myChart = this.$echarts.init(chartDom);

如果你的許多其他頁面也都需要Echarts表格，也可以通過以上代碼在main.js里全局引入

下面介紹一些重要的配置：

xAxis：x軸的參數(shù)，type是坐標軸類型。data是類目數(shù)據(jù)，反應的是x軸的元素

yAxis：y軸的參數(shù)，type如上

Series：type是圖表的類型,這里是折線圖，line，類似的柱狀圖為bar，而data就是我們的表格的數(shù)據(jù)的，這里需要和xAxis的data數(shù)目一致，圖表才更具有美感。