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