正文

新手必看！轻松掌握ECharts图表制作：入门到精通教程攻略

/0 浏览量
0417

ECharts，全称 Enterprise Charts，是一款使用 JavaScript 实现的开源可视化库，可以轻松地嵌入到网页中，为用户提供丰富的图表展示。对于新手来说，ECharts 提供了一个简单易用的接口，让非专业人士也能轻松制作出美观且功能强大的图表。本文将带你从入门到精通，一步步掌握 ECharts 图表制作。

第一章：ECharts 简介

1.1 什么是 ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助用户将数据以图表的形式展示在网页上。ECharts 支持多种图表类型，如折线图、柱状图、饼图、散点图等，并且具有丰富的交互功能。

1.2 ECharts 的优势

  • 易用性：ECharts 提供了简单易用的 API，让用户能够快速上手。
  • 高性能：ECharts 使用 Canvas 和 SVG 渲染图表，具有极高的性能。
  • 丰富的图表类型：ECharts 支持多种图表类型，满足不同场景的需求。
  • 高度可定制：ECharts 提供了丰富的配置项，用户可以根据需求进行定制。

第二章：ECharts 入门

2.1 安装 ECharts

首先，您需要将 ECharts 引入到您的项目中。可以通过以下方式引入：

<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2.2 创建图表

接下来，您可以使用以下代码创建一个简单的柱状图：

<!-- 准备一个用于显示图表的 DOM 容器 -->
<div id="main" style="width: 600px;height:400px;"></div>

<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

<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>

第三章：ECharts 进阶

3.1 图表类型

ECharts 支持多种图表类型，如折线图、柱状图、饼图、散点图、雷达图、地图等。每种图表类型都有其独特的配置项，您可以根据需求选择合适的图表类型。

3.2 交互功能

ECharts 提供了丰富的交互功能，如数据筛选、数据钻取、图表切换等。您可以通过配置项来启用或禁用这些交互功能。

3.3 高级定制

ECharts 支持高度自定义，您可以通过配置项来调整图表的颜色、字体、布局等。

第四章：ECharts 实战

4.1 实战案例一：制作动态图表

// 实时更新数据
setInterval(function () {
  var data0 = option.series[0].data;
  var data1 = option.series[1].data;
  data0.shift();
  data0.push(Math.round(Math.random() * 1000));
  data1.shift();
  data1.push(Math.round(Math.random() * 1000));
  myChart.setOption({
    series: [{
      data: data0
    }, {
      data: data1
    }]
  });
}, 2000);

4.2 实战案例二：制作地图图表

// 准备地图数据
var geoCoordMap = {
  '海门': [121.15, 31.89],
  '鄂尔多斯': [109.97404, 39.24897],
  // ... 其他城市数据
};

// 初始化地图配置项
var option = {
  title: {
    text: '全国主要城市空气质量',
    subtext: '数据来自 PM25.in',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['北京', '天津', '上海', '广州', '深圳', '杭州', '郑州', '武汉', '长沙', '重庆', '西安', '成都']
  },
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],           // 文本，默认为数值文本
    calculable: true
  },
  geo: {
    map: 'china',
    roam: true,
    label: {
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#323c48',
        borderColor: '#111'
      },
      emphasis: {
        areaColor: '#2a333d'
      }
    }
  },
  series: [
    {
      name: 'pm2.5',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [
        {name: '北京', value: Math.round(Math.random() * 1000)},
        {name: '天津', value: Math.round(Math.random() * 1000)},
        // ... 其他城市数据
      ],
      symbolSize: function (val) {
        return val / 10;
      },
      label: {
        normal: {
          formatter: '{b}: {c}',
          position: 'right',
          show: false
        },
        emphasis: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          color: '#f4e925',
          shadowBlur: 10,
          shadowColor: '#333'
        }
      }
    }
  ]
};

第五章：ECharts 总结

ECharts 是一款功能强大、易用性高的可视化库，可以帮助您快速将数据以图表的形式展示在网页上。通过本文的学习，相信您已经对 ECharts 有了初步的了解。在实际应用中，您可以根据需求选择合适的图表类型，并通过配置项进行定制。不断实践和探索，您将能够制作出更加美观和实用的图表。

-- 展开阅读全文 --