Echarts最简单的使用方法

最新推荐文章于 2024-08-13 18:13:57 发布
最新推荐文章于 2024-08-13 18:13:57 发布
阅读量649 收藏 1
点赞数
分类专栏： 前端插件的使用 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45407251/article/details/128269398
版权

Echarts

官网地址

访问以下界面，可以直接打开官网。

https://echarts.apache.org/zh/index.html
在这里插入图片描述

Echarts的特性

特性名称描述
丰富的图表类型提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
强劲的渲染引擎Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
专业的数据分析通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
优雅的可视化数据默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
健康的开源社区活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
友好的无障碍访问智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IF3zWwYQ-1670678741966)(C:\Users\Skevin\Desktop\12月10日试讲材料\Echarts的使用.assets\image-20221209205616715.png)]

Echarts的应用场景

科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关资料

  • 主要的使用场景（大数据可视化）

img

img

img

Echarts的使用方法

  1. 进入以下的界面打开文件

https://www.jsdelivr.com/package/npm/echarts

在这里插入图片描述

  1. 选中文件进行下载

在这里插入图片描述

  1. 创建echarts文件

在这里插入图片描述

  1. 引入echarts.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts插件</title>
</head>
<body>
    <!-- 引入echarts.js文件 -->
    <script src="echarts.js"></script>
</body>
</html>

折线图

<div id="main"></div>
<!-- 引入echarts.js文件 -->
<script src="echarts.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };
    option && myChart.setOption(option);

</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFTu1GTe-1670678741974)(Echarts的使用.assets/image-20221209214210296.png)]

柱状图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G6doHWuX-1670678741976)(Echarts的使用.assets/image-20221209214119567.png)]

饼图

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kx2m85cS-1670678741977)(Echarts的使用.assets/image-20221209214012042.png)]

散点图

echarts.registerTransform(ecStat.transform.clustering);
const data = [
  [3.275154, 2.957587],
  [-3.344465, 2.603513],
  [0.355083, -3.376585],
  [1.852435, 3.547351],
  [-2.078973, 2.552013],
  [-0.993756, -0.884433],
  [2.682252, 4.007573],
  [-3.087776, 2.878713],
  [-1.565978, -1.256985],
  [2.441611, 0.444826],
  [-0.659487, 3.111284],
  [-0.459601, -2.618005],
  [2.17768, 2.387793],
  [-2.920969, 2.917485],
  [-0.028814, -4.168078],
  [3.625746, 2.119041],
  [-3.912363, 1.325108],
  [-0.551694, -2.814223],
  [2.855808, 3.483301],
  [-3.594448, 2.856651],
  [0.421993, -2.372646],
  [1.650821, 3.407572],
  [-2.082902, 3.384412],
  [-0.718809, -2.492514],
  [4.513623, 3.841029],
  [-4.822011, 4.607049],
  [-0.656297, -1.449872],
  [1.919901, 4.439368],
  [-3.287749, 3.918836],
  [-1.576936, -2.977622],
  [3.598143, 1.97597],
  [-3.977329, 4.900932],
  [-1.79108, -2.184517],
  [3.914654, 3.559303],
  [-1.910108, 4.166946],
  [-1.226597, -3.317889],
  [1.148946, 3.345138],
  [-2.113864, 3.548172],
  [0.845762, -3.589788],
  [2.629062, 3.535831],
  [-1.640717, 2.990517],
  [-1.881012, -2.485405],
  [4.606999, 3.510312],
  [-4.366462, 4.023316],
  [0.765015, -3.00127],
  [3.121904, 2.173988],
  [-4.025139, 4.65231],
  [-0.559558, -3.840539],
  [4.376754, 4.863579],
  [-1.874308, 4.032237],
  [-0.089337, -3.026809],
  [3.997787, 2.518662],
  [-3.082978, 2.884822],
  [0.845235, -3.454465],
  [1.327224, 3.358778],
  [-2.889949, 3.596178],
  [-0.966018, -2.839827],
  [2.960769, 3.079555],
  [-3.275518, 1.577068],
  [0.639276, -3.41284]
];
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
var COLOR_ALL = [
  '#37A2DA',
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
var pieces = [];
for (var i = 0; i < CLUSTER_COUNT; i++) {
  pieces.push({
    value: i,
    label: 'cluster ' + i,
    color: COLOR_ALL[i]
  });
}
option = {
  dataset: [
    {
      source: data
    },
    {
      transform: {
        type: 'ecStat:clustering',
        // print: true,
        config: {
          clusterCount: CLUSTER_COUNT,
          outputType: 'single',
          outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
        }
      }
    }
  ],
  tooltip: {
    position: 'top'
  },
  visualMap: {
    type: 'piecewise',
    top: 'middle',
    min: 0,
    max: CLUSTER_COUNT,
    left: 10,
    splitNumber: CLUSTER_COUNT,
    dimension: DIENSIION_CLUSTER_INDEX,
    pieces: pieces
  },
  grid: {
    left: 120
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter',
    encode: { tooltip: [0, 1] },
    symbolSize: 15,
    itemStyle: {
      borderColor: '#555'
    },
    datasetIndex: 1
  }
};

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DEPA0fSy-1670678741979)(Echarts的使用.assets/image-20221209213916256.png)]

总结

对于echarts的使用，我们一般采用设置不同的option来设置不同的图表，可以根据不同的图表需求在官网上进行查询。

