1.引用echart图表，报如上的错误。
2.代码块：
<style scoped>
.chart1 {
width: 100%;
height: 280px;
}
.border {
border: 1px solid #cccccc;
}
.border-right {
border-right: 1px solid #cccccc;
padding: 100px;
}
.top {
margin-top: 10px;
}
.ivu-card-body {
padding: 0 !important;
}
.card_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.card_title span:nth-child(2) {
text-align: center;
flex-grow: 1;
}
.card_titlespan1 {
flex-grow: 1;
}
</style>
<template>
<div class="lwContent">
<Row :gutter="16" style="margin-bottom:15px">
<Card>
<div slot="title" class="card_title">
<h4>电力系统供给图</h4>
<span>单位：KWh</span>
<Select @on-change="changePlantup1" label="日" style="width:60px;padding-right: 5px">
<Option v-for="item in datePickerOption" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<DatePicker @on-change="changePlantTuup1" :type="up1TypeString" :value="new Date(this.dateVal)" style="width: 110px" :format="format"></DatePicker>
</div>
<Row>
<span style="backword">节点1</span>
<span>节点2</span>
<span>节点3</span>
<Col span="24">
<!--图-->
<Echarts id="Chartcda" :options='optionER' class="chart1"></Echarts>
</Col>
</Row>
</Card>
</Row>
</div>
</template>
<script>
import Echarts from '../components/Echarts/echarts-only.vue';
import util from '../../common/method/util';
import { copEchartsHandle } from '../../../utils/index.js';
let months = function() {
let arr = []
for (let m = 1; m < 13; m++) {
arr.push(m + ' 月')
}
return arr
}
let time = function() {
let arr1 = []
for (let i = 0; i < 24; i++) {
arr1[i] = i+1
}
return arr1
}
/**
* 当前时间戳
* @param stamp
* @returns {Array}
*/
let FirstSeven = function(stamp) {
let day = 24 * 60 * 60 //一整天的时间戳
let arr2 = []
for (let data = 1; data < 8; data++) {
stamp -= day
arr2.unshift(util.formatDateYearMonthDay(stamp))
}
return arr2
}
export default {
data() {
return {
months: months(),
datePickerOption: [
{
value: 'year',
label: '年'
},
{
value: 'month',
label: '月'
},
{
value: 'date',
label: '日'
},
{
value: 'datetime',
label: '时'
}
],
//设置日期
copDate: new Date(new Date().getTime() - 3600 * 24 * 1000).getTime(),
dateVal: new Date(new Date().getTime() - 3600 * 24 * 1000).getTime(),
Date_up2: new Date(new Date().getTime() - 3600 * 24 * 1000).getTime(),
date_down1:new Date(new Date().getTime() - 3600 * 24 * 1000).getTime(),
date_down2: new Date(new Date().getTime() - 3600 * 24 * 1000).getTime(),
format: '',
//设置初始日期类型为date
up1TypeString:'date',
TypeString_up2:'date',
dateType_down1: 'date',
dateType_down2: 'date',
optionER:{
title: {
text: "ER-数据关系1",
top: "top",
left: "center"
},
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: '#157eff'
// }, {
// offset: 1,
// color: '#35c2ff'
// }]),
// },
// shadowBlur: 10
// },
textStyle: {
color: '#333',
fontSize: 16,
fontWeight: 600,
},
legend: [{
formatter: function(name) {
return echarts.format.truncateText(name, 200, '12px', '…');
},
tooltip: {
show: true
},
selectedMode: 'false',
bottom: 20,
}],
animationDurationUpdate: 100,
animationEasingUpdate: 'quinticInOut',
xAxis: {
show: false,
type: 'value'
},
yAxis: {
show: false,
type: 'value'
},
series: [{
type: 'graph',
layout: 'none',
// coordinateSystem: 'cartesian2d',
// legendHoverLink: false,
// hoverAnimation: true,
// nodeScaleRatio: false,
//建头
edgeSymbol: ['circle', 'none'],
edgeSymbolSize: [2, 15],
edgeLabel: {
show: false,
normal: {
show: true,
position: 'middle',
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
},
focusNodeAdjacency: true,
roam: true,
//圆形上面的文字
label: {
normal: {
position: "inside",
show: true,
textStyle: {
fontSize: 12
},
}
},
lineStyle: {
normal: {
width: 1,
shadowColor: 'none',
color: '#ff0000'
},
},
data: [{
name: "贷款账户表",
symbolSize: 80,
x: 80,
y: 150,
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
},
// shadowBlur: 10
},
}, {
name: "块1",
symbol: "rect",
x: 200,
y: 210,
symbolSize: [80, 30],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "块2",
symbol: "rect",
x: 200,
y: 180,
symbolSize: [80, 30],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "块3",
x: 200,
y: 150,
symbol: "rect",
symbolSize: [80, 30],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "块n-1",
x: 200,
y: 120,
symbol: "rect",
symbolSize: [80, 30],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "块n",
x: 200,
y: 90,
symbol: "rect",
symbolSize: [80, 30],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
},
//节点B,C,D ....n
{
name: "机构表",
x: 300,
y: 250,
symbol: "rect",
symbolSize: [100, 40],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "产品表",
x: 300,
y: 200,
symbol: "rect",
symbolSize: [100, 40],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "客户表",
x: 300,
y: 150,
symbol: "rect",
symbolSize: [100, 40],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "合同表",
x: 300,
y: 100,
symbol: "rect",
symbolSize: [100, 40],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}, {
name: "其他表",
x: 300,
y: 50,
symbol: "rect",
symbolSize: [100, 40],
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
}
}
}
],
links: [{
source: "贷款账户表",
value: "89",
target: "块1",
}, {
source: "贷款账户表",
value: "23 ",
target: "块2",
}, {
source: "贷款账户表",
value: "231 ",
target: "块3",
}, {
source: "贷款账户表",
value: " 12",
target: "块n-1",
}, {
source: "贷款账户表",
value: "45 ",
target: "块n",
}, {
source: "块1",
value: "232 ",
target: "机构表",
}, {
source: "块2",
value: "231 ",
target: "产品表",
}, {
source: "块3",
value: "453 ",
target: "客户表",
}, {
source: "块n-1",
value: "32",
target: "合同表",
}, {
source: "块n",
value: "232",
target: "其他表",
}
],
}]
},
}
},
mounted() {
this.getDataList();
//console.log(this.copDate);
this.getDataListOne();
this.getDataListTwo();
this.getDataListBranch();
},
computed:{
},
methods: {
/*setOptionsContrastList: function(ydata, xdata, months) {
this.budgetoption.series[0].data = ydata
this.budgetoption.series[1].data = xdata
this.budgetoption.xAxis.data = months
},*/
/**
* 低压CDA总耗电量
* */
getDataList() {
let cdaparams = {
datetime: this.dateVal,
type: this.up1Type ? this.up1Type : 2
}
this.$api.gasConditioningLevel.lcdaCost(cdaparams)
.then(res => {
if (res && res.code === 0) {
if (cdaparams.type == 2) {
let getDayData = res
//this.copDate = new Date();
this.up1TypeString = 'date';
//console.log(this.dateVal);
copEchartsHandle(
getDayData,//data
'day',//datetype
new Date(this.dateVal).format('yyyy-MM-dd'),//datetime
'Chartcda',//chartoption
'dataParameter_buget',//data
this
)
return
}
if (this.up1Type == 1) {
let getHourData = res;
console.log(this.dateVal);
copEchartsHandle(
getHourData,
'time',
new Date(this.dateVal).format('yyyy-MM-dd'),
'Chartcda',
'dataParameter_buget',
this
)
} else if (this.up1Type == 2) {
let getDayData = res;
console.log(this.dateVal);
copEchartsHandle(
getDayData,
'day',
new Date(this.dateVal).format('yyyy-MM-dd'),
'Chartcda',
'dataParameter_buget',
this
)
} else if (this.up1Type == 3) {
let getMonthData = res;
console.log(this.dateVal);
copEchartsHandle(
getMonthData,
'month',
new Date(this.dateVal).format('yyyy'),
'Chartcda',
'dataParameter_buget',
this
)
} else {
let getyearData = res
//console.log(getyearData);
console.log(this.dateVal);
copEchartsHandle(
getyearData,
'year',
new Date(this.dateVal).format('yyyy'),
'Chartcda',
'dataParameter_buget',
this
)
}
/*let getMonthData = res
copEchartsHandle(
getMonthData,
'month',
new Date(this.copDate).format('yyyy'),
'budgetoption',
'dataParameter_buget',
this
)*/
} else {
this.$Message.warning(res.msg)
}
})
.catch(error => {})
},
/**
* 低压CDA压缩机&干燥机消耗占比
* */
getDataListOne() {
let Paramsup2 = {
datetime: this.Date_up2,
type: this.fecType ? this.fecType : 2
}
this.$api.gasConditioningLevel.perlcdatpd(Paramsup2)
.then(res => {
if (res && res.code === 0) {
if (Paramsup2.type == 2) {
let getDayData = res
//this.copDate = new Date();
this.dateType = 'date'
copEchartsHandle(
getDayData,
'day',
new Date(this.Date_up2).format('yyyy-MM-dd'),
'Chart1',
'dataParameter_up2',
this
)
return
}
if (this.fecType == 1) {
let getHourData = res
copEchartsHandle(
getHourData,
'time',
'',
'Chart1',
'dataParameter_up2',
this
)
} else if (this.fecType == 2) {
let getDayData = res
copEchartsHandle(
getDayData,
'day',
new Date(this.Date_up2).format('yyyy-MM-dd'),
'Chart1',
'dataParameter_up2',
this
)
} else if (this.fecType == 3) {
let getMonthData = res
copEchartsHandle(
getMonthData,
'month',
new Date(this.Date_up2).format('yyyy'),
'Chart1',
'dataParameter_up2',
this
)
} else {
let getyearData = res
copEchartsHandle(
getyearData,
'year',
new Date(this.Date_up2).format('yyyy'),
'Chart1',
'dataParameter_up2',
this
)
}
} else {
this.$Message.warning('暂无数据')
}
})
.catch(error => {})
},
/**
* 低压CDA冷却水泵消耗
* */
getDataListTwo() {
let down1Params = {
datetime: this.date_down1,
type: this.coptype ? this.coptype : 2
}
this.$api.gasConditioningLevel.lcdacwp(down1Params)
.then(res => {
if (res && res.code === 0) {
if (down1Params.type == 2) {
let getDayData = res
//this.copDate = new Date();
this.dateType_down1 = 'date'
copEchartsHandle(
getDayData,
'day',
new Date(this.date_down1).format('yyyy-MM-dd'),
'optionsdown1',
'dataParameter_down1',
this
)
return
}
if (this.coptype == 1) {
let getHourData = res
copEchartsHandle(
getHourData,
'time',
'',
'optionsdown1',
'dataParameter_down1',
this
)
} else if (this.coptype == 2) {
let getDayData = res
copEchartsHandle(
getDayData,
'day',
new Date(this.date_down1).format('yyyy-MM-dd'),
'optionsdown1',
'dataParameter_down1',
this
)
} else if (this.coptype == 3) {
let getMonthData = res;
console.log(getMonthData);
copEchartsHandle(
getMonthData,
'month',
new Date(this.date_down1).format('yyyy'),
'optionsdown1',
'dataParameter_down1',
this
)
} else {
let getyearData = res;
//console.log(getyearData);
copEchartsHandle(
getyearData,
'year',
new Date(this.date_down1).format('yyyy'),
'optionsdown1',
'dataParameter_down1',
this
)
}
} else {
this.$Message.warning('暂无数据')
}
})
.catch(error => {})
},
/**
* 低压CDA主要能耗设备占比
* */
getDataListBranch() {
let copParams = {
datetime: this.date_down2,
type: this.Branchtype ? this.Branchtype : 2
}
this.$api.gasConditioningLevel.perlcdatpdcw(copParams)
.then(res => {
if (res && res.code === 0) {
if (copParams.type == 2) {
let getDayData = res;
this.dateType_down2 = 'date'
copEchartsHandle(
getDayData,
'day',
new Date(this.date_down2).format('yyyy-MM-dd'),
'optionsdown2',
'dataParameter_down2',
this
)
return
}
if (this.Branchtype == 1) {
let getHourData = res
copEchartsHandle(
getHourData,
'time',
'',
'optionsdown2',
'dataParameter_down2',
this
)
} else if (this.Branchtype == 2) {
let getDayData = res
copEchartsHandle(
getDayData,
'day',
new Date(this.date_down2).format('yyyy-MM-dd'),
'optionsdown2',
'dataParameter_down2',
this
)
} else if (this.Branchtype == 3) {
let getMonthData = res
copEchartsHandle(
getMonthData,
'month',
new Date(this.date_down2).format('yyyy'),
'optionsdown2',
'dataParameter_down2',
this
)
} else {
let getyearData = res
copEchartsHandle(
getyearData,
'year',
new Date(this.date_down2).format('yyyy'),
'optionsdown2',
'dataParameter_down2',
this
)
}
} else {
this.$Message.warning('暂无数据')
}
})
.catch(error => {})
},
/**
* 工厂能耗情况下拉框
* @param val
* @returns {Array}
* */
change_up2(val) {
this.Date_up2 = new Date().getTime()
if (val == 'year') {
this.fecType = 4
this.TypeString_up2 = 'year'
this.getDataListOne()
} else if (val == 'date') {
this.fecType = 2
this.TypeString_up2 = 'date'
this.Date_up2 = new Date(
new Date().getTime() - 3600 * 24 * 1000
).getTime()
this.getDataListOne()
} else if (val == 'datetime') {
this.fecType = 1
this.Date_up2 = new Date().getTime();
this.TypeString_up2 = 'date'
this.getDataListOne()
} else {
this.fecType = 3
this.TypeString_up2 = 'year'
this.getDataListOne()
}
},
changePlantup1(val) {
this.dateVal = new Date().getTime()
if (val == 'year') {
this.up1Type = 4
this.up1TypeString = 'year'
this.getDataList()
} else if (val == 'date') {
this.up1Type = 2
this.up1TypeString = 'date'
this.dateVal = new Date(
new Date().getTime() - 3600 * 24 * 1000
).getTime()
this.getDataList()
} else if (val == 'datetime') {
this.up1Type = 1
this.dateVal = new Date().getTime();
this.up1TypeString = 'date'
this.getDataList()
} else {
this.up1Type = 3
this.up1TypeString = 'year'
this.getDataList()
}
},
/**
* 冷水系统COP
* @param val
* @returns {Array}
* */
changeDate_down1(val) {
this.date_down1 = new Date().getTime()
if (val == 'year') {
this.coptype = 4
this.dateType_down1 = 'year'
this.getDataListTwo()
} else if (val == 'date') {
this.coptype = 2
this.dateType_down1 = 'date'
this.date_down1 = new Date(
new Date().getTime() - 3600 * 24 * 1000
).getTime()
this.getDataListTwo()
} else if (val == 'datetime') {
this.coptype = 1
this.date_down1 = new Date().getTime();
this.dateType_down1 = 'date'
this.getDataListTwo()
} else {
this.coptype = 3
this.dateType_down1 = 'year'
this.getDataListTwo()
}
},
/**
* LCH重点耗能设备能耗
* @param val
* @returns {Array}
* */
changeDate_down2(val) {
this.date_down2 = new Date().getTime()
if (val == 'year') {
this.Branchtype = 4
this.dateType_down2 = 'year'
this.getDataListBranch()
} else if (val == 'date') {
this.Branchtype = 2
this.dateType_down2 = 'date'
this.date_down2 = new Date(
new Date().getTime() - 3600 * 24 * 1000
).getTime()
this.getDataListBranch()
} else if (val == 'datetime') {
this.Branchtype = 1
this.date_down2 = new Date().getTime();
this.dateType_down2 = 'date'
this.getDataListBranch()
} else {
this.Branchtype = 3
this.dateType_down2 = 'year'
this.getDataListBranch()
}
},
/**
* 工厂能耗情况日期框回调
* @param val
* @returns {Array}
* **/
changeTu_up2(val) {
//这里写请求参数
// this.Chart1.xAxis.data = FirstSeven(
// util.getFormattertDateTimeStamp(val + ' 00:00:00') / 1000
// ) //这里的是x轴数据
if (val == '') {
return
}
this.Date_up2 = new Date(val).getTime()
// console.log(FirstSeven)
this.getDataListOne()
},
changePlantTuup1(val) {
//这里写请求参数
// this.Chart1.xAxis.data = FirstSeven(
// util.getFormattertDateTimeStamp(val + ' 00:00:00') / 1000
// ) //这里的是x轴数据
if (val == '') {
return
}
this.dateVal = new Date(val).getTime()
//console.log(FirstSeven)
this.getDataList()
},
/**
* 冷水系统COP日期框回调
* @param val
* @returns {Array}
* **/
changeBarnch_down1(val) {
if (val == '') {
return
}
this.date_down1 = new Date(val).getTime()
this.getDataListTwo()
},
/**
* 分厂每平米洁净室空调单耗日期框回调
* @param val
* @returns {Array}
* **/
changBranchDate(val) {
if (val == '') {
return
}
this.date_down2 = new Date(val).getTime()
this.getDataListBranch()
},
},
components: {
Echarts: Echarts
}
}
</script>
