当前位置: 开发笔记 > 编程语言 > 正文

ECharts折线图堆叠设置方法及配置详解

作者：潮人-小麦 | 来源：互联网 | 2024-10-23 16:25

一.问题汇总：折线图问题与解决折线图中的多条折线，怎么设置？怎么设置echarts的背景颜色？怎么设置X轴，Y

一 . 问题汇总&＃xff1a; 折线图问题与解决折线图中的多条折线&＃xff0c;怎么设置&＃xff1f;

怎么设置echarts的背景颜色&＃xff1f;

怎么设置X轴&＃xff0c;Y轴的坐标线的颜色&＃xff1f;

怎么将X轴的数据倾斜显示&＃xff1f;

怎么让你的折线有弧度&＃xff1f;

初始样式如图&＃xff0c;以及要解决的问题&＃xff1a;

二. 前提准备条件要使用echarts&＃xff0c;首先要在你的页面中引入echarts.js&＃xff1b;

要在.html文件中&＃xff0c;设置一个容器&＃xff0c;并给它设置宽高属性&＃xff1b;再次声明&＃xff0c;必须给容器设置宽高&＃xff0c;它是用来给画布提供一个空间&＃xff0c;否则是不会显示的&＃xff1b;

最后就是关于echarts的配置&＃xff1b;可以单独写一个js文件&＃xff0c;然后引进来&＃xff1b;

也可以直接在index.html中写一个

index.html文件代码如下&＃xff1a;

我这里图方便&＃xff0c;js就直接写在html文件里了

// 获取到这个DOM节点&＃xff0c;然后初始化

var myChart &＃61; echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容

var option &＃61; {

// 定义样式和数据

}

// 一定不要忘了这个&＃xff0c;具体是干啥的我忘了&＃xff0c;官网是这样写的使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

注意&＃xff1a;

你在写myChart.setOption(option);这行代码的时候一定不要忘了这个myChart是要和你上面定义的var 变量名对应起来&＃xff0c;比如var myChart &＃61; echarts.init(document.getElementById("box"));

举个栗子吧&＃xff1a;

如果你定义的变量名是oMyChart,那你就这样写&＃xff1a;

var oMyChart &＃61; echarts.init(document.getElementById("box"));

