react webpack環(huán)境下使用echart

這是之前接觸過(guò)的圖標(biāo)庫(kù)，最近項(xiàng)目又重新用到關(guān)于圖表方面。由于之前沒有整理出，單獨(dú)的相關(guān)內(nèi)容，每次需要重新查閱，所以特別記錄一下，希望也能給看文章的你帶來(lái)幫助。期望接下來(lái)，也會(huì)保持記錄的好習(xí)慣，先給自己立個(gè)flag，(#^.^#)。有不足之處，還望指點(diǎn)哇！

介紹一下 eChats

ECharts，縮寫來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

針對(duì)項(xiàng)目

目前使用的基于react 使用webpack 的開發(fā)環(huán)境，使用操作如下

npm 安裝 ECharts?（目前項(xiàng)目?4.2.1?版本）
npm install echarts --save

引入 ECharts

var echarts = require('echarts');

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

按需引入

提示：按需引入 ECharts 圖表和組件

默認(rèn)使用?require('echarts')?得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。

例如上面示例代碼中只用到了柱狀圖，提示框和標(biāo)題組件，因此在引入的時(shí)候也只需要引入這些模塊，可以有效的將打包后的體積從 400 多 KB 減小到 170 多 KB。

提示：可以按需引入的模塊列表見?https://github.com/ecomfe/echarts/blob/master/index.js

// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標(biāo)題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

舉個(gè)實(shí)際栗子

https://blog.csdn.net/weixin_40551876/article/details/96279356

效果圖

cdn.xitu.io/2019/7/17/16bfecfe0f92f257?w=924&h=350&f=png&s=5500">

參考鏈接：

echarts官網(wǎng)簡(jiǎn)介 :??https://echarts.baidu.com/echarts2/doc/doc.html?

echarts官網(wǎng)安裝教程?在 webpack 中使用 ECharts :

https://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

echarts官網(wǎng)按需引入的模塊列表 ：?https://github.com/ecomfe/echarts/blob/master/index.js

echarts官網(wǎng)配置項(xiàng)手冊(cè)?https://echarts.baidu.com/option.html#title