问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

ECharts入门示例

创作时间:
作者:
@小白创作中心

ECharts入门示例

引用
CSDN
等
10
来源
1.
https://blog.csdn.net/manfanying/article/details/137344066
2.
https://blog.csdn.net/guo_qiangqiang/article/details/136948339
3.
https://blog.csdn.net/hgoop/article/details/137033006
4.
https://cloud.baidu.com/article/2908512
5.
https://blog.csdn.net/2401_83276728/article/details/139801432
6.
https://blog.csdn.net/CCC_chtt/article/details/136560788
7.
https://study.sf.163.com/documents/read/manual/date20210910162649.md
8.
https://blog.csdn.net/qq_44776454/article/details/139290978
9.
https://cloud.tencent.com/developer/article/2399624
10.
https://cn.aliyun.com/sswb/716046.html?from_alibabacloud=

ECharts作为一款功能强大且灵活的数据可视化工具，无论是初学者还是高手都能从中受益。本教程将带你从零基础开始，逐步掌握ECharts的各项图表属性设置，包括图例、提示框、x轴和y轴等，让你轻松创建专业美观的图表。无论你是想展示数据分析结果，还是希望在项目中加入炫酷的视觉效果，ECharts都将是你不可或缺的利器。快来一起学习吧！

01

一、ECharts简介

ECharts（Enterprise Charts）是一个由百度开源的数据可视化库，它提供了丰富的图表类型和可视化选项，使得开发者能够轻松地在网页中创建交互式的图表和数据可视化。ECharts支持多种数据格式，包括JSON、数组等，并且可以与各种现代前端框架（如React、Vue.js、Angular等）无缝集成。

ECharts的主要特点包括：

  1. 丰富的图表类型：ECharts提供了包括折线图、柱状图、饼图、散点图、雷达图、地图、热力图、关系图等多种图表类型，满足不同的数据展示需求。
  2. 灵活的配置项：ECharts的配置项非常灵活，用户可以自定义图表的颜色、字体、布局、提示信息等，以适应不同的设计需求和品牌风格。
  3. 交互性：ECharts支持图表的交互操作，如数据缩放、拖拽、数据视图切换等，增强了用户体验。
  4. 跨平台兼容性：ECharts可以在PC端和移动端上运行，具有良好的跨浏览器兼容性，包括IE、Chrome、Firefox等主流浏览器。
  5. 易于集成：ECharts可以轻松集成到各种前端项目中，支持模块化加载和按需引入，减少资源文件的大小。
  6. 社区支持：作为一个开源项目，ECharts拥有活跃的社区支持，用户可以在GitHub上找到最新的更新、问题解答和丰富的示例。
  7. 国际化：ECharts支持多语言，包括但不限于中文、英文，方便不同地区的用户使用。

ECharts适用于各种数据展示场景，如企业报表、数据监控、网站数据展示等，它通过简洁的API和强大的功能，帮助开发者快速构建出美观、实用的数据可视化图表。

02

二、基础入门

1. 安装和引入ECharts

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

  • CDN引入：在HTML文件中通过<script>标签引入ECharts的CDN链接。

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

  • 本地引入：下载ECharts的js文件并放在项目目录中，然后在HTML中引用。

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

2. 创建第一个图表

接下来，我们将创建一个简单的柱状图。按照以下步骤操作：

  1. 创建HTML结构：在HTML文件中创建一个<div>容器，用于放置图表。

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

  2. 初始化ECharts实例：在<script>标签中初始化ECharts实例，并指定图表容器。

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

  3. 配置图表选项：定义图表的配置项和数据。

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

  4. 应用配置项：将配置项应用到ECharts实例中。

    myChart.setOption(option);

完整的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>ECharts入门示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <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>
</body>
</html>
03

三、核心组件详解

1. 图例（Legend）

图例用于显示图表中各系列的名称和颜色，帮助用户理解图表内容。可以通过以下方式配置：

legend: {
  data: ['销量', '利润']
}

2. 提示框（Tooltip）

