ECharts笔记

最新推荐文章于 2024-05-31 22:21:30 发布

Axcmsm

最新推荐文章于 2024-05-31 22:21:30 发布

阅读量351

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_52188949/article/details/119960472

版权

本文详细介绍了ECharts的基本使用，包括如何初始化实例、创建各种图表如柱状图、折线图等。同时总结了配置项，如通用配置、直角坐标系配置等，并深入探讨了高级配置如动画效果、显示相关选项。此外，还讲解了ECharts的交互API，如全局对象的功能、EChartsInstance对象的方法，以及如何进行图表联动和事件处理。

摘要由CSDN通过智能技术生成

ECharts的基本使用

ECharts官网

使用步骤：

引入 echarts.js 文件

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

准备一个呈现图表的盒子

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

初始化 echarts 实例对象

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

准备配置项

var option = {
  xAxis: { // x轴
    type: 'category',//类名
    data: ['小明', '小红', '小王']
 },
  yAxis: {// y轴
    type: 'value'//数组
 },
  series: [
   {
      name: '语文',
      type: 'bar',//图标类型
      data: [70, 92, 87],
   }
 ]
}