var option &＃61; {

// 定义样式和数据 }

oMyChart.setOption(option);

关键内容都在option中:

var option &＃61; {

backgroundColor: &＃39;#FBFBFB&＃39;,

tooltip : {

trigger: &＃39;axis&＃39;

legend: {

data:[&＃39;充值&＃39;,&＃39;消费&＃39;]

calculable : true,

xAxis : [

{

axisLabel:{

rotate: 30,

interval:0

axisLine:{

lineStyle :{

color: &＃39;#CECECE&＃39;

}

type : &＃39;category&＃39;,

boundaryGap : false,

data : function (){

var list &＃61; [];

for (var i &＃61; 10; i <&＃61; 18; i&＃43;&＃43;) {

if(i<&＃61; 12){

list.push(&＃39;2016-&＃39;&＃43;i &＃43; &＃39;-01&＃39;);

}else{

list.push(&＃39;2017-&＃39;&＃43;(i-12) &＃43; &＃39;-01&＃39;);

}

return list;

}()

}

yAxis : [

{

type : &＃39;value&＃39;,

axisLine:{

lineStyle :{

color: &＃39;#CECECE&＃39;

}

series : [

{

name:&＃39;充值&＃39;,

type:&＃39;line&＃39;,

symbol:&＃39;none&＃39;,

smooth: 0.2,

color:[&＃39;#66AEDE&＃39;],

data:[800, 300, 500, 800, 300, 600,500,600]

{

name:&＃39;消费&＃39;,

type:&＃39;line&＃39;,

symbol:&＃39;none&＃39;,

smooth: 0.2,

color:[&＃39;#90EC7D&＃39;],

data:[600, 300, 400, 200, 300, 300,200,400]

}

]

};

三. 问题解决

3.1 怎么给echarts的容器添加背景色&＃xff1f;

这是我碰到的第一个坑&＃xff0c;你是不是和我一样&＃xff0c;直接给容器添加了background-color属性&＃xff0c;但是你会发现并没有什么卵用

代码如下&＃xff1a;

效果如下&＃xff1a;你会发现背景色应用不上&＃xff0c;这里我自己认为&＃xff0c;echarts画折线图什么的&＃xff0c;就相当于是使用canvas在画图&＃xff0c;它在画图前已经将画布初始化了&＃xff0c;所以给容器添加背景色是不行的&＃xff0c;那么怎么办呢&＃xff1f;

解决办法&＃xff1a;要在optionecharts图的配置中进行配置&＃xff0c;添加background-color属性&＃xff1b;

为了区别&＃xff0c;看看到底是给容器添加的背景色应用上了&＃xff0c;还是option中的背景色应用上了&＃xff1b;

我们设置容器背景为粉色&＃xff0c;设置echarts中的option为#FBFBFB&＃xff1b;

代码如下&＃xff1a;

// 获取到这个DOM节点&＃xff0c;然后初始化

var myChart &＃61; echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容 // 定义样式和数据 var option &＃61; {

// 给echarts图设置背景色 backgroundColor: &＃39;#FBFBFB&＃39;, // -----------> // 给echarts图设置背景色 tooltip: {

trigger: &＃39;axis&＃39;

legend: {

data: [&＃39;充值&＃39;, &＃39;消费&＃39;]

calculable: true,

xAxis: [{

type: &＃39;category&＃39;,

// boundaryGap: false, data: function() {

var list &＃61; [];

for (var i &＃61; 10; i <&＃61; 18; i&＃43;&＃43;) {

if (i <&＃61; 12) {

list.push(&＃39;2016-&＃39; &＃43; i &＃43; &＃39;-01&＃39;);

} else {

list.push(&＃39;2017-&＃39; &＃43; (i - 12) &＃43; &＃39;-01&＃39;);

}

return list;

}()

}],

yAxis: [{

type: &＃39;value&＃39;

}],

series: [{

type: &＃39;line&＃39;,

data: [800, 300, 500, 800, 300, 600, 500, 600]

}, {

type: &＃39;line&＃39;,

data: [600, 300, 400, 200, 300, 300, 200, 400]

}]

};

// 一定不要忘了这个&＃xff0c;具体是干啥的我忘了&＃xff0c;官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

区别以及效果&＃xff1a;在这里我同时给容器添加背景色&＃xff0c;在echarts配置中设置背景色&＃xff0c;一会我们看看是哪个背景色作用上了&＃xff0c;代码如下&＃xff1a;很显然&＃xff0c;配置里的背景色应用上了&＃xff0c;所以直接给容器设置背景是行不通的&＃xff0c;效果如图所示&＃xff1a;

3.2 怎么设置多条折线以及每条折线的颜色在series中以数组形式添加多组数据即可&＃xff1b;

在每条折线里面直接添加color: [&＃39;相应的颜色&＃39;]

代码如下&＃xff1a;

效果图如下&＃xff1a;

3.3 去掉小圆点设置symbol: &＃39;none&＃39;

代码对比&＃xff1a;

效果对比&＃xff1a;

3.4 设置折线图的弧度设置smooth属性

属性值在0-1之间

代码对比图&＃xff1a;

效果对比图&＃xff1a;

3.5 设置坐标轴的颜色

为了让效果颜色更加明显&＃xff0c;就给坐标轴添加比较显眼的颜色&＃xff0c;只做个示范用&＃xff0c;项目中肯定不会用这么重的颜色&＃xff0c;一般使用灰色系的颜色比较淡的设置X轴颜色为红色在xAxis下添加

axisLine: {

lineStyle: {

color: &＃39;red&＃39;

}

},同理设置Y轴

代码&＃xff1a;

效果图&＃xff1a;

3.6 怎么让折线图从X轴0刻度开始设置boundaryGap: false,

代码如下&＃xff1a;

效果如下&＃xff1a;

3.7 怎么让X轴的时间这组数据旋转有时候我们X轴数据比较长又比较多的时候&＃xff0c;水平放置肯定成不下&＃xff0c;那我们就让它倾斜着放&＃xff0c;这样就可以放更多的数据。

好了&＃xff0c;废话不多说&＃xff0c;看代码&＃xff1a;

效果如图&＃xff1a;

四. 突然发现我写的有个小问题&＃xff0c;少了一组数据&＃xff0c;很尴尬的赶脚你可以直接在data中添加一组数据

哈哈&＃xff0c;我比较懒&＃xff0c;就直接修改那个判断条件&＃xff0c;将i<&＃61;18改成i<18;

完整的代码如下&＃xff1a;

// 获取到这个DOM节点&＃xff0c;然后初始化

var myChart &＃61; echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容 var option &＃61; {

// 定义样式和数据 backgroundColor: &＃39;#FBFBFB&＃39;,

tooltip: {

trigger: &＃39;axis&＃39;

legend: {

data: [&＃39;充值&＃39;, &＃39;消费&＃39;]

calculable: true,

xAxis: [{

axisLabel: {

rotate: 30,

interval: 0

axisLine: {

lineStyle: {

color: &＃39;red&＃39;

}

type: &＃39;category&＃39;,

boundaryGap: false,

data: function() {

var list &＃61; [];

for (var i &＃61; 10; i <18; i&＃43;&＃43;) {

if (i <&＃61; 12) {

list.push(&＃39;2016-&＃39; &＃43; i &＃43; &＃39;-01&＃39;);

} else {

list.push(&＃39;2017-&＃39; &＃43; (i - 12) &＃43; &＃39;-01&＃39;);

}

return list;

}()

}],

yAxis: [{

type: &＃39;value&＃39;,

axisLine: {

lineStyle: {

color: &＃39;#CECECE&＃39;

}

}],

series: [{

type: &＃39;line&＃39;,

symbol: &＃39;none&＃39;,

smooth: 0.3,

color: [&＃39;#66AEDE&＃39;],

data: [800, 300, 500, 800, 300, 600, 500, 600]

}, {

type: &＃39;line&＃39;,

symbol: &＃39;none&＃39;,

smooth: 0.3,

color: [&＃39;#90EC7D&＃39;],

data: [600, 300, 400, 200, 300, 300, 200, 400]

}]

};

// 一定不要忘了这个&＃xff0c;具体是干啥的我忘了&＃xff0c;官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

效果如图&＃xff1a;

五. 鼠标放在折线上&＃xff0c;显示该折点的数据

在series中添加itemStyle : { normal: {label : {show: true}}},

效果如下&＃xff1a;

注&＃xff1a;鼠标不放在上面是不会显示该点数据的。

折点数据设置背景色

在series中添加样式

我在echarts 官方demo上加了一下&＃xff0c;效果如下&＃xff1a;

把以下代码&＃xff0c;放到echarts的一个demo下&＃xff0c;替换之后&＃xff0c;运行可查看效果&＃xff1a;

地址简书links.jianshu.com

option &＃61; {

title: {

text: &＃39;未来一周气温变化&＃39;,

subtext: &＃39;纯属虚构&＃39;

tooltip: {

trigger: &＃39;axis&＃39;

legend: {

data:[&＃39;最高气温&＃39;,&＃39;最低气温&＃39;]

toolbox: {

show: true,

feature: {

dataZoom: {

yAxisIndex: &＃39;none&＃39;

dataView: {readOnly: false},

magicType: {type: [&＃39;line&＃39;, &＃39;bar&＃39;]},

restore: {},

saveAsImage: {}

}

xAxis: {

type: &＃39;category&＃39;,

boundaryGap: false,

data: [&＃39;周一&＃39;,&＃39;周二&＃39;,&＃39;周三&＃39;,&＃39;周四&＃39;,&＃39;周五&＃39;,&＃39;周六&＃39;,&＃39;周日&＃39;]

yAxis: {

type: &＃39;value&＃39;,

axisLabel: {

formatter: &＃39;{value} °C&＃39;

}

series: [

{

name:&＃39;最高气温&＃39;,

type:&＃39;line&＃39;,

data:[11, 11, 15, 13, 12, 13, 10],

itemStyle : { normal: {

label : {show: true,color:&＃39;white&＃39;,backgroundColor:&＃39;black&＃39;}

}},

markPoint: {

data: [

{type: &＃39;max&＃39;, name: &＃39;最大值&＃39;},

{type: &＃39;min&＃39;, name: &＃39;最小值&＃39;}

]

markLine: {

data: [

{type: &＃39;average&＃39;, name: &＃39;平均值&＃39;}

]

}

{

name:&＃39;最低气温&＃39;,

type:&＃39;line&＃39;,

data:[1, -2, 2, 5, 3, 2, 0],

markPoint: {

data: [

{name: &＃39;周最低&＃39;, value: -2, xAxis: 1, yAxis: -1.5}

]

markLine: {

data: [

{type: &＃39;average&＃39;, name: &＃39;平均值&＃39;},

[{

symbol: &＃39;none&＃39;,

x: &＃39;90%&＃39;,

yAxis: &＃39;max&＃39;

}, {

symbol: &＃39;circle&＃39;,

label: {

normal: {

position: &＃39;start&＃39;,

formatter: &＃39;最大值&＃39;

}

type: &＃39;max&＃39;,

}]

]

}

]

};

推荐阅读

function
优化 DOM 以提升 JavaScript 性能

本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能，包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]

蜡笔小新 2024-11-21 18:16:19
client
入门指南：使用FastRPC技术连接Qualcomm Hexagon DSP

本文旨在为初学者提供关于如何使用FastRPC技术连接Qualcomm Hexagon DSP的基础知识。FastRPC技术允许开发者在本地客户端实现远程调用，从而简化Hexagon DSP的开发和调试过程。 ... [详细]

蜡笔小新 2024-11-21 10:03:34
int
如何将过往经历转化为职场动力

本文探讨了如何将个人经历，特别是非传统的职业路径，转化为职业生涯中的优势。通过作者的亲身经历，展示了舞蹈生涯对商业思维的影响。 ... [详细]

蜡笔小新 2024-11-21 17:49:51
select
Struts2 + json+ jquery 实现三级联动action和jsp代码竟然有小红叉，提示缺双引号，检查了转义符号也没缺啊，求解

publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]

蜡笔小新 2024-11-21 16:25:41
main
Go从入门到精通系列视频之go编程语言密码学哈希算法（二）

Go从入门到精通系列视频之go编程语言密码学哈希算法（二） ... [详细]

蜡笔小新 2024-11-21 10:55:36
select
OBS Studio自动化实践：利用脚本批量生成录制场景

本文探讨了如何利用OBS Studio进行高效录屏，并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]

蜡笔小新 2024-11-21 10:44:53
client
web: _show -> _info 造轮子编程

问题场景用Java进行web开发过程当中，当遇到很多很多个字段的实体时，最苦恼的莫过于编辑字段的查看和修改界面，发现2个页面存在很多重复信息，能不能写一遍？有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]

蜡笔小新 2024-11-21 10:21:24
main
spring boot使用jetty无法启动

spring boot使用jetty无法启动 ... [详细]

蜡笔小新 2024-11-21 10:15:52
select
深入解析 Bootstrap Table 的使用技巧

本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作，包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]

蜡笔小新 2024-11-20 17:21:26
select
Oracle VM VirtualBox 使用指南：创建静态网页及高级功能

本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换，包括安装Guest Additions增强功能，以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]

蜡笔小新 2024-11-21 18:13:22
client
二维码的实现与应用

本文介绍了二维码的基本概念、分类及其优缺点，并详细描述了如何使用Java编程语言结合第三方库（如ZXing和qrcode.jar）来实现二维码的生成与解析。 ... [详细]

蜡笔小新 2024-11-21 17:10:15
spring
从CodeIgniter中提取图像处理组件

本指南旨在帮助开发者在未使用CodeIgniter框架的情况下，如何独立使用其强大的图像处理功能，包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]

蜡笔小新 2024-11-20 19:57:35
main
Jupyter Notebook多语言环境搭建指南

本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境，包括必要的软件安装和配置步骤。 ... [详细]

蜡笔小新 2024-11-20 18:37:27
case
Android与JUnit集成测试实践

本文探讨了如何在Android项目中集成JUnit进行单元测试，并详细介绍了修改AndroidManifest.xml文件以支持测试的方法。 ... [详细]

蜡笔小新 2024-11-20 18:30:14
case
MongoDB 高可用集群搭建指南：分片、读写分离与负载均衡

本文详细介绍了如何搭建一个高可用的MongoDB集群，包括环境准备、用户配置、目录创建、MongoDB安装、配置文件设置、集群组件部署等步骤。特别关注分片、读写分离及负载均衡的实现。 ... [详细]

蜡笔小新 2024-11-20 18:28:16

潮人-小麦

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章