|
|
@@ -1,258 +1,310 @@
|
|
|
<template>
|
|
|
- <div id="module-barline">
|
|
|
- <div
|
|
|
- :style="'font-weight:' + fontweight + ';font-family:' + fontfamily + ';font-size: ' + fontsize + 'px;color: ' + color + ';letter-spacing:' + letterspacing + 'px;height: ' + titleHeight + 'px;line-height: ' + titleHeight + 'px;text-align: ' + textposition + ';' + padding">
|
|
|
- {{ this.list.bt }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :style="'margin-top: ' + margintop + 'px;width:100%;height:' + (this.height - titleHeight - margintop) + 'px;'">
|
|
|
- <div :id="this.list.bt" style="width: 100%;height:100%;" />
|
|
|
- </div>
|
|
|
+ <div id="module-barline">
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'font-weight:' +
|
|
|
+ fontweight +
|
|
|
+ ';font-family:' +
|
|
|
+ fontfamily +
|
|
|
+ ';font-size: ' +
|
|
|
+ fontsize +
|
|
|
+ 'px;color: ' +
|
|
|
+ color +
|
|
|
+ ';letter-spacing:' +
|
|
|
+ letterspacing +
|
|
|
+ 'px;height: ' +
|
|
|
+ titleHeight +
|
|
|
+ 'px;line-height: ' +
|
|
|
+ titleHeight +
|
|
|
+ 'px;text-align: ' +
|
|
|
+ textposition +
|
|
|
+ ';' +
|
|
|
+ padding
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ this.list.bt }}
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'margin-top: ' +
|
|
|
+ margintop +
|
|
|
+ 'px;width:100%;height:' +
|
|
|
+ (this.height - titleHeight - margintop) +
|
|
|
+ 'px;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div :ref="this.list.bt" style="width: 100%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
-import { Interface } from '@/api/index'
|
|
|
+import { Interface } from "@/api/index";
|
|
|
import { Message } from "element-ui";
|
|
|
export default {
|
|
|
- props: ['height', 'list'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- fontweight: '',
|
|
|
- fontsize: '',
|
|
|
- fontfamily: '',
|
|
|
- color: '',
|
|
|
- letterspacing: '',
|
|
|
- titleHeight: '',
|
|
|
- textposition: '',
|
|
|
- padding: '',
|
|
|
- margintop: '',
|
|
|
- xAxisunit:'',
|
|
|
- option: {},
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getCss();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getCss() {
|
|
|
- const part = JSON.parse(this.list.config)
|
|
|
- this.fontweight = part.fontweight
|
|
|
- this.fontsize = part.fontsize
|
|
|
- this.fontfamily = part.fontfamily
|
|
|
- this.color = part.color
|
|
|
- this.letterspacing = part.letterspacing
|
|
|
- this.titleHeight = Number(part.titleHeight)
|
|
|
- this.textposition = part.textposition
|
|
|
- this.padding = part.textposition == 'left' ? 'padding:0 0 0 ' + part.padding + 'px;' : part.textposition == 'right' ? 'padding:0 ' + part.padding + 'px 0 0 ;' : ''
|
|
|
- this.margintop = Number(part.margintop)
|
|
|
- this.xAxisunit=part.xAxisunit
|
|
|
- this.option = {
|
|
|
- // 图例部分
|
|
|
- legend: {
|
|
|
- show: part.legendshow === 'true' ? true : false,
|
|
|
- right: part.legendright,//图例位置
|
|
|
- itemGap: Number(part.legenditemGap),//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
|
|
|
- itemWidth: Number(part.legenditemWidth),//图例标记的图形宽度。
|
|
|
- itemHeight: Number(part.legenditemHeight),//图例标记的图形高度。
|
|
|
- textStyle: {//文字样式设置
|
|
|
- fontSize: part.legendfontSize,//主标题文字的字体大小。
|
|
|
- color: part.legendcolor,//主标题文字的颜色
|
|
|
- fontWeight: part.legendfontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.legendfontFamily//主标题文字的字体系列
|
|
|
- },
|
|
|
- data: [ part.seriesleftname,part.seriesrightname],//图例数据
|
|
|
- },
|
|
|
- // 布局部分
|
|
|
- grid: {
|
|
|
- top: part.gridtop,//上边距
|
|
|
- left: part.gridleft,//左位置
|
|
|
- right: part.gridright,//右位置
|
|
|
- bottom: part.gridbottom,//下位置
|
|
|
- containLabel: part.gridcontainLabel//grid 区域是否包含坐标轴的刻度标签。
|
|
|
- },
|
|
|
- // x轴设置
|
|
|
- xAxis: {
|
|
|
- show: part.xAxisshow === 'true' ? true : false,//是否显示 x 轴。
|
|
|
- type: 'category',
|
|
|
- name: part.xAxisname,//坐标轴名称。
|
|
|
- nameTextStyle: {//坐标轴名称的文字样式。
|
|
|
- color: part.xAxisnamecolor,//坐标轴名称的颜色
|
|
|
- fontSize: part.xAxisnamefontSize,//主标题文字的字体大小。
|
|
|
- fontWeight: part.xAxisnamefontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.xAxisnamefontFamily,//主标题文字的字体系列
|
|
|
- },
|
|
|
- axisLine: {//坐标轴轴线相关设置。
|
|
|
- show: part.xAxisaxisLineshow === 'true' ? true : false,//是否显示坐标轴轴线。
|
|
|
- lineStyle: {//坐标轴线线的设置
|
|
|
- color: part.xAxisaxisLinecolor,//坐标轴线线的颜色。
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {//坐标轴刻度相关设置。
|
|
|
- show: part.xAxisaxisTickshow === 'true' ? true : false,//是否显示坐标轴刻度。
|
|
|
- lineStyle: {//坐标轴线线的设置
|
|
|
- color: part.xAxisaxisTickcolor,//坐标轴线线的颜色。
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {// 坐标轴刻度标签的相关设置。
|
|
|
- show: part.xAxisaxisLabelshow === 'true' ? true : false,//是否显示刻度标签。
|
|
|
- color: part.xAxisaxisLabelcolor,//刻度标签文字的颜色
|
|
|
- fontSize: part.xAxisaxisLabelfontSize,//主标题文字的字体大小。
|
|
|
- fontWeight: part.xAxisaxisLabelfontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.xAxisaxisLabelfontFamily,//主标题文字的字体系列
|
|
|
- },
|
|
|
- splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
- show: part.xAxissplitLineshow === 'true' ? true : false,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
|
|
- lineStyle: {
|
|
|
- color: part.xAxissplitLinecolor,//分隔线颜色，可以设置成单个颜色。
|
|
|
- type: part.xAxissplitLinetype,//线的类型。solid,dashed,dotted
|
|
|
- }
|
|
|
- },
|
|
|
- data: ['2019', '2020', '2021', '2022', '2023']
|
|
|
- },
|
|
|
- // y轴部分
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 0,
|
|
|
- show: part.yAxisshow === 'true' ? true : false,//是否显示 y 轴。
|
|
|
- name: part.yAxisname,//坐标轴名称。
|
|
|
- nameTextStyle: {//坐标轴名称的文字样式。
|
|
|
- color: part.yAxisnamecolor,//坐标轴名称的颜色
|
|
|
- fontSize: part.yAxisnamefontSize,//主标题文字的字体大小。
|
|
|
- fontWeight: part.yAxisnamefontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.yAxisnamefontFamily,//主标题文字的字体系列
|
|
|
- },
|
|
|
- axisLine: {//坐标轴轴线相关设置。
|
|
|
- show:true,
|
|
|
- // show: part.yAxisaxisLineshow === 'true' ? true : false,//是否显示坐标轴轴线。
|
|
|
- lineStyle: {//坐标轴线线的设置
|
|
|
- color:'#ffffff',
|
|
|
- // color: part.yAxisaxisLinecolor,//坐标轴线线的颜色。
|
|
|
- fontSize: part.yAxisaxisLinefontSize,//主标题文字的字体大小。
|
|
|
- fontWeight: part.yAxisaxisLinefontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.yAxisaxisLinefontFamily,//主标题文字的字体系列
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {//坐标轴刻度相关设置。
|
|
|
- show: part.yAxisaxisTickshow === 'true' ? true : false,//是否显示坐标轴刻度。
|
|
|
- lineStyle: {//坐标轴线线的设置
|
|
|
- color: part.yAxisaxisTickcolor,//坐标轴线线的颜色。
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {// 坐标轴刻度标签的相关设置。
|
|
|
- show: part.yAxisaxisLabelshow === 'true' ? true : false,//是否显示刻度标签。
|
|
|
- color: part.yAxisaxisLabelcolor,//刻度标签文字的颜色
|
|
|
- fontSize: part.yAxisaxisLabelfontSize,//主标题文字的字体大小。
|
|
|
- fontWeight: part.yAxisaxisLabelfontWeight,//主标题文字字体的粗细。
|
|
|
- fontFamily: part.yAxisaxisLabelfontFamily,//主标题文字的字体系列
|
|
|
- },
|
|
|
- splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
- show: part.yAxissplitLineshow === 'true' ? true : false,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
|
|
- lineStyle: {
|
|
|
- color: part.yAxissplitLinecolor,//分隔线颜色，可以设置成单个颜色。
|
|
|
- type: part.yAxissplitLinetype,//线的类型。solid,dashed,dotted
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: part.seriesrightname,
|
|
|
- type: 'bar',
|
|
|
- barWidth: part.seriesrightbarWidth,
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: part.seriesbarrightcolor.split(',')[0] // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: part.seriesbarrightcolor.split(',')[1] // 100% 处的颜色
|
|
|
- }],
|
|
|
- },
|
|
|
- borderRadius : Number(part.seriesbarBorderRadius)
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: part.seriesrightlabelshow=== 'true' ? true : false,
|
|
|
- position: part.seriesrightlabelposition,
|
|
|
- color: part.seriesrightcolor,
|
|
|
- fontSize: part.seriesrightlabelfontSize,
|
|
|
- fontWeight: part.seriesrightlabelfontWeight,
|
|
|
- fontFamily: part.seriesrightlabelfontFamily,
|
|
|
-
|
|
|
- },
|
|
|
- data: [320, 302, 341, 374, 390, 450, 420]
|
|
|
- },
|
|
|
- {
|
|
|
- name: part.seriesleftname,
|
|
|
- type: 'line',
|
|
|
- symbol: part.seriessymbol,//节点的形状
|
|
|
- symbolSize: part.serieslinesymbolSize,//节点的大小
|
|
|
- smooth: part.seriessmooth,//线条是否圆滑
|
|
|
- itemStyle: {
|
|
|
- color: part.seriesleftlinecolor
|
|
|
- },//线条颜色
|
|
|
-
|
|
|
- label: {
|
|
|
- show: part.seriesleftlabelshow=== 'true' ? true : false,
|
|
|
- position: part.seriesleftlabelposition,
|
|
|
- color: part.seriesleftcolor,
|
|
|
- fontSize: part.seriesleftlabelfontSize,
|
|
|
- fontWeight: part.seriesleftlabelfontWeight,
|
|
|
- fontFamily: part.seriesleftlabelfontFamily,
|
|
|
- },
|
|
|
- data: [120, -132, -101, -134, -190, -230, -210],
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
- this.getInfo()
|
|
|
+ props: ["height", "list"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ fontweight: "",
|
|
|
+ fontsize: "",
|
|
|
+ fontfamily: "",
|
|
|
+ color: "",
|
|
|
+ letterspacing: "",
|
|
|
+ titleHeight: "",
|
|
|
+ textposition: "",
|
|
|
+ padding: "",
|
|
|
+ margintop: "",
|
|
|
+ xAxisunit: "",
|
|
|
+ option: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getCss();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCss() {
|
|
|
+ const part = JSON.parse(this.list.config);
|
|
|
+ this.fontweight = part.fontweight;
|
|
|
+ this.fontsize = part.fontsize;
|
|
|
+ this.fontfamily = part.fontfamily;
|
|
|
+ this.color = part.color;
|
|
|
+ this.letterspacing = part.letterspacing;
|
|
|
+ this.titleHeight = Number(part.titleHeight);
|
|
|
+ this.textposition = part.textposition;
|
|
|
+ this.padding =
|
|
|
+ part.textposition == "left"
|
|
|
+ ? "padding:0 0 0 " + part.padding + "px;"
|
|
|
+ : part.textposition == "right"
|
|
|
+ ? "padding:0 " + part.padding + "px 0 0 ;"
|
|
|
+ : "";
|
|
|
+ this.margintop = Number(part.margintop);
|
|
|
+ this.xAxisunit = part.xAxisunit;
|
|
|
+ this.option = {
|
|
|
+ // 图例部分
|
|
|
+ legend: {
|
|
|
+ show: part.legendshow === "true" ? true : false,
|
|
|
+ right: part.legendright, //图例位置
|
|
|
+ itemGap: Number(part.legenditemGap), //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
|
|
|
+ itemWidth: Number(part.legenditemWidth), //图例标记的图形宽度。
|
|
|
+ itemHeight: Number(part.legenditemHeight), //图例标记的图形高度。
|
|
|
+ textStyle: {
|
|
|
+ //文字样式设置
|
|
|
+ fontSize: part.legendfontSize, //主标题文字的字体大小。
|
|
|
+ color: part.legendcolor, //主标题文字的颜色
|
|
|
+ fontWeight: part.legendfontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.legendfontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ data: [part.seriesleftname, part.seriesrightname], //图例数据
|
|
|
},
|
|
|
- getInfo() {
|
|
|
- const form = {
|
|
|
- qqfs: this.list.qqfs,
|
|
|
- jkUrl: this.list.jkUrl,
|
|
|
- data: {
|
|
|
- swjgdm: this.$route.query.swjgdm
|
|
|
- }
|
|
|
- }
|
|
|
- Interface(form).then(res => {
|
|
|
- if (res.code !== 200) {
|
|
|
- Message.error(this.list.bt + res.msg);
|
|
|
- setTimeout(() => {
|
|
|
- this.getInfo();
|
|
|
- }, 10 * 1000);
|
|
|
- } else {
|
|
|
- if (res && res.xData && res.xData.length !== 0) {
|
|
|
- this.option.xAxis.data=[]
|
|
|
- res.xData.map(item=>{
|
|
|
- this.option.xAxis.data.push(item+this.xAxisunit)
|
|
|
- })
|
|
|
- this.option.series[0].data=res.yData
|
|
|
- this.option.series[1].data=res.yData1
|
|
|
- } else {
|
|
|
- // Message.error(this.list.bt + "暂无数据");
|
|
|
- }
|
|
|
- this.initEcharts()
|
|
|
- }
|
|
|
- })
|
|
|
+ // 布局部分
|
|
|
+ grid: {
|
|
|
+ top: part.gridtop, //上边距
|
|
|
+ left: part.gridleft, //左位置
|
|
|
+ right: part.gridright, //右位置
|
|
|
+ bottom: part.gridbottom, //下位置
|
|
|
+ containLabel: part.gridcontainLabel, //grid 区域是否包含坐标轴的刻度标签。
|
|
|
},
|
|
|
- initEcharts() {
|
|
|
- const myChart = echarts.init(document.getElementById(this.list.bt));
|
|
|
- myChart.setOption(this.option);
|
|
|
+ // x轴设置
|
|
|
+ xAxis: {
|
|
|
+ show: part.xAxisshow === "true" ? true : false, //是否显示 x 轴。
|
|
|
+ type: "category",
|
|
|
+ name: part.xAxisname, //坐标轴名称。
|
|
|
+ nameTextStyle: {
|
|
|
+ //坐标轴名称的文字样式。
|
|
|
+ color: part.xAxisnamecolor, //坐标轴名称的颜色
|
|
|
+ fontSize: part.xAxisnamefontSize, //主标题文字的字体大小。
|
|
|
+ fontWeight: part.xAxisnamefontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.xAxisnamefontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置。
|
|
|
+ show: part.xAxisaxisLineshow === "true" ? true : false, //是否显示坐标轴轴线。
|
|
|
+ lineStyle: {
|
|
|
+ //坐标轴线线的设置
|
|
|
+ color: part.xAxisaxisLinecolor, //坐标轴线线的颜色。
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ //坐标轴刻度相关设置。
|
|
|
+ show: part.xAxisaxisTickshow === "true" ? true : false, //是否显示坐标轴刻度。
|
|
|
+ lineStyle: {
|
|
|
+ //坐标轴线线的设置
|
|
|
+ color: part.xAxisaxisTickcolor, //坐标轴线线的颜色。
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // 坐标轴刻度标签的相关设置。
|
|
|
+ show: part.xAxisaxisLabelshow === "true" ? true : false, //是否显示刻度标签。
|
|
|
+ color: part.xAxisaxisLabelcolor, //刻度标签文字的颜色
|
|
|
+ fontSize: part.xAxisaxisLabelfontSize, //主标题文字的字体大小。
|
|
|
+ fontWeight: part.xAxisaxisLabelfontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.xAxisaxisLabelfontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: part.xAxissplitLineshow === "true" ? true : false, //是否显示分隔线。默认数值轴显示，类目轴不显示。
|
|
|
+ lineStyle: {
|
|
|
+ color: part.xAxissplitLinecolor, //分隔线颜色，可以设置成单个颜色。
|
|
|
+ type: part.xAxissplitLinetype, //线的类型。solid,dashed,dotted
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: ["2019", "2020", "2021", "2022", "2023"],
|
|
|
},
|
|
|
- }
|
|
|
+ // y轴部分
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ min: 0,
|
|
|
+ show: part.yAxisshow === "true" ? true : false, //是否显示 y 轴。
|
|
|
+ name: part.yAxisname, //坐标轴名称。
|
|
|
+ nameTextStyle: {
|
|
|
+ //坐标轴名称的文字样式。
|
|
|
+ color: part.yAxisnamecolor, //坐标轴名称的颜色
|
|
|
+ fontSize: part.yAxisnamefontSize, //主标题文字的字体大小。
|
|
|
+ fontWeight: part.yAxisnamefontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.yAxisnamefontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置。
|
|
|
+ show: true,
|
|
|
+ // show: part.yAxisaxisLineshow === 'true' ? true : false,//是否显示坐标轴轴线。
|
|
|
+ lineStyle: {
|
|
|
+ //坐标轴线线的设置
|
|
|
+ color: "#ffffff",
|
|
|
+ // color: part.yAxisaxisLinecolor,//坐标轴线线的颜色。
|
|
|
+ fontSize: part.yAxisaxisLinefontSize, //主标题文字的字体大小。
|
|
|
+ fontWeight: part.yAxisaxisLinefontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.yAxisaxisLinefontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ //坐标轴刻度相关设置。
|
|
|
+ show: part.yAxisaxisTickshow === "true" ? true : false, //是否显示坐标轴刻度。
|
|
|
+ lineStyle: {
|
|
|
+ //坐标轴线线的设置
|
|
|
+ color: part.yAxisaxisTickcolor, //坐标轴线线的颜色。
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // 坐标轴刻度标签的相关设置。
|
|
|
+ show: part.yAxisaxisLabelshow === "true" ? true : false, //是否显示刻度标签。
|
|
|
+ color: part.yAxisaxisLabelcolor, //刻度标签文字的颜色
|
|
|
+ fontSize: part.yAxisaxisLabelfontSize, //主标题文字的字体大小。
|
|
|
+ fontWeight: part.yAxisaxisLabelfontWeight, //主标题文字字体的粗细。
|
|
|
+ fontFamily: part.yAxisaxisLabelfontFamily, //主标题文字的字体系列
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: part.yAxissplitLineshow === "true" ? true : false, //是否显示分隔线。默认数值轴显示，类目轴不显示。
|
|
|
+ lineStyle: {
|
|
|
+ color: part.yAxissplitLinecolor, //分隔线颜色，可以设置成单个颜色。
|
|
|
+ type: part.yAxissplitLinetype, //线的类型。solid,dashed,dotted
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: part.seriesrightname,
|
|
|
+ type: "bar",
|
|
|
+ barWidth: part.seriesrightbarWidth,
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: part.seriesbarrightcolor.split(",")[0], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: part.seriesbarrightcolor.split(",")[1], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ borderRadius: Number(part.seriesbarBorderRadius),
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: part.seriesrightlabelshow === "true" ? true : false,
|
|
|
+ position: part.seriesrightlabelposition,
|
|
|
+ color: part.seriesrightcolor,
|
|
|
+ fontSize: part.seriesrightlabelfontSize,
|
|
|
+ fontWeight: part.seriesrightlabelfontWeight,
|
|
|
+ fontFamily: part.seriesrightlabelfontFamily,
|
|
|
+ },
|
|
|
+ data: [320, 302, 341, 374, 390, 450, 420],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: part.seriesleftname,
|
|
|
+ type: "line",
|
|
|
+ symbol: part.seriessymbol, //节点的形状
|
|
|
+ symbolSize: part.serieslinesymbolSize, //节点的大小
|
|
|
+ smooth: part.seriessmooth, //线条是否圆滑
|
|
|
+ itemStyle: {
|
|
|
+ color: part.seriesleftlinecolor,
|
|
|
+ }, //线条颜色
|
|
|
|
|
|
-}
|
|
|
+ label: {
|
|
|
+ show: part.seriesleftlabelshow === "true" ? true : false,
|
|
|
+ position: part.seriesleftlabelposition,
|
|
|
+ color: part.seriesleftcolor,
|
|
|
+ fontSize: part.seriesleftlabelfontSize,
|
|
|
+ fontWeight: part.seriesleftlabelfontWeight,
|
|
|
+ fontFamily: part.seriesleftlabelfontFamily,
|
|
|
+ },
|
|
|
+ data: [120, -132, -101, -134, -190, -230, -210],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.getInfo();
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ const form = {
|
|
|
+ qqfs: this.list.qqfs,
|
|
|
+ jkUrl: this.list.jkUrl,
|
|
|
+ data: {
|
|
|
+ swjgdm: this.$route.query.swjgdm,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ Interface(form).then((res) => {
|
|
|
+ if (res.code !== 200) {
|
|
|
+ Message.error(this.list.bt + res.msg);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getInfo();
|
|
|
+ }, 10 * 1000);
|
|
|
+ } else {
|
|
|
+ if (res && res.xData && res.xData.length !== 0) {
|
|
|
+ this.option.xAxis.data = [];
|
|
|
+ res.xData.map((item) => {
|
|
|
+ this.option.xAxis.data.push(item + this.xAxisunit);
|
|
|
+ });
|
|
|
+ this.option.series[0].data = res.yData;
|
|
|
+ this.option.series[1].data = res.yData1;
|
|
|
+ } else {
|
|
|
+ // Message.error(this.list.bt + "暂无数据");
|
|
|
+ }
|
|
|
+ this.initEcharts();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initEcharts() {
|
|
|
+ if (this.myChart) {
|
|
|
+ } else {
|
|
|
+ this.myChart = echarts.init(this.$refs[this.list.bt]);
|
|
|
+ }
|
|
|
+ this.myChart.setOption(this.option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
#module-barline {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
