echarts(一)下载引入,调色盘,[标题、图例组件、坐标轴]

一个简单的例子

1. 下载并引入
(1)npm install echarts --save
(2)import echarts from 'echarts' //main.js引入echarts
或者在组件中按需引入,查看按需引入的详细模块

<script>// 引入 ECharts 主模块var echarts = require('echarts/lib/echarts');// 引入柱状图require('echarts/lib/chart/bar');// 引入提示框和标题组件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');export default{}
</script>

2. 主要代码 在线编辑

<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>methods:{drawMap(){// 基于准备好的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);//建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)window.addEventListener('resize',function() {myChart.resize()});}
},
mounted(){this.drawMap();
}

为了适应屏幕放大缩小,添加一个浏览器窗口变化的事件

//1. 写法一:当只有一个图表时,可以直接写
// window.onresize = lineChart.resize;// 2. 写法二:原生写法
// window.addEventListener("resize", () =>{
//   this.barChart.resize();
//   this.lineChart.resize();
// });//3. 写法三:jquery的写法
$(window).on("resize", function(){this.barChart.resize();this.lineChart.resize();
})

调色盘

在 option 中设置,它给定了一组颜色,图形、系列会自动从其中选择颜色。

option = {// 全局调色盘。color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],series: [{type: 'bar',// 此系列自己的调色盘。color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],...}, {type: 'pie',// 此系列自己的调色盘。color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],...}]
}

可以设置全局的调色盘,也可以设置系列自己专属的调色盘。


直接的样式设置

直接的样式设置是比较常用设置方式。在 ECharts 的 option 中,很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。可以在线编辑简单的图标
这里列出常用的,详细见官网、

直接写在 setOption 中的(即在var option = {} 的对象中)有:
一、title
二、lengend
三、grid
四、xAxis
五、yAxis


一、标题title 官方文档

在这里插入图片描述
1. title.text
默认为 "",主标题文本,支持使用 \n 换行;

2. title.link
默认为 "",主标题的文本超链接;

3. title.target
默认为 "blank",指定窗口打开主标题超链接;
(1)'self' 当前窗口打开;
(2)'blank' 新窗口打开;

4. title.textStyle
(1)title.textStyle.color,主标题文字的颜色,[default:'#333']

(2)title.textStyle.fontStyle,主标题文字字体的风格,[default:'normal']

  • 'normal''italic''oblique'

(3)title.textStyle.fontWeight,主标题文字字体的粗细,[default:'normal']

  • 'normal''bold''bolder''lighter'100 | 200 | 300 | 400...

(4)title.textStyle.fontFamily,主标题文字的字体系列,[ default: 'sans-serif' ]
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

(5)title.textStyle.fontSize,主标题文字的字体大小,[ default: 18 ]

(6)title.textStyle.lineHeight,主标题文字的字体行高,[ default: 18 ]
rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。

{lineHeight: 56,rich: {a: {// 没有设置 `lineHeight`,则 `lineHeight` 为 56}}
}

(7)title.textStyle.width,文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它;

注意,如果不定义 rich 属性,则不能指定 width 和 height。

(8)title.textStyle.height,文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它;

(9)title.textStyle.rich,在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

5. title.textAlign
整体(包括 text 和 subtext)的水平对齐,默认 [default:'auto'] ,可选值: ‘auto’、‘left’、‘right’、‘center’;

6. title.textVerticalAlign
整体(包括 text 和 subtext)的垂直对齐,默认 [default:'auto'] ,可选值:‘auto’、‘top’、‘bottom’、‘middle’。;

7. title.padding
标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,默认 [ default: 5 ]

padding: 5 //设置内边距为 5
padding: [5, 10] // 设置上下的内边距为 5,左右的内边距为 10
padding: [5,4,5,4] (顺时针上,右,下,左)

8. title.borderColor
标题的边框颜色。支持的颜色格式同 backgroundColor,默认 [ default: '#ccc' ]

9. title.borderWidth
标题的边框线宽。支持的颜色格式同 backgroundColor,默认 [ default: 0 ]

10. title.borderRadius
圆角半径,单位px,支持传入数组分别指定 4 个圆角半径,默认 [ default: 0 ]

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)

二、图例组件legend 官方文档

在这里插入图片描述
1. legend.left
图例组件离容器左侧的距离,默认 [ default: 'auto' ]
(1)值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。
(2)如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。

2. legend.top
图例组件离容器上侧的距离,默认 [ default: 'auto' ]

legend.rightlegend.bottom 同上

3. legend.width
图例组件的宽度。默认自适应,默认 [ default: 'auto' ];(string,number)

4. legend.height
图例组件的高度。默认自适应,默认 [ default: 'auto' ]

5. legend.orient
图例列表的布局朝向,默认 [ default: 'horizontal' ]

6. legend.align
图例标记和文本的对齐(即颜色块和文字的位置)。默认自动,默认 [ default: 'auto' ]

7. legend.padding
图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。默认 [ default:5]

8. legend.itemGap
图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔,默认 [ default: 10 ]

9. legend.itemWidth
图例标记的图形宽度。默认 [ default: 25 ]

10. legend.itemHeight
图例标记的图形高度。默认 [ default: 14 ]

11. legend.textStyle 图例的公用文本样式。
(1)legend.textStyle.color,文字的颜色,默认 [ default: #333 ]

(2)legend.textStyle.fontStyle,文字字体的风格,默认 [ default: 'normal' ]
可选: normal,italic,oblique

(3)legend.textStyle.fontWeight,文字字体的粗细,默认 [ default: normal ]
(4)legend.textStyle.fontFamily,文字的字体系列,默认 [ default: 'sans-serif']
(5)legend.textStyle.fontSize,文字的字体大小,默认 [ default: 12 ]
(6)legend.textStyle.lineHeight,文字的行高;

12. legend.data
图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name;

13. legend.tooltip
图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name

14. legend.icon
图例项的文字提示。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip。类似文字溢出出现省略号;

legend: {formatter: function (name) {return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');},tooltip: {show: true}
}

三、grid 官方文档

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。
在这里插入图片描述
1. grid.left
grid 组件离容器左侧的距离。默认:[ default: '10%' ]

2. grid.top
grid 组件离容器上侧的距离。默认:[ default: '10%'60 ]

3. grid.right
grid 组件离容器右侧的距离。默认:[ default: '10%' ]

4. grid.bottom
grid 组件离容器下侧的距离。默认:[ default: 60 ]

5. grid.width
grid 组件的宽度,默认自适应。默认:[ default: 'auto' ]

6. grid.height
grid 组件的高度,默认自适应。默认:[ default: 'auto' ]

7. grid.backgroundColor
网格背景色,默认透明。默认:[ default:'transparent' ]
注意: 此配置项生效的前提是,设置了 show: true

8. grid.borderColor
网格的边框颜色。支持的颜色格式同 backgroundColor。默认:[ default: '#ccc' ]
注意: 此配置项生效的前提是,设置了 show: true

9. grid.borderWidth
网格的边框线宽。默认:[ default: 1 ]
注意: 此配置项生效的前提是,设置了 show: true


四、直角坐标系 grid 中的 x 轴,xAxis 官方文档

在这里插入图片描述
1. xAxis.type
坐标轴类型。默认 [ default: 'category' ]
(1)'value', 数值轴,适用于连续数据。
(2)'category', 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
(3)'time', 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
(3)'log', 对数轴。适用于对数数据。

2. xAxis.name
坐标轴命名名称;

3. xAxis.nameLocation
坐标轴命名名称显示位置。默认 [ default: 'end' ]
可选: start、middle/center、end

4. xAxis.nameTextStyle
坐标轴命名名称的文字样式。
(1)'xAxis.nameTextStyle.color',坐标轴名称的颜色。

(2)'xAxis.nameTextStyle.fontStyle',坐标轴名称文字字体的风格,默认: [ default: 'normal' ],可选normal、italic、oblique;

(3)'xAxis.nameTextStyle.fontWeight',坐标轴名称文字字体的粗细,默认: [ default: 'normal' ],可选normal、bold、bolder、lighter、100/200/300…;

(4)'xAxis.nameTextStyle.fontFamily',坐标轴名称文字的字体系列,默认: [ default: 'sans-serif' ]

(5)'xAxis.nameTextStyle.fontSiz',坐标轴名称文字的字体大小,默认: [ default: 12]

(6)'xAxis.nameTextStyle.align',文字水平对齐方式,默认自动,可选: left、center、right。

(7)'xAxis.nameTextStyle.verticalAlign',文字垂直对齐方式,默认自动,可选: top、middle、bottom。

(8)'xAxis.nameTextStyle.lineHeight',行高。

5. xAxis.nameGap
坐标轴名称与轴线之间的距离,默认: [ default: 15 ]

6. xAxis.boundaryGap
坐标轴两边留白策略(即图标是否占满整个坐标轴)
(1)类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true;
(2)非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围

7. xAxis.min
坐标轴刻度最小值,默认: [ default: null ]

8. xAxis.max
坐标轴刻度最小值,默认: [ default: null ]

9. xAxis.axisLine

10. xAxis.axisTick

11. xAxis.axisLabel

12. xAxis.splitLine


五、直角坐标系 grid 中的 y 轴,yAxis 官方文档

1. yAxis.position
y轴的位置,可选 left、right。

2. yAxis.type
坐标轴类型,默认: [ default: value ],可选: value(数值轴,适用于连续数据)、category(类目轴)、time( 时间轴,适用于连续的时序数据)、log(对数轴。适用于对数数据)。

3. yAxis.name
坐标轴名称。

4. yAxis.nameLocation
坐标轴名称显示位置,默认: [ default: 'end' ],可选 start、 middle/center、end。

5. yAxis.nameTextStyle
坐标轴名称的文字样式,与 x 轴类似,这里就不多描述了。

6. yAxis.nameGap
坐标轴名称与轴线之间的距离,默认: [ default: 15 ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P3740 [HAOI2014]贴海报 离散化+线段树

题目描述 Bytetown城市要进行市长竞选&#xff0c;所有的选民可以畅所欲言地对竞选市长的候选人发表言论。为了统一管理&#xff0c;城市委员会为选民准备了一个张贴海报的electoral墙。 张贴规则如下&#xff1a; electoral墙是一个长度为N个单位的长方形&#xff0c;每个单位…

分组,采样和批处理– Java 8中的自定义收集器

在第一篇文章的后续部分&#xff0c;这次我们将编写一些更有用的自定义收集器&#xff1a;用于按给定的标准进行分组&#xff0c;采样输入&#xff0c;批处理和在固定大小的窗口上滑动。 分组&#xff08;计数事件&#xff0c;直方图&#xff09; 假设您有一些项目的集合&…

将G1内的SIM卡联系人导入到GMAIL的联系人中

将G1内的SIM卡联系人导入到GMAIL的联系人中 具体方法是&#xff1a;进入联系人——按下“MENU"键——导入联系人——按下“MENU"键——“全部导入”——“Contact type”下选择“Google"。这样你的SIM联系人就可以导入到你的设备中了&#xff08;联系人后会有“…

Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

全书共15章&#xff0c;主要包括网页制作基础、Dreamweaver CC网页制作、Photoshop CC网页图像设计、Flash CC网页动画设计以及综合案例实战5个部分。通过本书的学习&#xff0c;不仅能让读者学会三大软件的基本操作&#xff0c;而且本书中列举的实战案例&#xff0c;还可以让读…

element解决表格错位问题

https://www.jianshu.com/p/de922caf337c https://blog.csdn.net/qq_15385627/article/details/81700731 保留默认参数&#xff1a; https://segmentfault.com/q/1010000017831798/a-1020000017841050 解决element表格错位 /*解决表格错位&#xff0c;必须加在index.html或APP…

margin和text-align实现水平居中的区别

1.首先text-align只应用于内联块和内联元素 text-align影响的是元素中的文本内容的对其方式&#xff08;默认是left&#xff0c;设置为center时水平居中&#xff09; 所以&#xff0c;将text-align设置为center时&#xff0c;只有当应用于块级元素并且元素内容为文本时&#xf…

如何使用示例从Java中的类路径加载资源

Java中的类路径不仅用于加载.class文件&#xff0c;而且还可以用于加载资源&#xff0c;例如属性文件&#xff0c;图像&#xff0c;图标&#xff0c;缩略图或任何二进制内容。 Java提供了API来将这些资源读取为InputStream或URL。 假设您在项目的config文件夹中有一个属性文件 …

Ext 3.0 +ASP.NET2.0 可视化开发介绍

Ext Designer 总算出来了&#xff01;&#xff01;&#xff01;基于Web的应用开发终于可以可视化开发了&#xff0c;而且可以几乎不敲1行代码。 准备工具&#xff1a; &#xff08;1&#xff09;Ext Designer 1.0.2 &#xff08;2&#xff09;Visual Studio 2005 第一步&#x…

收集五款常用的HTML编辑软件

HTML&#xff08;HyperText Mark-up Language&#xff09;即超文本标记语言或超文本链接标示语言&#xff0c;是目前网络上应用最为广泛的语言&#xff0c;也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本&#xff0c;HTML命令可以说明文字、图形、动画、声…

创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置

记录一下 拉取项目时 npm run dev 报错 输入&#xff1a;npm rebuild node-sass 再重新 npm run dev 如果不能解决&#xff0c;请看这里 一、搭建vue-cli vue create 项目名称? Please pick a preset: > default (babel, eslint) //默认 > Manually select features …

JPA / Hibernate实体状态转换的初学者指南

介绍 Hibernate将开发人员的思维方式从SQL语句转移到实体状态转换。 一旦实体由Hibernate主动管理&#xff0c;所有更改将自动传播到数据库。 操作域模型实体&#xff08;及其关联&#xff09;比编写和维护SQL语句容易得多。 如果没有ORM工具&#xff0c;则添加新列需要修改所…

C# 接收邮件

C#没有内置收邮件的类&#xff0c;参考网络上的代码&#xff0c;针对POP3协议服务器使用 Jmail组件来收邮件&#xff0c;针对IMAP协议服务器使用LumiSoft.Net 。 另外&#xff0c;一般免费邮箱需要在邮箱设置中开启 POP3&#xff08;或IMAP&#xff09;、 SMTP服务才可以使用非…

js来监控复制粘贴

平时我们在复制网页上面代码到控制台调试时&#xff0c;有时会出现复制过来的代码后面加上了一下描述信息&#xff08;作者、版权等信息&#xff09;&#xff0c;每次需要删除才能运行&#xff0c;所以今天看看怎么能保证我们粘贴的代码不携带这些信息呢&#xff1f; (function…

创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件(.vue,js代码等)

下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一、引入elementUi 顺便一提axios使用说明 和axios在vue中使用 二、准备静态资源 三、封装.vue公共组件 四、封装.js公共组件 五、封装公共的js代码 六、封装全局的filter、directive等 一、引入…

Spring DI的配置使用

1、 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”&#xff0c;那先让我们复习一下类之间的关系&#xff1a; 泛化&#xff1a;表示类与类之间的继承关系、接口与接口之间的继承关系&#xff1b; 实现&#xff1a;表示类对接口的实现&#xff1b; 依赖&a…

休眠身份,序列和表(序列)生成器

介绍 在我以前的文章中&#xff0c;我谈到了不同的数据库标识符策略。 这篇文章将比较最常见的替代主要关键策略&#xff1a; 身份 序列 表&#xff08;序列&#xff09; 身份 IDENTITY类型&#xff08;包括在SQL&#xff1a;2003标准中&#xff09;受以下支持&#xff1a;…

flex pv3d 有用公式

实用公式 统领全书&#xff0c;我们已经有了各种运动和效果的公式。我已经提取出了最实用和最常用的公式、方程、以及代码的摘录&#xff0c;并将它们列在本章的最后。我认为将它们放到同一个地方应该对大家非常有帮助&#xff0c;因此我将这些我认为最需要的内容放到一起作为…

http https http2.0

一.http状态码 1xx&#xff08;信息性状态码&#xff0c;接受的请求正在处理&#xff09;2xx&#xff08;成功状态码&#xff0c;请求正常处理完毕&#xff09;200 OK204 No Content&#xff1a;请求成功但没有资源返回206 Partial Content&#xff1a;范围请求3xx&#xff08…

创建vue项目(三)路由跳转、反向代理、本地存储、状态管理

数据更新渲染&#xff0c;axios请求数据&#xff0c;配置环境 一、路由跳转 app.vue <template><div id"app"><keep-alive><router-view/></keep-alive></div> </template><script> export default {name: app }…

jinfo:JVM运行时配置的命令行浏览

在最近的几篇博客中&#xff08;特别是在对Java EE 7性能调优和优化以及WildFly性能调优的书的评论中&#xff09;&#xff0c;我引用了自己过去在某些Oracle JDK命令行工具上的博客文章。 令我震惊的是&#xff0c;我从来没有专门解决过漂亮的jinfo工具&#xff0c;这篇文章旨…