学习echarts入门

朴灿烈づ我的快乐病毒、 2023-01-23 08:52 133阅读 0赞

## 一、echarts介绍 ##

废话不多说，先上官方网站：https://echarts.apache.org/

![echarts首页][echarts]

### 1、介绍 ###

在这里引用官方给出的ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender][]，提供直观，交互丰富，可高度个性化定制的数据可视化图表。。。

通俗的来说就是各种各样的图表，可以根据样式自己定义图表，非常的灵活多变，在我们分析数据的时候经常会用图表进行展示数据，领导最爱的图。

![柱状图][7ab99bf572b75bd045fdba6a69488ef9.png]

### 2、丰富的可视化类型 ###

ECharts 提供了常规的[折线图][Link 1]、[柱状图][Link 2]、[散点图][Link 3]、[饼图][Link 4]、[K线图][K]，用于统计的[盒形图][Link 5]，用于地理数据可视化的[地图][Link 6]、[热力图][Link 7]、[线图][Link 8]，用于关系数据可视化的[关系图][Link 9]、[treemap][]、[旭日图][Link 10]，多维数据可视化的[平行坐标][Link 11]，还有用于 BI 的[漏斗图][Link 12]，[仪表盘][Link 13]，并且支持图与图之间的混搭。

## 二、上手echarts ##

### 1、如何获取echarts？ ###

官方给出了四种获取的方法：

*  从 [Apache ECharts 官网下载界面][Apache ECharts] 获取官方源码包后构建。
 *  在 ECharts 的 [GitHub][] 获取。
 *  通过 npm 获取 echarts，`npm install echarts --save`，详见“\[在 webpack 中使用 echarts\](https://echarts.apache.org/zh/tutorial.html\#在 webpack 中使用 ECharts)”
 *  通过 [jsDelivr][] 等 CDN 引入

### 2、如何引用echarts？ ###

我们下载的echarts.js只是一个js文件，要想使用它，我们要在H5网页中引入

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        
        <script src="echarts.min.js"></script>
    </head>
    </html>

### 3、创建图表 ###

echarts有自己的语法，我们需要自己用div画一个装图表的容器，并设置高和宽。

憨厚初始化echarts实例并通过 [setOption][] 方法生成一个简单的柱状图

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: { }, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
    </body>
    </html>

然后查看网页就会出现一个柱状的图表了。

![柱状图][886f51d41b30c53f8102d1a4e9667572.png]

## 三、如何使用其他的图表？ ##

在这里我列举以下图表，我们先认识大体的了解一下，基本上啥都是这种引入的。

### 1、折线图 ###

将上边的实例中的option中内容换成这个，其他的不需要动就可以使用了。

option = { 
        xAxis: { 
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };

![折线图][6ca253c9c0b30358b652d1662cdb4c25.png]

### 2、饼状图 ###

option = { 
        title: { 
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: { 
            trigger: 'item'
        },
        legend: { 
            orient: 'vertical',
            left: 'left',
        },
        series: [
            { 
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '搜索引擎'},
                    { value: 735, name: '直接访问'},
                    { value: 580, name: '邮件营销'},
                    { value: 484, name: '联盟广告'},
                    { value: 300, name: '视频广告'}
                ],
                emphasis: { 
                    itemStyle: { 
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

![柱状图][6d5f20a86924ceba26985d37eb65e7be.png]

### 3、散点图 ###

option = { 
        xAxis: { 
            scale: true
        },
        yAxis: { 
            scale: true
        },
        series: [{ 
            type: 'effectScatter',
            symbolSize: 20,
            data: [
                [172.7, 105.2],
                [153.4, 42]
            ]
        }, { 
            type: 'scatter',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
            ],
        }]
    };

![散点图][13bfdf171001edccd9bbb9e688f1622f.png]

### 4、路径图 ###

$.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function(data) { 
        var lines = data.map(function (track) { 
            return { 
                coords: track.map(function (seg, idx) { 
                    return seg.coord;
                })
            };
        });
        myChart.setOption(option = { 
            bmap: { 
                center: [120.13066322374, 30.240018034923],
                zoom: 14,
                roam: true,
                mapStyle: { 
                    styleJson: [{ 
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#d1d1d1'
                        }
                    }, { 
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#f3f3f3'
                        }
                    }, { 
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#fdfdfd'
                        }
                    }, { 
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': { 
                            'color': '#fefefe'
                        }
                    }, { 
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': { 
                            'color': '#fefefe'
                        }
                    }, { 
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#d1d1d1'
                        }
                    }, { 
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#d1d1d1'
                        }
                    }, { 
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': { 
                            'visibility': 'off'
                        }
                    }, { 
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#fefefe'
                        }
                    }, { 
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': { 
                            'color': '#d1d1d1'
                        }
                    }, { 
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': { 
                            'color': '#999999'
                        }
                    }]
                }
            },
            series: [{ 
                type: 'lines',
                coordinateSystem: 'bmap',
                data: lines,
                polyline: true,
                lineStyle: { 
                    color: 'purple',
                    opacity: 0.6,
                    width: 1
                }
            }]
        });
    });

