echarts绘制彩虹色背景
大致成品如图所示
关键的步骤:
var dom = document.getElementById("myChart");
var myChart = echarts.init(dom);
var app = {};
var option = null;
option = {
backgroundColor:'rgba(128, 128, 128, 1)',
title: {
text: '线路故障发生概率预测',
left: '50%',
top: '5%',
botom:"5%"
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
} },
legend: {
// orient: 'vertical',
show: false,
left: 'rigth',
data: [{
name: 'line1',
icon: 'bar'
}, {
name: 'line2',
icon: 'bar'
}, {
name: 'line3',
icon: 'bar'
}, {
name: 'line4',
icon: 'bar'
}, {
name: 'line5',
icon: 'bar'
}, {
name: 'line6',
icon: 'bar'
}],
selected: {
'line1': true,
'line2': true,
'line3': true,
'line4': true,
'line5': true,
'line6': true,
//不想显示的都设置成false
}
},
grid: {
top: '14%',
left: '3%',
right: '1%',
bottom: '3%',
containLabel: true,
// color: '#032c78'
},
color: ['rgba(52,252,53,1)', '#FFF82F', '#F99A2D', '#FB343B', '#C936D7', '#6B3370'],
xAxis: {
// nameLocation: 'center',
type: 'category',
boundaryGap: false,
data: this.mouthDate,
// show: true,
// axisTick: {
// show: true
// },
// nameTextStyle: {
// fontSize: 20
// },
position: 'bottom',
axisLabel: { //坐标轴刻度的属性
fontSize: 32,
color: 'rgba(17,108,255,1)',
// textalign: 'center',
rotate: 90,
// interval:0
}, },
yAxis: [{
// nameLocation:'center',
nameGap: 35,
name: '',
boundaryGap: true,
min: 0,
max: 280,
// splitNumber: 10,
interval: 35,
type: 'value',
// yAxisIndex: 0,
axisLabel: {
formatter: '{value}',
},
nameTextStyle: { //坐标轴名称的样式
color: "rgba(255,255,255,1)",
fontSize: 24,
textShadowColor: 'rgba(0,128,255,1)',
fontFamily: "SourceHanSansCN",
textShadowOffsetX: 0,
textShadowOffsetY: 0,
textShadowBlur: 15,
padding: [0, 0, 0, 0]
},
splitLine: {
show: false
},
axisTick: { //是否显示坐标轴刻度
show: false
},
axisLabel: { //坐标轴刻度的属性
fontSize: 32,
color: 'rgba(17,108,255,1)',
textalign: 'center' },
yAxisIndex: 1
} ], series: [ //就是从这个地方开始的 主要用的是markArea 和legend
{
name: 'line1',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '0',
itemStyle: {
color: 'rgba(52,252,53,1)'
}
}, {
yAxis: '35'
}]
]
}, }, {
name: 'line2',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '35',
itemStyle: {
color: '#FFF82F'
}
}, {
yAxis: '70'
}]
]
}
}, {
name: 'line3',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '70',
itemStyle: {
color: '#F99A2D'
}
}, {
yAxis: '115'
}]
]
}
},
{
name: 'line4',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '115',
itemStyle: {
color: '#FB343B'
}
}, {
yAxis: '150'
}]
]
}
},
{
name: 'line5',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '150',
itemStyle: {
color: '#C936D7'
}
}, {
yAxis: '250'
}]
]
}
}, {
name: 'line6',
type: 'line',
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [
[{
yAxis: '250',
itemStyle: {
color: '#6B3370'
}
}, {
yAxis: '280'
}]
]
}
},
{
name: '',
type: 'line',
smooth: "true",
symbol: 'circle', //设置拐点
symbolSize: 16, //设置拐点的大小
itemStyle: { //拐点的属性
color: '#005664',
//
},
lineStyle: {
color: "#007B8F",
width: 5,
},
data: this.mouthPm25List
}, ],
}
myChart.setOption(option)
echarts绘制彩虹色背景的更多相关文章
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- 使用android.graphics.Path类自绘制PopupWindow背景
PopupWindow简单介绍 PopupWindow是悬浮在当前activity上的一个容器,用它能够展示随意的内容. PopupWindow跟位置有关的API有以下几个: showAsDropDo ...
- 使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- C#绘制渐变背景
//绘制渐变色背景 Graphics g = e.Graphics; LinearGradientBrush linearGradientBrush = new LinearGradientBrush ...
- Html飞机大战(一):绘制动态背景
好家伙,飞机大战终于开始弄了 这会有很多很多复杂的东西,但是我们总要从最简单,和最基础的部分开始, 我们先从背景开始弄吧! 1.绘制静态背景 这里我们会用到canvas <!DOCTYPE ...
- react使用Echarts绘制高亮可点击选中的省市地图
最近做项目遇到一个需求,需要显示广东省各个地级市的地图,并且鼠标移入高亮显示,鼠标点击可以选中某个地级市.在网上查阅了大量资料之后,最后选择了使用echarts实现该需求.在此记录一下,希望可以帮到有 ...
- 用ECharts绘制Prometheus图表,实现类似Grafana的自定义Dashboard
大家一般都是用Grafana自定义Dashboard来监控Prometheus数据的,作者这次尝试用ECharts来绘制Prometheus数据图表,一方面可以减少依赖,另一方面可以将监控界面灵活 ...
- 前端 | 使用 ECharts 绘制关系图
0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...
随机推荐
- unity 初始化数据存储问题
在用unity进行开发的时初始化的数据和中间实时生成的数据存储不同,初始化文件数据建议安放在asset-StreamingAssets文件下,需要时读取取来.运行时所需的实时文件或数据持久化的xml文 ...
- 利用 Ansiable 自动化部署 Veeam Backup & Replication 9.5U4b
利用 Ansiable 自动化部署 Veeam Backup & Replication 9.5U4b 前言 上周出差期间接到一个做CMP(云管平台)Partner的需求,要在无人值守的安装 ...
- MarkDown的常用语法
个人比较喜欢Markdown的语法,常用来做一些笔记,下面就简单介绍一下它的语法. 概览 宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown ...
- spring cloud Ribbon的使用和实现原理
转载链接:https://blog.csdn.net/qq_20597727/article/details/82860521 简介 这篇文章主要介绍一下ribbon在程序中的基本使用,在这里是单独拿 ...
- Magicodes.IE已支持导出Word、Pdf和Html
关于Magicodes.IE 导入导出通用库,通过导入导出DTO模型来控制导入和导出,支持Excel.Word.Pdf和Html. GitHub地址:https://github.com/xin-la ...
- Vue---mock.js 使用
mockjs 概述 在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数 ...
- 安卓—自定义 AlertDialog 的样式
自定义修改安卓弹出框的样式 效果图: 1.在style.xml下添加 <!-- 自定义弹出样式 --> <style name="MyDialogStyle" p ...
- 学习笔记04IIS
IIS机制:1.能监听端口,获取socket的客户端对象2.获取请求报文,将请求报文变成对象.3.处理请求报文,通过HttpApplication.ProcessRequest方法来处理HttpCon ...
- Redis开发与运维:SDS
STRING 我们会经常打交道的string类型,在redis中拥有广泛的使用.也是开启redis数据类型的基础. 在我最最开始接触的redis的时候,总是以为字符串类型就是值的类型是字符串. 比如: ...
- CSPS模拟 78
大敛好稳啊..居然在模拟赛拿了540.. 有点畏惧.jpg 而我就是什么什么不行级人物了.. 真正在联赛拉开那么多分怎么追啊.. T1kmp?hash? T2 概率小到炸精时,对答案也就没贡献了 然后 ...