提示框用于在鼠标悬停时显示详细数据信息。可以通过以下方式配置：

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross'
  }
}

3. 坐标轴（XAxis和YAxis）

坐标轴用于定义图表的横轴和纵轴。可以通过以下方式配置：

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
}

4. 数据标签（Label）

数据标签用于在图表上直接显示数据值。可以通过以下方式配置：

series: [
  {
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold',
        fontStyle: 'italic',
        fontFamily: 'Arial'
      }
    }
  }
]
04

四、高级应用

1. 多图表联动

ECharts支持多个图表之间的数据联动，可以通过以下方式实现：

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

chart1.on('mouseover', function (params) {
  chart2.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

chart2.on('mouseover', function (params) {
  chart1.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

2. 自定义主题

ECharts允许用户自定义图表的主题，包括颜色、字体等样式。可以通过以下方式配置：

echarts.registerTheme('myTheme', {
  color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  backgroundColor: '#fff',
  textStyle: {
    color: '#333'
  }
});

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

3. 动态数据更新

ECharts支持动态更新图表数据，可以通过以下方式实现：

setInterval(function () {
  for (var i = 0; i < data.length; i++) {
    data[i] = (data[i] + 1) % 100;
  }
  myChart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);
05

五、实战案例

假设我们需要创建一个展示城市工厂人员数据的旭日图。具体步骤如下：

  1. 数据准备：使用Python和Pandas处理数据，生成适合ECharts的格式。
import pandas as pd

data = {
    'city': ['城市01', '城市01', '城市02', '城市02'],
    'factory': ['工厂01', '工厂02', '工厂01', '工厂02'],
    'people': [356, 450, 200, 300]
}

df = pd.DataFrame(data)
grouped = df.groupby('city').apply(lambda x: x.groupby('factory').sum().to_dict(orient='index')).to_dict()

sunburst_data = []
for city, factories in grouped.items():
    city_data = {
        'name': city,
        'value': sum(factories.values()),
        'children': [{'name': factory, 'value': value} for factory, value in factories.items()]
    }
    sunburst_data.append(city_data)
  1. 前端展示：在HTML中使用ECharts展示旭日图。
<!DOCTYPE html>
<html>
<head>
  <title>旭日图展示</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    var srData = [
      {
        "value": 806,
        "name": "城市01",
        "path": "城市01",
        "children": [
          {
            "path": "城市01",
            "name": "工厂01",
            "value": 356
          },
          {
            "path": "城市01",
            "name": "工厂02",
            "value": 450
          }
        ]
      },
      {
        "value": 500,
        "name": "城市02",
        "path": "城市02",
        "children": [
          {
            "path": "城市02",
            "name": "工厂01",
            "value": 200
          },
          {
            "path": "城市02",
            "name": "工厂02",
            "value": 300
          }
        ]
      }
    ];

    const formatUtil = echarts.format;
    function getLevelOption() {
      return [
        {
          itemStyle: {
            borderWidth: 2
          }
        },
        {
          itemStyle: {
            borderWidth: 1
          }
        }
      ];
    }

    option = {
      series: {
        type: 'sunburst',
        data: srData,
        radius: [0, '95%'],
        label: {
          rotate: 'radial'
        },
        levels: getLevelOption()
      }
    };

    myChart.setOption(option);
  </script>
</body>
</html>
06

六、总结与进阶

通过本教程，你已经掌握了ECharts的基本使用方法和核心组件的配置技巧。ECharts的强大之处在于其灵活性和丰富的配置选项，能够满足各种复杂的数据可视化需求。为了进一步提升你的技能，建议：

  1. 深入研究官方文档：ECharts的官方文档是学习的最好资源，详细介绍了各种图表类型和配置项的使用方法。
  2. 多做实战项目：通过实际项目练习，可以更好地理解和掌握ECharts的使用技巧。
  3. 关注社区动态：ECharts的社区非常活跃，可以通过GitHub、论坛等渠道获取最新的更新和解决方案。

希望本教程能帮助你快速掌握ECharts，让你的数据可视化能力更上一层楼！

热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号