Echart使用

我会带着你远行 2021-07-24 16:04 600阅读 0赞

# 一 五分钟入门ECharts #

## 1 简介 ##

ECahrs是百度的一个项目，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站： [https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

## 2 基本使用 ##

入门参考：官网->文档->教程->5分钟上手ECharts

a 创建html页面：柱图.html

b 引入ECharts

<script src="echarts.min.js"></script>

c 定义图表区域

<div id="main" style="width: 600px;height:400px;"></div>

d 渲染图表

option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

e 展示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

## 3 折线图 ##

实例参考：官网->实例->官方实例  [https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]

折线图.html

option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };

测试结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 二 前端显示统计图表 #

## 1 安装echarts ##

npm install echarts@4.5.0

## 2 html ##

src/views/statistics/chart.vue

## 3 脚本 ##

[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/73db6b06eb904a5dbd724c46ddb2973a.png
[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/87ee1efe436d402fa866a084bc1466d0.png