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,既然我们选择了这个领域,要相信自己是最棒的,让我们一起努力走向巅峰!
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
.png)
