|
|
@@ -363,21 +363,186 @@
|
|
|
let names = ['民用工程', '工业工程', '市政工程', '碰口作业', '基建工程', '顶管工程'];
|
|
|
let values = [120, 200, 150, 80, 70, 110, 130];
|
|
|
// names = data.name;
|
|
|
- values = data.value;
|
|
|
+ // values = data.value;
|
|
|
let myChart = echarts.init(document.getElementById('echartsRight_1'));
|
|
|
+ let xLabel = ['1','2','3','4','5'];
|
|
|
+ xLabel = names;
|
|
|
let option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: names
|
|
|
+ tooltip:{},
|
|
|
+ // backgroundColor: "#0F375F",
|
|
|
+ backgroundColor: "",
|
|
|
+ animation: false,
|
|
|
+ grid: {
|
|
|
+ top: "18%",
|
|
|
+ right: "15%",
|
|
|
+ bottom: "28%"
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
+ legend:{
|
|
|
+ show:true,
|
|
|
+ icon:'rect',
|
|
|
+ right:'5%',
|
|
|
+ top:"10%",
|
|
|
+ itemHeight:5,
|
|
|
+ textStyle:{
|
|
|
+ color:"#fff"
|
|
|
+ }
|
|
|
},
|
|
|
+ xAxis: {
|
|
|
+ data: xLabel,
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#11417a'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 14,
|
|
|
+ fontSize: 14,
|
|
|
+ textStyle: {
|
|
|
+ color: "#A3C0DF" //X轴文字颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ gridIndex: 0,
|
|
|
+ // min: 0,
|
|
|
+ // max: 100,
|
|
|
+ // interval: 25,
|
|
|
+ // splitNumber: 4,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#113763',
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#11417a'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 14,
|
|
|
+ fontSize: 14,
|
|
|
+ textStyle: {
|
|
|
+ color: "#A3C0DF" //X轴文字颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
series: [
|
|
|
{
|
|
|
+ // name: "A",
|
|
|
+ name: "",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#2befc1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#11535e"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
data: values,
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
+ z: 10,
|
|
|
+ zlevel: 0,
|
|
|
+ "label": {
|
|
|
+ "show": true,
|
|
|
+ "position": "top",
|
|
|
+ "distance": 10,
|
|
|
+ fontSize:16,
|
|
|
+ "color": "#01fff4"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: "pictorialBar",
|
|
|
+ itemStyle: {
|
|
|
+ normal:{
|
|
|
+ color:"#0F375F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ symbolRepeat: "fixed",
|
|
|
+ symbolMargin: 3,
|
|
|
+ symbol: "rect",
|
|
|
+ symbolClip: true,
|
|
|
+ symbolSize: [20, 2],
|
|
|
+ symbolPosition: "start",
|
|
|
+ symbolOffset: [0, 0],
|
|
|
+ // symbolBoundingData: this.total,
|
|
|
+ data: values,
|
|
|
+ width: 25,
|
|
|
+ z: 0,
|
|
|
+ zlevel: 1,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: "B",
|
|
|
+ // type: "bar",
|
|
|
+ // barWidth: 20,
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: "#1fc6e4"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: "#124b65"
|
|
|
+ // }
|
|
|
+ // ])
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: [20, 80, 100, 40, 34, 90, 60],
|
|
|
+ // z: 10,
|
|
|
+ // zlevel: 0,
|
|
|
+ // "label": {
|
|
|
+ // "show": true,
|
|
|
+ // "position": "top",
|
|
|
+ // "distance": 10,
|
|
|
+ // fontSize:16,
|
|
|
+ // "color": "#01fff4"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // // 分隔
|
|
|
+ // type: "pictorialBar",
|
|
|
+ // itemStyle: {
|
|
|
+ // normal:{
|
|
|
+ // color:"#0F375F"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // symbolRepeat: "fixed",
|
|
|
+ // symbolMargin: 3,
|
|
|
+ // symbol: "rect",
|
|
|
+ // symbolClip: true,
|
|
|
+ // symbolSize: [20, 2],
|
|
|
+ // symbolPosition: "start",
|
|
|
+ // symbolOffset: [12,0],
|
|
|
+ // // symbolBoundingData: this.total,
|
|
|
+ // data: [20, 80, 100, 40, 34, 90, 60],
|
|
|
+ // width: 25,
|
|
|
+ // z: 0,
|
|
|
+ // zlevel: 1,
|
|
|
+ // },
|
|
|
]
|
|
|
};
|
|
|
if (option && typeof option === "object") {
|
|
|
@@ -388,22 +553,201 @@
|
|
|
let names = ['民用工程', '工业工程', '市政工程', '碰口作业', '基建工程', '顶管工程'];
|
|
|
let values = [120, 200, 150, 80, 70, 110, 130];
|
|
|
// names = data.name;
|
|
|
- values = data.value;
|
|
|
+ // values = data.value;
|
|
|
let myChart = echarts.init(document.getElementById('echartsRight_2'));
|
|
|
let option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: names
|
|
|
+ grid: {
|
|
|
+ top: "18%",
|
|
|
+ right: "15%",
|
|
|
+ bottom: "28%"
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ color: '#05294D',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ backgroundColor: '#05294D',
|
|
|
+ borderColor: '#135469',
|
|
|
+ borderWidth: 2,
|
|
|
+ padding: [20, 20, 20, 20],
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ borderWidth: 0,
|
|
|
+ top: '15%',
|
|
|
+ left: '10%',
|
|
|
+ right:'7%',
|
|
|
+ bottom: '15%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show:false,
|
|
|
+ bottom: '-3%',
|
|
|
+ right: '40%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '12px',
|
|
|
+ fontFamily: 'MicrosoftYaHeiUI',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ },
|
|
|
+ itemWidth: 12,
|
|
|
+ itemHeight: 12,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '周转量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '趋势',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255,255,255,.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ color: '#32ABCC',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ data: names,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0.3
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ color: '#32ABCC',
|
|
|
+ fontSize: 12,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
series: [
|
|
|
+ {//柱底圆片
|
|
|
+ // name: "整体输出RPS趋势",
|
|
|
+ name: "今日使用人数",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbolSize: [20, 10],//调整截面形状
|
|
|
+ symbolOffset: [0, 5],
|
|
|
+ z: 12,
|
|
|
+ tooltip: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ "normal": {
|
|
|
+ color:{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#1BD4F9' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#1F79E2' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ //柱体
|
|
|
+ {
|
|
|
+ name: '整体输出RPS趋势',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ barGap: '0%',
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ "normal": {
|
|
|
+ color:{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#057DFE' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#02D7EA' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ //柱顶圆片
|
|
|
{
|
|
|
+ name: "整体输出RPS趋势",
|
|
|
+ type: "pictorialBar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ symbolSize: [20, 10],//调整截面形状
|
|
|
+ symbolOffset: [0, -5],
|
|
|
+ z: 12,
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ symbolPosition: "end",
|
|
|
+ "itemStyle": {
|
|
|
+ "normal": {
|
|
|
+ color:{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#50A7FF' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#02D6EA' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
data: values,
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
- ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
if (option && typeof option === "object") {
|
|
|
myChart.setOption(option);
|
wangzhe