| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965 |
- Vue.use(scroll)
- let app = new Vue({
- el: "#app",
- data() {
- return {
- title: "内部人才市场双选服务平台",
- treeList: [
- {
- name: "岗位发布",
- flag: false,
- src: "./images/humanResources/post.png",
- style: {
- top: "60%",
- left: "20%",
- backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
- },
- onStyle: {
- top: "60%",
- left: "20%",
- backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
- }
- },
- {
- name: "简历投递",
- flag: false,
- src: "./images/humanResources/notes.png",
- style: {
- top: "22%",
- left: "28%",
- backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
- },
- onStyle: {
- top: "22%",
- left: "28%",
- backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
- }
- },
- {
- name: "资格审查",
- flag: true,
- src: "./images/humanResources/qualification.png",
- style: {
- top: "-80px",
- left: "calc(50% - 202px)",
- backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
- },
- onStyle: {
- top: "-80px",
- left: "calc(50% - 202px)",
- backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
- }
- },
- {
- name: "综合测评",
- flag: false,
- src: "./images/humanResources/comprehensive.png",
- style: {
- top: "22%",
- right: "28%",
- backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
- },
- onStyle: {
- top: "22%",
- right: "28%",
- backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
- }
- },
- {
- name: "录用公式",
- flag: false,
- src: "./images/humanResources/publicity.png",
- style: {
- top: "60%",
- right: "20%",
- backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
- },
- onStyle: {
- top: "60%",
- right: "20%",
- backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
- }
- },
- ],
- treeIndex: 0,
- config1: {
- waitTime: 5000,
- header: ["招聘单位", "招聘岗位", "招聘人数", "投递人数", "发布时间"],
- headerHeight: 55,
- columnWidth: [230, 170, 100, 100],
- rowNum: 10,
- data: [
- ["西山煤电屯兰矿", '井下普工', '30', '100', "2023.07.01"],
- ["西山煤电斜沟煤矿", '井下钻探工', '10', '30', "2023.07.01"],
- ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
- ["汾西矿业柳湾煤矿", '井下设备管理员', '10', '50', "2023.07.01"],
- ["霍州煤电辛置煤矿", '矿井维修电工', '10', '30', "2023.07.01"],
- ["霍州煤电恒兴煤业", '生产调度员', '4', '10', "2023.07.01"],
- ["霍州煤电吕梁山煤电公司", '汽车驾驶员', '5', '10', "2023.07.01"],
- ["山煤国际凌志达煤业", '电工', '5', '16', "2023.07.01"],
- ["华晋焦煤沙曲一号煤矿", '井下普工', '40', '120', "2023.07.01"],
- ["山西焦化", '技术员', '2', '12', "2023.07.01"],
- ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- },
- configIndex: 1,
- config2: {
- waitTime: 2000,
- header: ["序号", "单位名称", "招聘岗位数"],
- headerHeight: 55,
- rowNum: 5,
- data: [
- ["<span class='yellow'>01</span>", "<span class='yellow'>西山煤电</span>", "<span class='yellow'>30个</span>"],
- ["<span class='red'>02</span>", "<span class='red'>山煤国际</span>", "<span class='red'>25个</span>"],
- ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
- ["04", "汾西矿业", "10个"],
- ["05", "汾西矿业", "8个"],
- ["06", "汾西矿业", "4个"],
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- },
- targetIndex: 0,
- classChange: false,
- listData: [{
- 'title': '无缝滚动第一行无缝滚动第一行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第二行无缝滚动第二行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第三行无缝滚动第三行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第四行无缝滚动第四行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第五行无缝滚动第五行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第六行无缝滚动第六行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第七行无缝滚动第七行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第八行无缝滚动第八行',
- 'date': '2017-12-16'
- }, {
- 'title': '无缝滚动第九行无缝滚动第九行',
- 'date': '2017-12-16'
- }],
- classOption: {
- step: 2
- },
- configMark: {
- waitTime: 2000,
- header: ["头像", "姓名", "投递岗位", "时间"],
- rowNum: 6,
- headerHeight: 55,
- // columnWidth: [90, 170, 200, ],
- data: [
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
- ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- },
- configInterview: {
- waitTime: 2000,
- header: ["序号", "姓名", "会议厅", "场次", "时间"],
- headerHeight: 55,
- columnWidth: [70, 120, 170, 100],
- rowNum: 5,
- data: [
- ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- },
- configWritten: {
- waitTime: 2000,
- header: ["序号", "姓名", "会议厅", "场次", "时间"],
- headerHeight: 55,
- columnWidth: [70, 120, 170, 100],
- rowNum: 5,
- data: [
- ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- },
- mainList: [
- {
- name: "双选场次",
- value: 30,
- unit: "场",
- icon: "../images/humanResources/times.png"
- },
- {
- name: "参与人数",
- value: 3000,
- unit: "人",
- icon: "../images/humanResources/user.png"
- }
- ],
- employmentList1: {
- waitTime: 5000,
- header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
- rowNum: 4,
- headerHeight: 55,
- columnWidth: [100, 100, 100, 280],
- data: [
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- hoverPause: false,
- },
- employmentList2: {
- waitTime: 5000,
- header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
- rowNum: 4,
- headerHeight: 55,
- columnWidth: [100, 100, 100, 280],
- data: [
- ],
- align: ["center", "center", "center", "center", "center"],
- headerBGC: "#69c1ff2d",
- oddRowBGC: "rgba(105, 193, 255, 0)",
- evenRowBGC: "#69c1ff21",
- hoverPause: false,
- },
- vitaEcharts: null
- }
- },
- created() {
- let employmentList1 = spArr(employmentList, 5)
- let arr1 = []
- let arr2 = []
- employmentList1.forEach((item, index) => {
- if (index % 2 == 0) {
- arr1.push(...item)
- } else {
- arr2.push(...item)
- }
- })
- this.employmentList1.data = arr1
- this.employmentList2.data = arr2
- },
- mounted() {
- let that = this;
- this.$nextTick(() => {
- let vita = this.$refs.vita
- this.initVitaEcharts(vita)
- let pageBtm = this.$refs.pageBtm
- 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)
- setTimeout(() => {
- let itemContent = document.getElementById("itemContent")
- let target = itemContent.getElementsByClassName("row-item")
- let targetList = target.item(0)
- targetList.style.background = "#302e2d50"
- targetList.style.color = "#E1AF27"
- }, 0)
- setTimeout(() => {
- that.classChange = true
- }, 5000);
- setInterval(() => {
- let that = this
- that.treeList.forEach(item => {
- item.flag = false
- })
- if (that.treeIndex > that.treeList.length - 1) {
- that.treeIndex = 0
- that.treeList[that.treeIndex].flag = true
- } else {
- that.treeList[that.treeIndex].flag = true
- that.treeIndex = that.treeIndex + 1
- }
- }, 2000)
- // setInterval(()=>{
- // if(that.configIndex > that.config1.data.length - 1){
- // console.log("最后一条");
- // that.configIndex = 0
- // console.log(that.config1.data[that.configIndex]);
- // return
- // } else {
- // console.log(that.config1.data[that.configIndex]);
- // that.configIndex = that.configIndex + 1
- // return
- // }
- // },5000)
- })
- },
- methods: {
- initDownholeEcharts(el, data) {
- this.downhole = echarts.init(el);
- let series = []
- let grid = {
- top: "15%",
- bottom: 50,//也可设置left和right设置距离来控制图表的大小
- left: "3%",
- right: "1%"
- }
- option = {
- tooltip: {
- show: true,
- trigger: 'axis',
- textStyle: {
- fontSize: 30,
- color: '#A3E2F4'
- },
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- grid,
- legend: {
- data: ["招聘人数", "报名人数", "录用人数"],
- align: 'left',
- itemGap: 50,
- right: '1%',
- y: '1%',
- icon: 'rect',
- textStyle: {
- color: "#fff",
- fontSize: 30
- }
- },
- xAxis: {
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- show: true,
- fontSize: 30,
- textStyle: {
- color: "#fff" //X轴文字颜色
- },
- },
- data: data.x,
- },
- yAxis: {
- type: "value",
- name: "人",
- gridIndex: 0,
- // splitNumber: 4,
- splitLine: {
- show: false,
- lineStyle: {
- color: '#A3C0DF',
- width: 1
- },
- },
- nameTextStyle: {
- fontSize: 30,
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#A3C0DF'
- }
- },
- axisLabel: {
- show: true,
- margin: 14,
- fontSize: 28,
- textStyle: {
- color: "#fff" //X轴文字颜色
- }
- },
- },
- series: [{
- type: 'bar',
- name: "招聘人数",
- barWidth: 26,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 1,
- color: '#40A9FF',
- },
- {
- offset: 0,
- color: '#082049',
- },
- ]),
- },
- data: data.y1,
- }, {
- type: 'bar',
- name: "报名人数",
- barWidth: 26,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 1,
- color: '#EAE179',
- },
- {
- offset: 0,
- color: '#082049',
- },
- ]),
- },
- data: data.y2,
- }, {
- type: 'bar',
- name: "录用人数",
- barWidth: 26,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 1,
- color: '#6A83FF',
- },
- {
- offset: 0,
- color: '#082049',
- },
- ]),
- },
- data: data.y3,
- }]
- };
- this.downhole.setOption(option);
- tools.loopShowTooltip(this.downhole, option, {
- nterval: 2000,
- loopSeries: true,
- });
- },
- scrollChange(index) {
- },
- initRightCycle(el, data) {
- var getvalue = [88];
- let chat = echarts.init(el)
- option = {
- 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, // 逆时针
- // 隐藏刻度线
- show: false
- },
- radiusAxis: {
- type: 'category',
- show: true,
- axisLabel: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false
- },
- },
- polar: {
- center: ['70%', '50%'],
- radius: ['60%', '75%'],
- // radius: '100%' //图形大小
- },
- series: [{
- type: 'bar',
- data: getvalue,
- showBackground: true,
- backgroundStyle: {
- color: '#BDEBFF',
- },
- coordinateSystem: 'polar',
- roundCap: true,
- barWidth: 30,
- itemStyle: {
- normal: {
- opacity: 1,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#25BFFF'
- }, {
- offset: 1,
- color: '#5284DE'
- }]),
- shadowBlur: 5,
- shadowColor: '#2A95F9',
- }
- },
- }]
- };
- 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,
- });
- },
- },
- })
|