python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图
1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮助!
4.效果图如下:
5.在methods中添加如下代码://注意:进行了封装
tt(max, min, mai, mi) {
console.log(max, min, mai, mi);
this.Chenoption = {
backgroundColor: "rgba(128, 128, 128, 1)",
title: {
text: "线路故障发生概率预测",
left: "50%",
top: "5%",
botom: "5%",
},
tooltip: {
trigger: "axis",
},
legend: {
// orient: 'vertical',
show: false,
left: "rigth",
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
},
grid: {
top: "14%",
left: "3%",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
show: false,
data: ["", "", "", "", "", "", "", "", "", "", "", "", ""],
},
yAxis: {
type: "value",
boundaryGap: false,
min: min,
max: max,
interval: mai,
},
series: [
{
name: "",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210, 36],
showSymbol: true,
symbol: "circle", //设定为实心点
symbolSize: 10,
color: "#000",
lineStyle: {
normal: {
width: 2,
color: "#000",
},
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: min,
itemStyle: {
color: "#FF0000",
},
},
{
yAxis: mi + min,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min,
itemStyle: {
color: "#FFFF00",
},
},
{
yAxis: mi + min + mi * 2,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 2,
itemStyle: {
color: "#00B050",
},
},
{
yAxis: mi + min + mi * 6,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 6,
itemStyle: {
color: "#FFFF00",
},
},
{
yAxis: mi + min + mi * 8,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 8,
itemStyle: {
color: "#FF0000",
},
},
{
yAxis: mi + min + mi * 10,
},
],
],
},
},
{
name: "",
type: "line",
smooth: "true",
symbol: "circle", //设置拐点
symbolSize: 100, //设置拐点的大小
itemStyle: {
//拐点的属性
color: "#6633cc",
},
lineStyle: {
color: "#6633cc",
width: 5,
},
},
],
};
// console.log(this.Chenoption.yAxis.min);
// this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
this.drawChart("myChart", this.Chenoption);
},
5.在methods中tt方法的同级添加如下代码:drawChart(drawChartId, Chenoption) {
this.myChart = echarts.init(document.getElementById(drawChartId));
let option = Chenoption;
// 指定图表的配置项和数据
this.myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
},
6.在mounted中添加如下代码:mounted() {
var max = 300; //根据项目需求进行更改
var min = -30;
var mai = (min + max) / 2 - min;
var mi = (max - min) / 10;
console.log(mai);
this.tt(max, min, mai, mi);
},
7.在template中添加如下代码:
8.整体代码如下:
我是echarts彩虹图
import echarts from "echarts";
export default {
name: "ech",
data() {
return {};
},
mounted() {
var max = 300;
var min = -30;
var mai = (min + max) / 2 - min;
var mi = (max - min) / 10;
console.log(mai);
this.tt(max, min, mai, mi);
},
methods: {
// 对echarts 方法的封装
drawChart(drawChartId, Chenoption) {
this.myChart = echarts.init(document.getElementById(drawChartId));
let option = Chenoption;
// 指定图表的配置项和数据
this.myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
},
tt(max, min, mai, mi) {
console.log(max, min, mai, mi);
this.Chenoption = {
backgroundColor: "rgba(128, 128, 128, 1)",
title: {
text: "线路故障发生概率预测",
left: "50%",
top: "5%",
botom: "5%",
},
tooltip: {
trigger: "axis",
},
legend: {
// orient: 'vertical',
show: false,
left: "rigth",
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
},
grid: {
top: "14%",
left: "3%",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
show: false,
data: ["", "", "", "", "", "", "", "", "", "", "", "", ""],
},
yAxis: {
type: "value",
boundaryGap: false,
min: min,
max: max,
interval: mai,
},
series: [
{
name: "",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210, 36],
showSymbol: true,
symbol: "circle", //设定为实心点
symbolSize: 10,
color: "#000",
lineStyle: {
normal: {
width: 2,
color: "#000",
},
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: min,
itemStyle: {
color: "#FF0000",
},
},
{
yAxis: mi + min,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min,
itemStyle: {
color: "#FFFF00",
},
},
{
yAxis: mi + min + mi * 2,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 2,
itemStyle: {
color: "#00B050",
},
},
{
yAxis: mi + min + mi * 6,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 6,
itemStyle: {
color: "#FFFF00",
},
},
{
yAxis: mi + min + mi * 8,
},
],
],
},
},
{
name: "",
type: "line",
animation: false,
hoverAnimation: false,
markArea: {
data: [
[
{
yAxis: mi + min + mi * 8,
itemStyle: {
color: "#FF0000",
},
},
{
yAxis: mi + min + mi * 10,
},
],
],
},
},
{
name: "",
type: "line",
smooth: "true",
symbol: "circle", //设置拐点
symbolSize: 100, //设置拐点的大小
itemStyle: {
//拐点的属性
color: "#6633cc",
},
lineStyle: {
color: "#6633cc",
width: 5,
},
},
],
};
// console.log(this.Chenoption.yAxis.min);
// this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
this.drawChart("myChart", this.Chenoption);
},
},
};
9.本期的教程到了这里就结束啦,希望对你有所帮助,是不是很nice,既然我们选择了这个领域,要相信自己是最棒的,让我们一起努力走向巅峰!
python画图代码彩虹-echarts绘制彩虹图相关推荐
- 【echarts】echarts绘制关系图
echarts绘制关系图,效果如图,粗麻编写,教程往下看 1.vue安装echarts npm install echarts 2.引入echarts 3.在VUE页面中编写 遇到问题:关系数据显示不 ...
- Echarts绘制关系图
文章目录 基本应用 节点重名问题解决方案 两点之间如何绘制多条连线 Echarts图随着浏览器窗口的变化而变化 今天要发博客,因为今天再不发,2020就过去啦! 最近需要用到Echarts绘制关系图, ...
- python画图代码彩虹-python绘制彩虹图
本文实例为大家分享了python绘制彩虹图的具体代码,供大家参考,具体内容如下 from turtle import * #控制彩虹路径 def path(pen, r, g, b): pen.pen ...
- python画图代码彩虹-python绘制简单彩虹图
本文实例为大家分享了python绘制彩虹图的具体代码,供大家参考,具体内容如下 代码: from turtle import * #控制彩虹路径 def path(pen, r, g, b): pen ...
- python画图代码彩虹-Python利用turtle库绘制彩虹代码示例
语言:Python IDE:Python.IDE 需求 做出彩虹效果 颜色空间 RGB模型:光的三原色,共同决定色相 HSB/HSV模型:H色彩,S深浅,B饱和度,H决定色相 需要将HSB模型转换为R ...
- python画图代码彩虹-用python画一颗彩虹色爱心送给女朋友！！！
1.准备工作: 代码中用到numpy和matplotlib,需要先安装这两个库 pip3 install numpypip3 install matplotlib 会用到的数学公式:(x^2+y^2- ...
- python程序画漂亮图_用python画图代码:正弦图像、多轴图等案例
python画图 正弦图像: #coding:utf-8 import numpy as np import matplotlib.pyplot as plt x=np.linspace(0,10,1 ...
- 用python画图代码简单-【Matplotlib】利用Python进行绘图
[Matplotlib] 教程:https://morvanzhou.github.io/tutorials/data-manipulation/plt/ 官方文档:https://matplotli ...
- 用python画图代码-【Matplotlib】利用Python进行绘图
[Matplotlib] 教程:https://morvanzhou.github.io/tutorials/data-manipulation/plt/ 官方文档:https://matplotli ...
最新文章
- 介绍一下Seekafile Server
- 如何根据CSD寄存器计算SD卡容量(csd v1.0 csd v2.0)
- 机器学习面试题(part5)
- 禁用当前的账户win7_系统小技巧：服务客人 开启Windows 10来宾账户
- OpenShift 4 - 安装 OpenShift 集群后如何删除节点或增加新节点
- 深度学习自学（二十二）：人脸检测人脸识别-嵌入式平台方案汇总
- cc2640蓝牙数据接收丢包问题
- 软考-架构师-第六章-开发方法 第二节 软件开发模型(读书笔记)
- 360校招笔试题总结1
- 分享一个冰雪复古辅助多开脚本
- 二、5移动端网页适配
- MAC Nginx配置： open() “xxx/logs/error.log“ failed (2: No such file or direc
- matlab kmo检验,RPCL(Rival Penalized Competitive Learning)在matlab下的实现
- win7 报错 failed to install servicefailed installing
- 32位MIPS流水线CPU设计
- house of cat
- COUNT、COUNTA、MAX三个函数在excel计数上的应用对比和案例
- 前端技能树，面试复习第 54 天—— 手写代码：情景题
- 坚持使用Ubuntu
- 词汇量计算机,都在说词汇量，究竟多少词汇才够用？