|
|
@@ -67,7 +67,7 @@ let app = new Vue({
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- name: "资格审查",
|
|
|
+ name: "录用公式",
|
|
|
flag: false,
|
|
|
src: "./images/humanResources/publicity.png",
|
|
|
style: {
|
|
|
@@ -238,7 +238,7 @@ let app = new Vue({
|
|
|
],
|
|
|
employmentList1: {
|
|
|
waitTime: 5000,
|
|
|
- header: ["序号", "姓名", "性别", "身份证号","拟录单位"],
|
|
|
+ header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
|
|
|
rowNum: 4,
|
|
|
headerHeight: 55,
|
|
|
columnWidth: [100, 100, 100, 280],
|
|
|
@@ -252,7 +252,7 @@ let app = new Vue({
|
|
|
},
|
|
|
employmentList2: {
|
|
|
waitTime: 5000,
|
|
|
- header: ["序号", "姓名", "性别", "身份证号","拟录单位"],
|
|
|
+ header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
|
|
|
rowNum: 4,
|
|
|
headerHeight: 55,
|
|
|
columnWidth: [100, 100, 100, 280],
|
|
|
@@ -263,7 +263,8 @@ let app = new Vue({
|
|
|
oddRowBGC: "rgba(105, 193, 255, 0)",
|
|
|
evenRowBGC: "#69c1ff21",
|
|
|
hoverPause: false,
|
|
|
- }
|
|
|
+ },
|
|
|
+ vitaEcharts: null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -283,20 +284,31 @@ let app = new Vue({
|
|
|
mounted() {
|
|
|
let that = this;
|
|
|
this.$nextTick(() => {
|
|
|
+ let vita = this.$refs.vita
|
|
|
+ this.initVitaEcharts(vita)
|
|
|
+
|
|
|
let pageBtm = this.$refs.pageBtm
|
|
|
- this.initDownholeEcharts(pageBtm, { x: downhole.x, y: [downhole.y[0], downhole.y[2], downhole.y[3]] })
|
|
|
- // let rightOne = this.$refs.rightOne
|
|
|
- // this.initLineRight(rightOne)
|
|
|
- // let c1 = this.$refs.c1
|
|
|
- // this.initRightCycle(c1)
|
|
|
- // let c2 = this.$refs.c2
|
|
|
- // this.initRightCycle(c2)
|
|
|
- // let c3 = this.$refs.c3
|
|
|
- // this.initRightCycle(c3)
|
|
|
- // let c4 = this.$refs.c4
|
|
|
- // this.initRightCycle(c4)
|
|
|
- // let c5 = this.$refs.c5
|
|
|
- // this.initRightCycle(c5)
|
|
|
+ this.initDownholeEcharts(pageBtm, { x: mobilizeList.x, y1: mobilizeList.y3, y2: mobilizeList.y4, y3: mobilizeList.y5 })
|
|
|
+ let rightOne = this.$refs.rightOne
|
|
|
+ this.initLineRight(rightOne)
|
|
|
+ let rightTwo = this.$refs.rightTwo
|
|
|
+ this.initLineRight(rightTwo)
|
|
|
+ let rightThree = this.$refs.rightThree
|
|
|
+ this.initLineRight(rightThree)
|
|
|
+ let rightFour = this.$refs.rightFour
|
|
|
+ this.initLineRight(rightFour)
|
|
|
+ let rightFive = this.$refs.rightFive
|
|
|
+ this.initLineRight(rightFive)
|
|
|
+ let c1 = this.$refs.c1
|
|
|
+ this.initRightCycle(c1)
|
|
|
+ let c2 = this.$refs.c2
|
|
|
+ this.initRightCycle(c2)
|
|
|
+ let c3 = this.$refs.c3
|
|
|
+ this.initRightCycle(c3)
|
|
|
+ let c4 = this.$refs.c4
|
|
|
+ this.initRightCycle(c4)
|
|
|
+ let c5 = this.$refs.c5
|
|
|
+ this.initRightCycle(c5)
|
|
|
|
|
|
|
|
|
|
|
|
@@ -349,10 +361,6 @@ let app = new Vue({
|
|
|
left: "3%",
|
|
|
right: "1%"
|
|
|
}
|
|
|
- data.y.forEach(item => {
|
|
|
- series.push()
|
|
|
- });
|
|
|
-
|
|
|
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
@@ -445,7 +453,7 @@ let app = new Vue({
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
- data: data.y[0],
|
|
|
+ data: data.y1,
|
|
|
}, {
|
|
|
type: 'bar',
|
|
|
name: "报名人数",
|
|
|
@@ -462,7 +470,7 @@ let app = new Vue({
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
- data: data.y[1],
|
|
|
+ data: data.y2,
|
|
|
}, {
|
|
|
type: 'bar',
|
|
|
name: "录用人数",
|
|
|
@@ -479,7 +487,7 @@ let app = new Vue({
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
- data: data.y[2],
|
|
|
+ data: data.y3,
|
|
|
}]
|
|
|
};
|
|
|
this.downhole.setOption(option);
|
|
|
@@ -490,212 +498,28 @@ let app = new Vue({
|
|
|
},
|
|
|
scrollChange(index) {
|
|
|
},
|
|
|
- initLineRight(el, data) {
|
|
|
- let mychart = echarts.init(el);
|
|
|
- var category = [{
|
|
|
- name: "管控",
|
|
|
- value: 2500
|
|
|
- },
|
|
|
- {
|
|
|
- name: "集中式",
|
|
|
- value: 8000
|
|
|
- },
|
|
|
- {
|
|
|
- name: "纳管",
|
|
|
- value: 3000
|
|
|
- },
|
|
|
- {
|
|
|
- name: "纳管",
|
|
|
- value: 3000
|
|
|
- },
|
|
|
- {
|
|
|
- name: "纳管",
|
|
|
- value: 3000
|
|
|
- }
|
|
|
- ]; // 类别
|
|
|
- var total = 10000; // 数据总数
|
|
|
- var datas = [];
|
|
|
- category.forEach(value => {
|
|
|
- datas.push(value.value);
|
|
|
- });
|
|
|
- option = {
|
|
|
- xAxis: {
|
|
|
- max: total,
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: 10,
|
|
|
- top: 20, // 设置条形图的边距
|
|
|
- right: 100,
|
|
|
- bottom: 20
|
|
|
- },
|
|
|
- yAxis: [{
|
|
|
- type: "category",
|
|
|
- inverse: false,
|
|
|
- data: category,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- // 内
|
|
|
- type: "bar",
|
|
|
- barWidth: 18,
|
|
|
-
|
|
|
- legendHoverLink: false,
|
|
|
- silent: true,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 0,
|
|
|
- colorStops: [{
|
|
|
- offset: 1,
|
|
|
- color: '#00feff'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: '#027eff'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#0286ff'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- position: [0, -35],
|
|
|
- formatter: "{b}",
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 30,
|
|
|
- fontWeight: "bolder",
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: category,
|
|
|
- z: 1,
|
|
|
- animationEasing: "elasticOut"
|
|
|
- },
|
|
|
- {
|
|
|
- // 分隔
|
|
|
- type: "pictorialBar",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#061348"
|
|
|
- }
|
|
|
- },
|
|
|
- symbolRepeat: "fixed",
|
|
|
- symbolMargin: 12,
|
|
|
- symbol: "rect",
|
|
|
- symbolClip: true,
|
|
|
- symbolSize: [5, 21],
|
|
|
- symbolPosition: "start",
|
|
|
- symbolOffset: [1, -1],
|
|
|
- symbolBoundingData: this.total,
|
|
|
- data: category,
|
|
|
- z: 2,
|
|
|
- animationEasing: "elasticOut"
|
|
|
|
|
|
- },
|
|
|
- {
|
|
|
- // 外边框
|
|
|
- type: "pictorialBar",
|
|
|
- symbol: "rect",
|
|
|
- symbolBoundingData: total,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "none"
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 30,
|
|
|
- position: [600, 20],
|
|
|
- distance: 0, // 向右偏移位置
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- data: datas,
|
|
|
- z: 0,
|
|
|
- animationEasing: "elasticOut"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "外框",
|
|
|
- type: "bar",
|
|
|
- barGap: "-150%", // 设置外框粗细
|
|
|
- data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
|
|
|
- barWidth: 35,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "transparent", // 填充色
|
|
|
- barBorderColor: "#1C4B8E", // 边框色
|
|
|
- barBorderWidth: 1, // 边框宽度
|
|
|
- // barBorderRadius: 0, //圆角半径
|
|
|
- label: {
|
|
|
- // 标签显示位置
|
|
|
- show: false,
|
|
|
- position: "top" // insideTop 或者横向的 insideLeft
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- z: 0
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- mychart.setOption(option)
|
|
|
- },
|
|
|
initRightCycle(el, data) {
|
|
|
var getvalue = [88];
|
|
|
|
|
|
let chat = echarts.init(el)
|
|
|
|
|
|
option = {
|
|
|
- // title: {
|
|
|
- // text: getvalue + '分',
|
|
|
- // textStyle: {
|
|
|
- // color: '#28BCFE',
|
|
|
- // fontSize: 40
|
|
|
- // },
|
|
|
- // subtext: '综合得分',
|
|
|
- // subtextStyle: {
|
|
|
- // color: '#666666',
|
|
|
- // fontSize: 30
|
|
|
- // },
|
|
|
- // itemGap: 20,
|
|
|
- // left: 'center',
|
|
|
- // top: '43%'
|
|
|
- // },
|
|
|
- tooltip: {
|
|
|
- formatter: function (params) {
|
|
|
- return '<span style="color: #fff;">综合得分：' + getvalue + '分</span>';
|
|
|
- }
|
|
|
+ title: {
|
|
|
+ text: getvalue + '%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 20
|
|
|
+ },
|
|
|
+ itemGap: 20,
|
|
|
+ left: '55%',
|
|
|
+ top: '38%'
|
|
|
},
|
|
|
+ // tooltip: {
|
|
|
+ // formatter: function (params) {
|
|
|
+ // return '<span style="color: #fff;">综合得分：' + getvalue + '分</span>';
|
|
|
+ // }
|
|
|
+ // },
|
|
|
angleAxis: {
|
|
|
max: 100,
|
|
|
clockwise: true, // 逆时针
|
|
|
@@ -717,7 +541,7 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
polar: {
|
|
|
- center: ['50%', '50%'],
|
|
|
+ center: ['70%', '50%'],
|
|
|
radius: ['60%', '75%'],
|
|
|
// radius: '100%' //图形大小
|
|
|
},
|
|
|
@@ -750,5 +574,392 @@ let app = new Vue({
|
|
|
|
|
|
chat.setOption(option)
|
|
|
},
|
|
|
+ initLineRight(el, data) {
|
|
|
+ let that = this;
|
|
|
+ let myChart = echarts.init(el);
|
|
|
+ let nameList = ["a"];
|
|
|
+ let valueList = [1287.5];
|
|
|
+ let total = 1363.88; // 数据总数
|
|
|
+ var category = nameList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ value: valueList[index],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#40A9FF50",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#40A9FF",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ var totalList = [];
|
|
|
+ var totalBorderList = [];
|
|
|
+ nameList.map((item, index) => {
|
|
|
+ totalList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(51, 147, 236, 0.29)",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ totalBorderList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "rgba(51, 147, 236, 0.29)",
|
|
|
+ color: "transparent",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ var datas = [];
|
|
|
+ category.forEach((value) => {
|
|
|
+ datas.push(value.value);
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ // backgroundColor: 'rgb(231,238,249)',
|
|
|
+ xAxis: {
|
|
|
+ max: total,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "1%",
|
|
|
+ top: 20, // 设置条形图的边距
|
|
|
+ right: "20%",
|
|
|
+ bottom: 20,
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: false,
|
|
|
+ data: nameList,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // 内
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 16,
|
|
|
+ barGap: "20%",
|
|
|
+ silent: true,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: (item) => {
|
|
|
+ // return `${item['name']}：${item['value']} `;
|
|
|
+ // },
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'rgba(105, 120, 136, 1)',
|
|
|
+ // fontSize: 14,
|
|
|
+ // },
|
|
|
+ // position: [0, '-25px'],
|
|
|
+ // show: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ data: category,
|
|
|
+ z: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(81, 193, 156, 1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(234, 177, 100, 1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: "pictorialBar",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#143362",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolRepeat: "fixed",
|
|
|
+ symbolMargin: 8,
|
|
|
+ symbol: "rect",
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [4, 20],
|
|
|
+ symbolPosition: "start",
|
|
|
+ symbolOffset: [0, -2],
|
|
|
+ symbolBoundingData: total,
|
|
|
+ data: [total, total, total, total],
|
|
|
+ z: 2,
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // label
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbolBoundingData: total,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "none",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: (params) => {
|
|
|
+ var text;
|
|
|
+ text = `${((params["data"] * 100) / total).toFixed(2)}个`;
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ // 图列内容样式
|
|
|
+ fontSize: "30",
|
|
|
+ fontWeight: 800,
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ offset: [0, -3],
|
|
|
+ distance: 10, // 向右偏移位置
|
|
|
+ show: true,
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datas,
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外框",
|
|
|
+ type: "bar",
|
|
|
+ barGap: "-130%", // 设置外框粗细
|
|
|
+ data: totalBorderList,
|
|
|
+ barWidth: 26,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: [5, 5, 5, 5],
|
|
|
+ borderWidth: 1, // 边框宽度
|
|
|
+ borderColor: "rgb(51, 147, 236)", // 边框色
|
|
|
+ color: "rgb(231,238,249)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ initVitaEcharts(el, data) {
|
|
|
+ this.vitaEcharts = echarts.init(el)
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: 'axis',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: '#A3E2F4'
|
|
|
+ },
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ formatter: "{a} : {c}份"
|
|
|
+ },
|
|
|
+ animation: true,
|
|
|
+ grid: {
|
|
|
+ top: "7%",
|
|
|
+ bottom: "8%",
|
|
|
+ right: "2%"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
|
|
+ axisLine: {
|
|
|
+ show: false //隐藏X轴轴线
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false //隐藏X轴轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(77, 128, 254, 0.2)",
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ interval: 0,
|
|
|
+ fontSize: 24,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff" //X轴文字颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 0,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ interval: 25,
|
|
|
+ // splitNumber: 4,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(77, 128, 254, 0.2)",
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(77, 128, 254, 0.2)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 14,
|
|
|
+ fontSize: 26,
|
|
|
+ textStyle: {
|
|
|
+ color: "#65D5FF"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "简历投递数",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 16,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#004E8E"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#40A9FF"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
|
|
|
+ z: 10,
|
|
|
+ zlevel: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: "pictorialBar",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#0F375F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ symbolRepeat: "fixed",
|
|
|
+ symbolMargin: 6,
|
|
|
+ symbol: "rect",
|
|
|
+ symbolClip: true,
|
|
|
+ symbolSize: [18, 2],
|
|
|
+ symbolPosition: "start",
|
|
|
+ symbolOffset: [1, 1],
|
|
|
+ data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
|
|
|
+ width: 2,
|
|
|
+ z: 0,
|
|
|
+ zlevel: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外框",
|
|
|
+ type: "bar",
|
|
|
+ barGap: "-110%", // 设置外框粗细
|
|
|
+ data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
|
|
+ barWidth: 16,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "transparent", // 填充色
|
|
|
+ // barBorderRadius: 0, //圆角半径
|
|
|
+ label: {
|
|
|
+ // 标签显示位置
|
|
|
+ show: false,
|
|
|
+ position: "top" // insideTop 或者横向的 insideLeft
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ z: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "背影",
|
|
|
+ type: "line",
|
|
|
+ smooth: true, //平滑曲线显示
|
|
|
+ showAllSymbol: false, //显示所有图形。
|
|
|
+ symbolSize: 0,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(0, 151, 251, 0.1)"
|
|
|
+ },
|
|
|
+ data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
|
|
|
+ z: 5
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ endValue: 12,
|
|
|
+ startValue: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.vitaEcharts.setOption(option)
|
|
|
+ tools.loopShowTooltip(this.vitaEcharts, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
})
|
fengxu