1.安裝：npm install echarts --save（我的版本是4.9.0,這里展示的是折線圖）

image.png

2.引入使用

// 全部引入
// import echarts from 'echarts';
// 按需引入
// 1.引入基本模板
const echarts = require('echarts/lib/echarts');
// 2.引入折線圖
require('echarts/lib/chart/line');
// 3.引入提示框，標(biāo)題組件，工具欄，內(nèi)置型數(shù)據(jù)區(qū)域縮放組件，連續(xù)型視覺映射等組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/dataZoom');
require('echarts/lib/component/visualMap');
require('echarts/lib/component/markLine');

3.為echarts準(zhǔn)備一個(gè)dom容器，定好寬高

<div ref="myChart" class="charts"></div>

4.使用

private myChart: any;
// 初始化折線圖
private initEcharts() {
    const list = [{time:1,count:1}];//自己的數(shù)據(jù)，我以time作為橫坐標(biāo)，count作為縱坐標(biāo)
    const options: any = {
        type: 'category',
        title: {
            text: '實(shí)時(shí)統(tǒng)計(jì)'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: list.map(item => `${this.search.dateline} ${item.time}`)
        },
        yAxis: {
            splitLine: {
                show: false
            }
        },
        toolbox: {
            left: 'center',
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                startValue: '2020-01-01 00:00'
            },
            {
                type: 'inside'
            }
        ],
        visualMap: {
            top: 10,
            right: 10,
            pieces: [
                {
                    gt: 0,
                    lte: 50,
                    color: '#096'
                },
                {
                    gt: 50,
                    lte: 100,
                    color: '#ffde33'
                }
            ],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: '用戶數(shù)',
            type: 'line',
            data: list.map(item => item.count),
            markLine: {
                silent: true,
                data: [
                    {
                        yAxis: 50
                    },
                    {
                        yAxis: 100
                    }
                ]
            }
        }
    };
    this.myChart = echarts.init(this.$refs.myChart as HTMLCanvasElement);
    this.myChart.setOption(options);
        //在初始化圖表之后，重新加載（我這里是為了自適應(yīng)寬度）
    setTimeout(() => {
        this.myChart.resize();
    }, 500);
}

option可以隨意根據(jù)自己需求改變，這里是實(shí)例地址：https://echarts.apache.org/examples/zh/index.html
想要那種可以直接復(fù)制
5.如果想要跟隨瀏覽器窗口的變化，自適應(yīng)，需要加一個(gè)監(jiān)聽

window.addEventListener('resize', () => {
    this.myChart.resize();
});

6.在過程中遇到的問題
-1.如果你用了eslint檢測(cè)，禁止使用require語句

Require statement not part of import statement.(@typescript-eslint/no-var-requires)

image.png

那么只好改一下了
.eslintrc.js中的 rules：

rules: {
    '@typescript-eslint/no-var-requires': 0
  }

-2.按照文檔上寫的用import引入，就報(bào)了這個(gè)錯(cuò)

image.png

exportant 'default' (imported as 'Echarts') was not found in 'echarts

最后的寫法是換成了require

const echarts = require('echarts/lib/echarts');

-3.在Chrome瀏覽器，鼠標(biāo)滾動(dòng)，就會(huì)出現(xiàn)這個(gè)error

image.png

Unable to preventDefault inside passive event listener invocation

調(diào)用 preventDefault 函數(shù)來阻止事件的默認(rèn)行為，但Chrome瀏覽器為了使頁面瀏覽更順暢，默認(rèn)忽略，需要主動(dòng)告訴瀏覽器我不調(diào)用 preventDefault 函數(shù)來阻止事件事件行為，這樣就不報(bào)錯(cuò)了
詳細(xì)可參考：https://www.freesion.com/article/59134650/
我這里研究了一個(gè)解決辦法，就是下載echarts.min.js，放進(jìn)項(xiàng)目里面，在import進(jìn)來
然后改一下echarts.min.js這個(gè)文件

image.png