阅读视图

发现新文章,点击刷新页面。

Echarts的基本使用(待更新)

echarts是常用的一个画图工具,官网链接在这

Echarts的基本使用

最基本的Echarts使用需要用到两个方法,一个是echarts的方法init去初始化一个echarts实例myChart,然后就是实例的方法setOption,去给实例配置图表数据。我们这里创建一个基础的柱状图作为案例。

我们在使用Echarts画图的时候,需要去提前设置一个容器用来当作画板。

<template>
    <div class="screen-view">
        <div class="screen-header">
            <p>这里是Echarts组件的内容。</p>
        </div>
        <!-- Echarts容器 -->
        <div class="screen-container" id="chart">
        </div>
    </div>
</template>

一般为了方便获取到这个容器的DOM,所以我们会给他一个id值作为唯一标识。

然后我们就要引入echarts,当然要先下载 npm i echarts

引用完成以后,我们要先获取容器的DOM,然后用到echartsinit方法去初始化这个实例,接下来配置图表的数据。

图表的数据配置是很重要的,它决定了我们所画出来的图表是什么样子的,其中title属性是设置图表标题的,xAxis是用来设置横坐标都有哪些数据的,yAxis是配置纵坐标这里暂时用默认值就好所以直接是一个空对象{}series是配置图表的具体数据的,比如是什么类型的图,数据是多少。

最后通过实例方法setOption把这个图表的数据传入给实例就可以了。

import * as echarts from 'echarts';
export default {
    name: 'Echarts',
    data() {
        return {}
    },
    mounted() {
        // 初始化Echarts图表
        this.initChart();
    },
    methods: {
        initChart() {
            // 1.确保Echarts容器存在
            if (!document.getElementById('chart')) {
                return;
            }
            // 2.获取容器
            const chartDom = document.getElementById('chart');
            // 3.初始化Echarts实例
            const myChart = echarts.init(chartDom);
            // 4.设置图表配置项
            const option = {
                title: {
                    text: 'Echarts示例'  // 图表的名称
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  // 横坐标的数据
                },
                yAxis: {}, // 默认可以不设置,纵坐标的数据会根据图表的具体数据去自适应
                series: [{  // 图表的具体数据也就是我们要展示的数据
                    name: '销量',  // 该数据的名称
                    type: 'bar',  // 该数据的类型  bar是指柱状图
                    data: [5, 20, 36, 10, 10, 20]  // 具体数据
                }]
            };
            // 5.使用配置项设置图表
            myChart.setOption(option);
        }
    },
}

效果如下:

ab421297-0014-49ce-a3ea-8aa847afddb4.png

完整代码如下:

<template>
    <div class="screen-view">
        <div class="screen-header">
            <p>这里是Echarts组件的内容。</p>
        </div>
        <!-- Echarts容器 -->
        <div class="screen-container" id="chart">
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'Echarts',
    data() {
        return {}
    },
    mounted() {
        // 初始化Echarts图表
        this.initChart();
    },
    methods: {
        initChart() {
            // 确保Echarts容器存在
            if (!document.getElementById('chart')) {
                return;
            }
            // 获取容器
            const chartDom = document.getElementById('chart');
            // 初始化Echarts实例
            const myChart = echarts.init(chartDom);
            // 设置图表配置项
            const option = {
                title: {  // 图表名称
                    text: 'Echarts示例'
                },
                tooltip: {},
                xAxis: {  // x轴设置
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  // x轴的值
                },
                yAxis: {},  // y轴设置
                series: [{  // 数据设置
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用配置项设置图表
            myChart.setOption(option);
        }
    },
}
</script>
<style lang='scss' scoped>
.screen-view {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    .screen-header {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .screen-container {
        width: 100%;
        height: calc(100% - 60px);
        padding: 10px;
        box-sizing: border-box;
    }
}
</style>

窗口的缩放对Echarts的影响

刚才只是Echarts的最基本使用,效果是可以实现的,但是如果我们把窗口给放大或者缩小呢?会不会对图有影响?

我们把窗口放大或者缩小试试看:

动画.gif

会发现在我们放大或者缩小窗口的时候,我们的DOM容器是会跟着变化的,但是图不会随着改变,没有达到自适应的效果,这体验肯定是不好的,所以我们这里还要用到echarts实例的一个方法resize

我们创建完实例以后,可以用js方法去监听窗口的变化,然后调用resize方法去改变图的大小。

// 5.使用配置项设置图表
myChart.setOption(option);
// 6.监听窗口大小变化,调整图表大小
window.addEventListener('resize', () => {
    myChart.resize();
});

动画.gif

柱状图叠加功能

柱状图的叠加功能就是在每个横坐标有多个柱状图的时候,将柱状图叠加在一个柱状图上面进行展示。这一点主要通过stack属性去实现,每个数据里面stack值相同的会叠加在一起。

xAxis: [
    {
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    },
],
yAxis: [
    {
        type: 'value',
        name: '单位:个',
    }
],
series: [ // 设置多个柱状图
    {
        name: '苹果',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        label: {
            show: true,
        },
        stack: '1', // stack相同的会叠加在一起
    },
    {
        name: '香蕉',
        type: 'bar',
        data: [13, 21, 5, 43, 33, 18],
        label: {
            show: true,
        },
        stack: '1',  // stack相同的会叠加在一起
    },
]

动画.gif

当然如果stack的值不相同,那就不会叠加在一块。

series: [ // 设置多个柱状图
    {
        name: '苹果',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        label: {
            show: true,
        },
        stack: '1',
    },
    {
        name: '香蕉',
        type: 'bar',
        data: [13, 21, 5, 43, 33, 18],
        label: {
            show: true,
        },
        stack: '1',
    },
    {
        name: '橙子',
        type: 'bar',
        data: [13, 21, 5, 43, 33, 18],
        label: {
            show: true,
        },
    },
]

image.png

还有一个stackStrategy属性,是选择什么情况可以叠加的,值有四个samesign只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠,all堆叠所有的值,positive只堆积正值,negative只堆叠负值,默认是samesign

那在这种默认的情况下,如果我们的数据的正负号不一样会出现什么情况。

series: [ // 设置多个柱状图
    {
        name: '苹果',
        type: 'bar',
        data: [5, 21, 36, 10, 10, 20],
        label: {
            show: true,
        },
        stack: '1',
    },
    {
        name: '香蕉',
        type: 'bar',
        data: [13, -20, 5, 43, 33, 18],  // 有一个数据和将要堆叠的数据正负号不一样  -20对应要堆叠的数据21
        label: {
            show: true,
        },
        stack: '1',
    },
]

image.png

可以看到此时这两个数据就没有堆叠,因为stackStrategy是默认值samesign,如果我们设置为all会怎么样。

series: [ // 设置多个柱状图
    {
        name: '苹果',
        type: 'bar',
        data: [5, 21, 36, 10, 10, 20],
        label: {
            show: true,
        },
        stack: '1',
    },
    {
        name: '香蕉',
        type: 'bar',
        data: [13, -20, 5, 43, 33, 18],  // 有一个数据和将要堆叠的数据正负号不一样  -20对应要堆叠的数据21
        label: {
            show: true,
        },
        stack: '1',
        stackStrategy: 'all', // 全部都堆叠
    },
]

动画.gif

可以看到显示的明显是有问题的,不过一般也不会这么设置因为没啥意义。

还有一个属性stackOrder是用于设置堆叠顺序的,默认是seriesAsc是指按照数据顺序堆叠,第一个数据在最下面,还有一个值是seriseDesc是反向堆叠。

折线图也可以堆叠,但是折线图堆叠起来没有柱状图比较直观所以用的比较少。

series: [
    {
        name: '苹果',
        type: 'line',
        data: [5, 21, 36, 10, 10, 20],
        label: {
            show: true,
        },
        stack: '1',
    },
    {
        name: '香蕉',
        type: 'line',
        data: [13, 20, 5, 43, 33, 18],
        label: {
            show: true,
        },
        stack: '1',
    },
]

image.png

❌