echart学习-2

最新推荐文章于 2021-11-18 17:38:50 发布
最新推荐文章于 2021-11-18 17:38:50 发布
阅读量385 收藏 2
点赞数
分类专栏： 笔记 文章标签： 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LUSHIJIE__/article/details/111191506
版权
本文详细介绍了Echarts中系列的含义、类型和配置方式，包括series配合和dataset与series的配合使用。此外，讲解了相关组件如坐标系、组件定位以及南丁格尔图的实现。还讨论了主题的下载、导入与使用，以及异步加载数据的实现。
摘要由CSDN通过智能技术生成

echart学习

文章目录

一、echart中系列的含义：

      系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个"系列"包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

二、系列的类型

      系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、…

三、配置方式

3.1.配置方式一（series配合）：

在这里插入图片描述
注意：yAxis:{}没有值表示默认以10在y轴上递增。

3.2.配置方式二（dataset和series的配合使用）：

在这里插入图片描述
以上的配置方式都是列来配置。也就是series中有一个默认属性（seriesLayoutBy=“Column”），也就是说encode：{x:0列，y:2列}。

四、相关组件

      echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…
在这里插入图片描述

4.1.组件定位

在这里插入图片描述

4.2.中心半径定位

      中心半径定位：往往依据 center（中心）、radius（半径）来决定位置。少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。

五、坐标系

      一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

5.1.直角坐标系方式

注：没有grid属性echart会自动给你生成一个。
在这里插入图片描述

5.2.两个y轴的方式

在这里插入图片描述

5.3.两个grid的方式

在这里插入图片描述

六、南丁格尔图

      在echart中可以通过在饼图中设置roseType: 'angle’的属性来实现南丁格尔图。
                  作用：比饼图更加直观的看到各个数据的占比情况和排名情况。

