使用ECharts实现更具可视化效果的数据呈现方式

小蓝 • 2024-12-20 15:02 • 编程

一、ECharts简介

ECharts是百度前端开源团队基于HTML5 Canvas，提供直观、生动、可交互数据可视化图表库，旨在为数据分析提供一个简单友好的显示方式。

该库提供了丰富的图标类型，并且支持移动端、响应式布局，同时还有良好的社区支持以及详细的文档说明。

ECharts已经成为当前前端领域最流行的数据可视化工具之一。

二、ECharts的基本使用

使用ECharts，需要先引入官网提供的echarts.js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.1/echarts.min.js"></script>

然后在需要使用图表的元素中定义div标签，并设置宽、高属性。

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

接着，用JavaScript代码初始化ECharts。

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;

接下来，我们可以配置option来定义我们的图表类型、样式等参数。

option = {
    title: {
        text: '数据可视化示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

最后，使用setOption函数将option作为参数传入，画出我们的图表。

option && myChart.setOption(option);

三、ECharts实现更具可视化效果的数据呈现方式

1. 热力图展示

热力图是一种用色彩直观地显示数据密度的图表，可呈现大量数据的分布。

下面是一个热力图的展示代码示例。

option = {
    title: {
        text: '热力图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: 'bottom'
    },
    series: [{
        type: 'heatmap',
        data: [[0,0,10],[0,1,20],[0,2,30],...,[9,9,100]],
        label: {
            show: true
        }
    }]
};
option && myChart.setOption(option);

2. 饼图展示

饼图是一种用圆形的扇形区域面积表示各种数据占比的图表，可通过饼图直观地显示数据的相对大小。

下面是一个饼图的展示代码示例。

option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {},
    legend: {
        top: 'bottom'
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }]
};
option && myChart.setOption(option);

3. 折线图展示

折线图是一种通过连接不同数据点形成折线来呈现数据变化趋势的图表，可通过折线图直观地展示数据的变化趋势。

下面是一个折线图的展示代码示例。

option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
option && myChart.setOption(option);

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/279075.html