echarts 彩虹图组件封装
1. 开发环境 vue+echarts
2. 电脑系统 windows10 专业版
3. 在应用 vue+echarts 开发的过程中, 咱们可能会须要绘制彩虹图, 上面我来分享一下,vue 中应用 echarts 彩虹图的组件封装。
4 在组件中增加如下代码:
<template>
<div id="chenechartsmo">
<div :id="dataObjpro.id" v-if="chenda.show" style="width: 100%; height: 100%"></div>
</div>
</template>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#chenechartsmo {
width: 100%;
height: 96%;
box-sizing: border-box;
/* border: 2px solid yellow; */
}
</style>
<script>
import echarts from "echarts";
export default {
name: "Chenykt",
props: ["dataObjpro"],
data() {
return {chenda: this.dataObjpro,};
},
created() {},
mounted() {this.$nextTick(() => {
let max = this.chenda.max;
let min = this.chenda.min;
let mai = (min + max) / 2 - min;
let mi = (max - min) / 10;
let data=this.chenda.data;
console.log(this.chenda);
this.tt(max, min, mai, mi, this.chenda.id, this.chenda.title,data);
});
},
watch: {
chenda: {handler(newValue, oldValue) {console.log(newValue);
console.log("变动");
console.log(newValue);
let max = newValue.max;
let min = newValue.min;
let mai = (min + max) / 2 - min;
let mi = (max - min) / 10;
let id = newValue.id;
let title = newValue.title;
let data=newValue.data;
console.log(this.chenda);
this.$nextTick(() => {this.tt(max, min, mai, mi, id, title,data);
})
},
deep: true,
},
},
methods: {dataObjfun() {console.log("产生了变动");
console.log("+++++++++++");
},
// 封装 echarts 画图 一
drawChart(drawChartId, Chenoption) {this.myChart = echarts.init(document.getElementById(drawChartId));
let option = Chenoption;
// 指定图表的配置项和数据
this.myChart.setOption(option);
window.onresize = function () {myChart.resize();
};
},
// 封装 echarts 画图一 完结啦
// 封装 echarts 画图二
// 留神: 进行了封装
tt(max, min, mai, mi, id, title,data) {// console.log(max, min, mai, mi);
this.Chenoption = {// backgroundColor: "rgba(128, 128, 128, 1)",
title: {
text: title,
left: "50%",
top: "-1%",
botom: "5%",
textStyle: {
fontSize: 18, // 字体大小
color: "#bfbfbf", // 字体色彩
},
},
tooltip: {trigger: "axis",},
legend: {
// orient: 'vertical',
show: false,
left: "rigth",
// data: ["邮件营销", "联盟广告", "视频广告", "间接拜访", "搜索引擎"],
data:data
},
grid: {
top: "14%",
left: "3%",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
axisTick: {show: false},
axisLabel: {
show: true,
textStyle: {color: "none",},
},
// show:false,
// data: [120, 132, 101, 134, 90, 230, 210, 36],
data:data
},
yAxis: {
type: "value",
boundaryGap: false,
min: min,
max: max,
interval: mai,
axisLine: {show: false,},
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
fontWeight: 700,
fontSize: 12,
},
},
},
series: [
{
name: "",
type: "line",
// data: [120, 132, 101, 134, 90, 230, 210, 36],
data:data,
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",
// color:'black'
},
},
{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(id, this.Chenoption);
},
// 封装 echarts 画图二 完结啦
},
};
</script>5. 在父组件中应用办法如下:
// 导入 彩虹图 组件
import Chenykt from "@/components/Kyt.vue";
// 在 template 中增加如下代码:
<Chenykt :dataObjpro="chenObj.chenLTObj.kykt" />5-1. 在 return 上面 增加如下代码:
chenObj: {
chenLTObj: {
kykt: {
max: 220,
min: 11,
id: "Kykt",
title: "管制用域控图",
show: true,
data: [120, 132, 101, 134, 90, 230, 210, 36],
},
}
}
// 能够依据本人需要进行批改 6. 成果如下:
7. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!