6.1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script>
        window.onload = function (ev) {
    
           var option = {
    
                series : [
                    {
    
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        roseType: 'angle',
                        data:[
                            {
    value:235, name:'视频广告'},
                            {
    value:274, name:'联盟广告'},
                            {
    value:310, name:'邮件营销'},
                            {
    value:335, name:'直接访问'},
                            {
    value:400, name:'搜索引擎'}
                        ]
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);
        }
    </script></
最低0.47元/天 解锁文章
LUSHIJIE__
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 直方图加正态_在频数直方图上绘制正态分布曲线
weixin_39838758的博客
12-21 2036
首先，了解几个相关概念。频数：在一组样本数据中，不同的数据出现的次数有多有少，或者说它们出现的频繁程度不同，我们称每个数据出现的次数为频数。频率：每个数据出现的次数与样本数据总量的比值为频率。组数：把全体样本数据分成的组的个数(当数据总量在100个以内时，常常分为5～12组)。组距：把全体样本数据分成若干个组，每个小组在x轴上的两个左右端点的距离。极差：全体样本数据中的最大值与最小值的差。由以上定...
unigui_调用外部js与css_左侧导航栏修正
10-27
unigui_调用外部js与css_左侧导航栏修正
Echarts数据到图形的映射(series.encode)
冲出仁川，走出马德里，故事还会再继续
12-09 3881
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据到图形的映射(使用encode)</title> <!--引入Echarts文件--> <script src="js/echarts.min.js"></script> </head> <body> &
echarts饼图南丁格尔玫瑰图属性设置
热门推荐
sunny的博客
05-13 2万+
1、echarts中的图借助于canvas原理进行实现 2.在html中创建一块画布 <div id="main" style="width:600px;height: 400px;"> 3.在js中先获取画布元素，初始化echarts; var myChart = echarts.init(document.getElementById("main")); 4.设置...
Echart-2.2.7学习
01-21
Echart是基于JavaScript的计算机图形库，是当前比较流行的可视化开发工具。
Echart-JT-P：Echart人物学习
02-18
Echart-JT-P：Echart人物学习
echart-2.2.7 完整版本
10-23
2. **主要特性**： - **跨浏览器兼容**：ECharts 2.2.7 支持主流的现代浏览器，包括 Chrome、Firefox、Safari、Edge 以及 IE8 及以上版本。 - **响应式设计**：ECharts 图表可以适应不同的屏幕尺寸，支持移动端...
echart-3.8.5
11-22
2. **数据驱动**：ECharts 的核心理念是数据驱动，它将数据映射到视觉元素，使得数据可视化更加直观。用户只需要提供数据，ECharts 将自动绘制出对应的图表。 3. **交互性**：ECharts 提供了丰富的交互功能，如鼠标...
Delphi-unigui-echart.rar
06-19
《使用Delphi与UniGUI结合...总结，这个“Delphi-unigui-echart.rar”示例为开发者提供了一种在Delphi环境下利用ECharts实现数据可视化的途径，通过学习和实践，可以提升开发者在Web应用开发和数据可视化方面的技能。
unigui_ajax网页交互
12-17
unigui_ajax网页交互
unigui_highcharts_Demo
04-24
unigui_highcharts_Demo
Highcharts 非常实用的Javascript统计图demo示例
10-27
官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可，本文实现的是一个学生成绩走势demo，有需求的朋友可以参考下哈，希望对大家有所帮助
unigui_调用外部js与css
10-27
unigui_调用外部js与cssunigui_调用外部js与cssunigui_调用外部js与css
EChart 制作类似微软的 甘特图
不死就继续
04-03 1万+
前段时间  领导要求完成一个项目进度的图形，一个项目下面又分成不同的阶段，各阶段又不是固定死的，都是动态生成的，关键是还必须要显示时间进度，在一个只有x,y轴的坐标系中要显示，阶段类型，时间，还有各阶段完成量，还有计划和实际的进度，这个在一个二维的平面上很难完成的，最开始打算使用线图来完成，x轴为时间，y轴为计划量和实际量，各线的颜色代表各个阶段的类型，但是如果个阶段的量的单位不能统一，比如：第一
echart中隐藏series中的默认name
各位看官欢迎来到webshao,点个赞支持下咯!
12-10 9758
直接上代码 series: [ { name: '访问来源', //这里本来是需要展示 ，如下图 type: 'pie', radius: [0,'70%'], center: ['50%', '50%'], //label图形上的文本标签 formatter标签内容格式器 可以扩展内容 label: {formatter: '{b}: {@2012} ({d}%)'}, colo
Echarts-主题切换
08-24 274
从网上搜索了相关的方法，是主题之前的切换，但是用的是下拉框类型的，也可以设置div样式，参考官网那种 设置一个div，通过三个图片的点击效果实现切换主题的功能 我用的jQuery和Echarts是cdn，如果您想引用js文件未尝不可 放上代码以供参考 code： <!-- 主题切换 --><!DOCTYPE html><html>&...
饼状图，优化图例，颜色，引用的是echarts.js版本号5.2.2
LzzMandy的博客
11-18 386
var data = { name: ['0~1小时', '1~2小时', '2~5小时', '5~24时', '1天以上'], value: [1, 1, 1, 1, 1], }; var colorArr=['#4572A7', '#AA4643', '#89A54E', '#71588F', '#4098AF', '#DB843D', '#93A9CF']; option = getOption(data, '辆','车流量',colorArr); function get...
echarts实现甘特图（项目进度/任务进度）
冉冉胜起博客
03-19 1万+
1.先看效果图： 2.代码部分我只贴出来option部分，其余的都是一样的；也可参考官网地址： https://www.echartsjs.com/examples/zh/index.html#chart-type-bar https://www.echartsjs.com/zh/option.html#title 3. var option = { bac...
基于vue学习echart学习
最新发布
11-15
以下是基于Vue学习Echart的步骤： 1. 首先需要在Vue项目中引入Echart。可以在终端中运行以下命令进行安装： ``` npm install echarts --save ``` 2. 在main.js中引入Echart，并将其挂载在Vue的原型上： ```javascript import echarts from "echarts"; Vue.prototype.$echarts = echarts; ``` 3. 在Vue组件中使用Echart。可以在组件的`mounted`生命周期函数中创建一个Echart实例，并将其挂载到DOM元素上： ```javascript mounted() { // 基于准备好的dom，初始化echarts实例 const myChart = this.$echarts.init(document.getElementById("chart")); // 指定图表的配置项和数据 const option = { title: { text: "Echart示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } ``` 4. 在模板中添加一个DOM元素，用于挂载Echart实例： ```html <template> <div id="chart" style="width: 600px;height:400px;"></div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值