123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- function center2_d(datav,className){
- //各单位人员在位情况
- let myChartv = echarts.init(document.getElementById('center2_d'), 'vintage');
- // const datav = [80, 75, 82, 68, 73, 70,90,52,78,82];
- // const className = ['一队', '二队', '三队', '四队', '一连', '二连','后勤','保障部','医疗部','一大队',];
- const colorList9 = ['#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF','#39B3FF', '#39B3FF', '#39B3FF', '#39B3FF', ];
- // const defaultData = [100, 100, 100, 100, 100, 100];
- let s = 3;
- let z = -1;
- function w(){
- if(s==datav.length-1){
- s=3;
- z=0
- }else{
- s+=1;
- z+=1;
- }
- const option4 = {
- dataZoom: [ //给x轴设置滚动条
- {
- type: 'slider',
- width:10,
- // handleHeight:'30%',
- show: true,
- yAxisIndex: [0],
- left: '95%',
- handleColor:'#68789c',
- startValue: z, //数据窗口范围的起始百分比
- endValue:s,
- },
- {
- type: 'inside',
- yAxisIndex: [0],
- startValue: z, //数据窗口范围的起始百分比
- endValue:s,
- }
- ],
- grid: {
- left: '5%',
- right: '8%',
- bottom: '5%',
- top: '10%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none'
- },
- formatter: function (params) {
- return params[0].name + '<br/>' +
- "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
- // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
- params[0].seriesName + ' : ' + params[0].value
- }
- },
- xAxis: {
- position: 'top',
- show: true,
- type: 'value',
- splitLine: {
- show: false
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff', //更改坐标轴文字颜色
- }
- },
- },
- yAxis: [{
- type: 'category',
- inverse: true,
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff'
- },
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- data: className
- }, {
- type: 'category',
- inverse: true,
- axisTick: 'none',
- axisLine: 'none',
- show: true,
- axisLabel: {
- textStyle: {
- color: '#ffffff',
- fontSize: '12'
- },
- formatter: function (datav) {
- console.log(datav);
- return datav + ' %';
- },
- },
- data: datav
- }],
- series: [{
- name: '完成率',
- type: 'bar',
- zlevel: 1,
- itemStyle: {
- normal: {
- barBorderRadius: 0,
- color: (params) => {
- return colorList9[params.dataIndex]
- }
- },
- },
- barWidth: 10,
- data: datav
- }, ]
- };
- myChartv.setOption(option4);
- }
- w(); //初始化实例后,首次设置数据
- setInterval(function () {
- // 每次向后滚动一个,最后一个从头开始。
- w();
- }, 5000);
- }
|