![路径图][cf9590ea655f7b24c99de594c48eb779.png]

### 5、仪表盘 ###

option = { 
        series: [{ 
            type: 'gauge',
            anchor: { 
                show: true,
                showAbove: true,
                size: 18,
                itemStyle: { 
                    color: '#FAC858'
                }
            },
            pointer: { 
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 8,
                length: '80%',
                offsetCenter: [0, '8%']
            },
    
            progress: { 
                show: true,
                overlap: true,
                roundCap: true
            },
            axisLine: { 
                roundCap: true
            },
            data: [{ 
                value: 20,
                name: '完成率',
                title: { 
                    offsetCenter: ['-40%', '80%']
                },
                detail: { 
                    offsetCenter: ['-40%', '95%']
                }
            },
            { 
                value: 40,
                name: '达标率',
                title: { 
                    offsetCenter: ['0%', '80%']
                },
                detail: { 
                    offsetCenter: ['0%', '95%']
                }
            },
            { 
                value: 60,
                name: '优秀率',
                title: { 
                    offsetCenter: ['40%', '80%']
                },
                detail: { 
                    offsetCenter: ['40%', '95%']
                }
            }
            ],
            title: { 
                fontSize: 14
            },
            detail: { 
                width: 40,
                height: 14,
                fontSize: 14,
                color: '#fff',
                backgroundColor: 'auto',
                borderRadius: 3,
                formatter: '{value}%'
            }
        }]
    };
    
    setInterval(function () { 
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(option, true);
    }, 2000);

![仪表盘][defa8f3ca27b0d6734f9b44515daba5d.png]

### 6、象形柱图 ###

// Generate data
    var category = [];
    var dottedBase = +new Date();
    var lineData = [];
    var barData = [];
    
    for (var i = 0; i < 20; i++) { 
        var date = new Date(dottedBase += 3600 * 24 * 1000);
        category.push([
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
        ].join('-'));
        var b = Math.random() * 200;
        var d = Math.random() * 200;
        barData.push(b)
        lineData.push(d + b);
    }
    
    
    // option
    option = { 
        backgroundColor: '#0f375f',
        tooltip: { 
            trigger: 'axis',
            axisPointer: { 
                type: 'shadow'
            }
        },
        legend: { 
            data: ['line', 'bar'],
            textStyle: { 
                color: '#ccc'
            }
        },
        xAxis: { 
            data: category,
            axisLine: { 
                lineStyle: { 
                    color: '#ccc'
                }
            }
        },
        yAxis: { 
            splitLine: { show: false},
            axisLine: { 
                lineStyle: { 
                    color: '#ccc'
                }
            }
        },
        series: [{ 
            name: 'line',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 15,
            data: lineData
        }, { 
            name: 'bar',
            type: 'bar',
            barWidth: 10,
            itemStyle: { 
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: '#14c8d4'},
                        { offset: 1, color: '#43eec6'}
                    ]
                )
            },
            data: barData
        }, { 
            name: 'line',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: { 
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: 'rgba(20,200,212,0.5)'},
                        { offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                        { offset: 1, color: 'rgba(20,200,212,0)'}
                    ]
                )
            },
            z: -12,
            data: lineData
        }, { 
            name: 'dotted',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: { 
                color: '#0f375f'
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: lineData
        }]
    };

