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

接下來(lái)為大家演示一個(gè)簡(jiǎn)單的例子

首先，我們通過(guò)以下代碼npm安裝Echarts

npm install echarts

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

接下來(lái)點(diǎn)擊完整代碼：

簡(jiǎn)單介紹一下

通過(guò),

import * as echarts from 'echarts';

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

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

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

var myChart = echarts.init(chartDom);，

這里基于準(zhǔn)備好的dom，初始化Echarts實(shí)例

PS：

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

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

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

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

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

xAxis：x軸的參數(shù)，type是坐標(biāo)軸類(lèi)型。data是類(lèi)目數(shù)據(jù)，反應(yīng)的是x軸的元素

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

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