react webpack環境下使用echart

這是之前接觸過的圖標庫，最近項目又重新用到關于圖表方面。由于之前沒有整理出，單獨的相關內容，每次需要重新查閱，所以特別記錄一下，希望也能給看文章的你帶來幫助。期望接下來，也會保持記錄的好習慣，先給自己立個flag，(#^.^#)。有不足之處，還望指點哇！

介紹一下 eChats

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

針對項目

目前使用的基于react 使用webpack 的開發環境，使用操作如下

npm 安裝 ECharts?（目前項目?4.2.1?版本）
npm install echarts --save

引入 ECharts

var echarts = require('echarts');

// 基于準備好的dom，初始化echarts實例
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 圖表和組件

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

例如上面示例代碼中只用到了柱狀圖，提示框和標題組件，因此在引入的時候也只需要引入這些模塊，可以有效的將打包后的體積從 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');
// 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于準備好的dom，初始化echarts實例
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]
    }]
});

舉個實際栗子

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官網簡介 :??https://echarts.baidu.com/echarts2/doc/doc.html?

echarts官網安裝教程?在 webpack 中使用 ECharts :

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

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

echarts官網配置項手冊?https://echarts.baidu.com/option.html#title