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,心愿对你有所帮忙,让咱们一起致力走向巅峰!
发表回复