正文

新手快速上手echarts图表制作：从零基础到实战案例全解析

/0 浏览量
0821

简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了各种图表类型，包括折线图、柱状图、饼图、地图等，可以方便地在网页中嵌入交互式的图表。对于新手来说，ECharts 提供了一个友好的学习曲线，本文将带领读者从零基础开始，逐步深入到 ECharts 的使用，并通过实战案例来巩固所学知识。

ECharts 基础

1. 环境搭建

首先，需要在项目中引入 ECharts。可以通过以下几种方式：

  • CDN 引入：通过在线链接直接在 HTML 中引入 ECharts。 
    
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
  • 本地引入：下载 ECharts 的压缩包，将其放置在项目的合适位置，然后在 HTML 中引入。 
    
<script src="path/to/echarts.min.js"></script>

2. 基本用法

ECharts 的基本用法可以概括为以下三个步骤：

  1. 初始化 ECharts 实例：在 HTML 中创建一个用于展示图表的容器元素，然后使用 ECharts 的 init 方法创建实例。

    var myChart = echarts.init(document.getElementById('main'));

  2. 配置图表选项：通过配置 option 对象来定义图表的样式、数据、交互等属性。

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

  3. 设置图表实例的配置项和数据：使用 setOption 方法将配置项和数据应用到 ECharts 实例上。

    myChart.setOption(option);

实战案例

1. 折线图

折线图适合展示数据随时间或其他连续变量的变化趋势。以下是一个简单的折线图示例：

var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [10, 11, 21, 12, 13, 11, 14]
    }]
};

2. 饼图

饼图适合展示数据占比。以下是一个简单的饼图示例：

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    series: [{
        name: '商品销量',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 5, name: '衬衫'},
            {value: 20, name: '羊毛衫'},
            {value: 36, name: '雪纺衫'},
            {value: 10, name: '裤子'},
            {value: 10, name: '高跟鞋'},
            {value: 20, name: '袜子'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

总结

ECharts 是一个功能强大的图表库，通过本文的介绍，读者应该能够掌握 ECharts 的基本用法，并通过实战案例来加深理解。随着学习的深入，读者可以探索更多高级功能，如动画效果、数据导出等，让图表更加生动和实用。

-- 展开阅读全文 --