Echarts4圖表完全指南

一、Echarts4.8 API

Echarts4.8 API是echarts4最新版的接口文檔，包含了echarts常用的圖表和功能，可以快速實現數據可視化。以下是echarts4.8 API中常用的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: 'ECharts 入門示例'
    },
    xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個簡單的柱狀圖，通過設置option配置項中的數據，可以實現各種類型的圖表展示。Echarts4.8 API中還包含各種配置項，如tooltip、legend、grid等，可以對圖表進行更加細緻的設置。

二、Echarts4自定義地圖

Echarts4支持自定義地圖，可以展示各種地圖類型，如中國地圖、世界地圖等，也可以展示各種子區域的地圖，如省、市、縣等。以下是實現自定義地圖的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 引入geoJSON數據
import geoJson from './china.json';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: '中國地圖'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 1000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    series: [{
        name: '銷量',
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '天津', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)}
            // 更多省市...
        ]
    }]
};

// 註冊map類型
echarts.registerMap('china', geoJson);

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個中國地圖的展示，通過引入geoJson數據和註冊map類型，可以實現豐富的地圖展示效果。

三、Echarts4 支持markPoint

markPoint是echarts4中的一個選項，可以在圖表上展示特定的標記點，如極大值、極小值、平均值等。以下是實現markPoint的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: '柱狀圖'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '直接訪問',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        }
    }]
};

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個簡單的柱狀圖，並使用markPoint選項展示了最大值和最小值。

四、Echarts4 k線圖markPoint

k線圖是一種用於展示股票市場的圖表類型，Echarts4中也支持k線圖markPoint選項。以下是實現k線圖markPoint的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: 'k線圖'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        type: 'category',
        data: ['2019/1/1', '2019/1/2', '2019/1/3', '2019/1/4', '2019/1/5', '2019/1/6', '2019/1/7']
    },
    yAxis: {
        type: 'value',
        scale: true,
        boundaryGap: [0.01, 0.01]
    },
    series: [{
        name: 'k線圖',
        type: 'k',
        data: [
            [2320.26, 2291.3, 2288.26, 2308.38],
            [2300, 2291.3, 2288.26, 2308.38],
            [2295.35, 2346.5, 2295.35, 2346.92],
            [2347.22, 2358.98, 2337.35, 2363.8],
            [2360.75, 2382.48, 2347.89, 2383.76],
            [2383.43, 2385.42, 2371.23, 2391.82],
            [2377.41, 2419.02, 2369.57, 2421.15]
        ],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        }
    }]
};

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個簡單的k線圖，並使用markPoint選項展示了最大值和最小值。

五、Echarts4教程

Echarts4教程是對於Echarts4的詳細講解，包括Echarts的各種類型圖表的實現和Echarts的各種配置項的使用。以下是Echarts4教程的鏈接：

https://www.echartsjs.com/examples/zh/index.html

在Echarts4教程中，可以找到各種類型圖表的實現代碼，也可以找到各種配置項的使用方法，可以快速學習和使用Echarts4。

六、Echarts4折線圖

折線圖是一種用於展示數據趨勢的圖表類型，Echarts4支持折線圖的展示，並且可以對摺線圖進行各種細緻的設置。以下是實現折線圖的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: '折線圖'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'郵件營銷',
            type:'line',
            stack: '總量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'聯盟廣告',
            type:'line',
            stack: '總量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'視頻廣告',
            type:'line',
            stack: '總量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接訪問',
            type:'line',
            stack: '總量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '總量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個簡單的折線圖，並進行了legend、stack等選項的設置，可以實現更加複雜的折線圖效果。

七、Echarts4雷達圖

雷達圖是一種展示多維度數據的圖表類型，Echarts4支持雷達圖的展示，並且可以對雷達圖進行各種細緻的設置。以下是實現雷達圖的代碼示例：

// 引入echarts
import echarts from 'echarts';
// 初始化echarts實例
let myChart = echarts.init(document.getElementById('myChart'));

// 設置option配置項
let option = {
    title: {
        text: '雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）']
    },
    radar: {
        // 雷達圖每一項的最大值
        indicator: [
            { name: '銷售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技術（Information Technology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研發（Development）', max: 52000},
            { name: '市場（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '預算 vs 開銷（Budget vs spending）',
        type: 'radar',
        // 雷達圖的數據
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '預算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '實際開銷（Actual Spending）'
            }
        ]
    }]
};

// 使用option配置項展示圖表
myChart.setOption(option);

以上代碼示例實現了一個雷達圖，並進行了indicator、name等選項的設置，可以實現更加豐富的雷達圖效果。

八、Echarts4數據可視化

Echarts4是一款強大的數據可視化工具，可以將複雜的數據轉化為易於理解的圖表展示，幫助用戶更好地理解數據。以下是Echarts4數據可視化的代碼示例：

// 引入echarts

import echarts from 'echarts';

// 初始化echarts實例

let myChart = echarts.init(document.getElementById('myChart'));
// 設置option配置項
let option = {
 title: {
 text: '數據可視化'
 },
 tooltip: {},
 legend: {
 data:['銷量']
 },
 xAxis: {
 data: ['襯衫','羊毛衫','雪紡衫','
原創文章，作者：HWXH，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/147998.html