![象形柱图][d301a1676c36d4454d47d0f91e432f13.png]

好了，以上就是我列举的一部分数据图，还有好多的图表没有展示，想要学习可以去官网进行查看学习，有什么问题欢迎和我交流。或者关注我的微信公众号\*\*“*码上言*”\*\*获得更多的学习。

![微信公众号：码上言][26e793d93499cb2c2afa75ea987e42a3.png]

[echarts]: /images/20221004/8fc883a97e3e4dfdb6089b17bf5b268c.png
[ZRender]: https://github.com/ecomfe/zrender
[7ab99bf572b75bd045fdba6a69488ef9.png]: /images/20221004/a52d9dbadd2447de871d8f16b56f8cf2.png
[Link 1]: https://echarts.apache.org/zh/option.html#series-line
[Link 2]: https://echarts.apache.org/zh/option.html#series-bar
[Link 3]: https://echarts.apache.org/zh/option.html#series-scatter
[Link 4]: https://echarts.apache.org/zh/option.html#series-pie
[K]: https://echarts.apache.org/zh/option.html#series-candlestick
[Link 5]: https://echarts.apache.org/zh/option.html#series-boxplot
[Link 6]: https://echarts.apache.org/zh/option.html#series-map
[Link 7]: https://echarts.apache.org/zh/option.html#series-heatmap
[Link 8]: https://echarts.apache.org/zh/option.html#series-lines
[Link 9]: https://echarts.apache.org/zh/option.html#series-graph
[treemap]: https://echarts.apache.org/zh/option.html#series-treemap
[Link 10]: https://echarts.apache.org/zh/option.html#series-sunburst
[Link 11]: https://echarts.apache.org/zh/option.html#series-parallel
[Link 12]: https://echarts.apache.org/zh/option.html#series-funnel
[Link 13]: https://echarts.apache.org/zh/option.html#series-gauge
[Apache ECharts]: https://echarts.apache.org/zh/download.html
[GitHub]: https://github.com/apache/echarts/releases
[jsDelivr]: https://www.jsdelivr.com/package/npm/echarts
[setOption]: https://echarts.apache.org/zh/api.html#echartsInstance.setOption
[886f51d41b30c53f8102d1a4e9667572.png]: /images/20221004/1bccf5c0de6640eabd0d772a50130f16.png
[6ca253c9c0b30358b652d1662cdb4c25.png]: /images/20221004/2e99a2fab1144163830ed910467b857a.png
[6d5f20a86924ceba26985d37eb65e7be.png]: /images/20221004/29a98dab428141fe91be2092b0d579e6.png
[13bfdf171001edccd9bbb9e688f1622f.png]: /images/20221004/1ecdc1e23aa14e9f85d1df50f89cc920.png
[cf9590ea655f7b24c99de594c48eb779.png]: /images/20221004/91fcd4af3f6145c8b8672c1f17fc8315.png
[defa8f3ca27b0d6734f9b44515daba5d.png]: /images/20221004/4688d7cca33346e8bf71bfbeb1fcc16b.png
[d301a1676c36d4454d47d0f91e432f13.png]: /images/20221004/0e8c2ce2b55d46e5b8c74aeed611fbe4.png
[26e793d93499cb2c2afa75ea987e42a3.png]: /images/20221004/7493c331aa914f6289ad8614f351d7f9.png