冰冻丶三尺
关注
专栏目录
ECharts使用指南
weixin_52546522的博客
03-17 604
第一步，引入ECharts： echars的引入十分简单，只需要在html中嵌入即可： <!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> </html> echarts.min.js从官网下载 此时echarts.min.js保存在html文件同目录下 如果不想在本地保存echart.js文件，可以采用cdn引
Echarts的简单使用
热门推荐
qq_32810963的博客
11-13 1万+
现在，数据可视化已经成为了工作中不可或缺的一部分，本文将简单介绍Echarts的使用以及一些属性的含义 1.要使用Echarts首先就要引入echarts文件 <script src="echarts.js"></script> echarts.js文件可在echarts的官方中文网站下载 Apache ECharts 2.在Echarts的官方中文网站中选择一个你想要绘制的图形 这里我们选择折线图进行绘制 3.接下来我们了解一下左边代码的具体含义 ...
ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】
最新发布
weixin_43483590的博客
08-13 2072
ECharts一个基于 JavaScript 的开源可视化图表库，即将数据以图形或图像的方式展现成在屏幕上显示出来，这种方式称为数据可视化。数据可视化有助于我们分析数据，帮助我们更深入更直观的理解数据
Vue 爬坑之路（八）—— 使用 Echarts 创建图表
weixin_34186128的博客
03-16 745
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用 通常...
echarts使用
Beloved_Jodie的博客
11-15 684
echarts使用 <template> <div class="marginB" style="width:80%;margin: 0 auto;"> <div id="main2" style="float:left;width:100%;height: 500px;margin: 0 auto;" ></div>
echarts：基本使用
snowball的博客
11-01 5094
调试，好几次调试成功了，但是代码拿到网易BI就不太好使，我相信是我个人的原因；我把相关代码删减到极简状态，然后再次调试，寻找合适的mapjson，最终在网易BI可以展示全国地图了。，普通的开发正常按照步骤调试即可，网易bi有一点错误就会报错，也不能定位到具体的问题；这个小小示例，集成了echarts使用的基本步骤。3、获取 DOM 元素（容器），初始化 Echarts 实例。个人觉得，网易BI开发和在普通浏览器环境开发还是。5、使用配置项和数据渲染图表（渲染到容器中）4、指定图表的配置项和数据。
PB9 简单使用Echarts
03-12
**PB9简单使用Echarts详解** PowerBuilder 9（PB9）是一款强大的Windows应用程序开发工具，它支持多种数据可视化方式，其中包括集成外部JavaScript库如Echarts。Echarts是一款基于JavaScript的数据可视化库，版本4...
echarts简单使用demo
08-26
3. **JavaScript处理**：在JavaScript中，使用获取到的JSON数据填充ECharts的`series`配置项，然后调用`myChart.setOption()`方法绘制图表。 **ECharts图表配置示例** ```html <!DOCTYPE html> <title>...
flutter_echarts：一种Flutter小部件，以React方式使用Apache ECharts（孵化）
02-05
如果您希望更好的性能和功能，但图表更简单，则建议使用此纯Flutter可视化库： React性更新 Flutter小部件和React组件最令人兴奋的功能是，当数据更改时，视图可以进行React式更新。 借助ECharts的数据驱动架构， ...
在 webpack 中使用 ECharts的实例详解
08-28
在 webpack 中使用 ECharts 的实例详解 ...在 webpack 中使用 ECharts 非常简单，只需安装 ECharts，require ECharts，然后初始化 ECharts 实例，最后绘制图表。同时，我们可以使用按需引入的方式来减小打包后的体积。
echarts最简单的南丁格尔玫瑰图+图例
aurora0_的博客
09-14 2541
echarts饼状图
echarts使用小结
10-26
echarts 基本使用方法和总结，
echarts 基础图形使用
xin_yun_Jian的博客
10-27 409
1. 安装 npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div> 3. 引入 import * as echarts from "echarts"; 4. 柱状图 initBar() { var myCha...
echarts(7大基础图表)的使用
qq_44930306的博客
05-28 2299
echarts基础应用
ECharts的基本使用
黑马程序员官方博客
11-30 1万+
ECharts是百度公司开源的一个使用实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。开源免费它是开源免费的，也就是我们可以免费的使用ECharts，不需要缴纳任何的费用功能丰富它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制,满足各种需求，比如折线图、柱状图、饼图、K线图等.在他的官方示例中,提供了上百种图表,可以用 只有你想不到,没有她做不到 这句话来形容社区活跃。
ECharts用法及常用配置项详解（Vue环境）
qq_39093474的博客
11-05 2040
首先使用 npm下载安装 ECharts；在项目的 main.js 文件中引入（此处为全局引入，后续在单个 .vue 页面中无需再引）；//引入import * as Echarts5 from 'echarts5' //echarts新版本echarts5//使用//新版本。
echarts应用
magicfly9527的专栏
04-28 738
echart图表
echarts简单上手教程
gRpc的博客
05-25 630
我是用npm下载的（cnpm替换的npm，）， 然后在node_modules\echarts\dist\目录下找到echarts.min.js文件， 然后在你的html文档引用就可以了，
echarts最简单的3d饼图
09-09
要创建一个最简单的3D饼图，你可以使用ECharts库的`pie`系列图表和`GL`渲染器。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单的3D饼图</title> <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> var chart = echarts.init(document.getElementById('chart')); var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; var option = { tooltip: {}, series: [ { type: 'pie', radius: '55%', data: data } ] }; chart.setOption(option); </script> </body> </html> ``` 这个示例中，我们创建了一个简单的饼图，并使用了`pie`系列图表和`GL`渲染器来实现3D效果。在`data`数组中，我们可以设置每个扇区的数值和名称。然后，我们在`option`对象中定义了一些基本配置，如提示框和系列类型。最后，我们使用`setOption`方法将配置应用到图表中。 你可以将上述代码保存为HTML文件并在浏览器中打开，就可以看到简单的3D饼图了。记得在`<script>`标签中引入ECharts库的CDN链接，确保能够正确加载库文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值