修改

src/views/bigdata/chart-detector.vue

@@ -26,62 +26,237 @@
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=gK9VdA5_F06NTrpr
 			myEcharts1(seriesData) {
+        let barWidth = 5;
+        let labelPositionY = -60;
+
+        let colors = [
+          ['#d18843','#c97b33','#9c571c','#bc732e'],
+          ['#1d87ff','#2182f7','#0f69c9','#0f87ff']
+        ];
+
+        let seriesDatas = [];
+        let seriesDatasLeft = [];
+        let seriesDatasRight = [];
+        seriesData.forEach((item,index)=>{
+          let color = index > 2 ? colors[1]:colors[0];
+          let itemStyleColor = {
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            type: 'linear',
+            global: false,
+            colorStops: [
+              {
+                offset: 0,
+                color: color[0],
+              },
+              {
+                offset: 0.5,
+                color: color[1],
+              },
+              {
+                offset: 0.5,
+                color: color[2],
+              },
+              {
+                offset: 1,
+                color: color[3],
+              },
+            ]
+          };
+          let data = {
+            name:item.name,
+            value:item.value,
+            itemStyle: {
+              color: itemStyleColor
+            },
+            label: {
+              rich: {
+                cc:{
+                  color:color[3]
+                }
+              },
+            }
+          };
+          let dataLeft = {
+            name:item.name,
+            value:1,
+            itemStyle: {
+              color: itemStyleColor
+            }
+          };
+          let dataRight = {
+            name:item.name,
+            value:item.value,
+            itemStyle: {
+              color: color[3]
+            }
+          };
+          seriesDatas.push(data);
+          seriesDatasLeft.push(dataLeft);
+          seriesDatasRight.push(dataRight);
+        })
+
 				var chartDom = document.getElementById('detector1');
 				var myChart = echarts.init(chartDom);
 				var option;
-				 option = {
-				    tooltip: {
-				        trigger: 'item',
-				    },
-				    color: ['#f7c778', '#d77169', '#c14f60', '#4d9564', '#215b85', ],
-
-				    series : [
-				        {
-				            name:'探测器分布',
-				            type:'funnel',
-				            x: '10%',
-				            y: 15,
-				            //x2: 80,
-				            y2: 15,
-				            width: '80%',
-				            // height: {totalHeight} - y - y2,
-				            min: 0,
-				            max: 100,
-				            minSize: '40%',
-				            maxSize: '100%',
-				            sort : 'descending', // 'ascending', 'descending'
-				            gap :0,
-				            data:seriesData.sort(function (a, b) {
-                      return a.value - b.value}),
-				            roseType: true,
-				            label: {
-				                normal: {
-				                    color:'#fff',
-				                    formatter:'{b} {c}',
-				                    position: 'center',
-				                    rich:{
-				                        style:{
-				                            fontSize:'20px',
-											color:'#ffffff',
-				                        },
-
-				                    }
-				                }
-				            },
-				            itemStyle: {
-				                normal: {
-				                    borderWidth: 0,
-				                    shadowBlur: 30,
-				                    shadowOffsetX: 0,
-				                    shadowOffsetY: 10,
-				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-				                }
-				            }
-
-				        }
-
-				    ]
-				};
+				 option ={
+           backgroundColor: '#023142',
+          grid: {
+          left: '6%',
+            right: '4%',
+            bottom: '3%',
+            top: '10%',
+            containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#B5B5B5',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['#5c6368'],
+                width: 1,
+                type: 'dotted',
+              },
+            },
+            axisLabel: {
+              show: false,
+              textStyle: {
+                fontFamily: 'agencyr',
+                color: '#FFF',
+              },
+              fontSize: 10,
+            },
+          },
+        ],
+          dataZoom: [
+          {
+            type: 'slider',
+            show: true,
+            // 设置组件控制的y轴
+            yAxisIndex: 0,
+            right: 40,
+            top: 0,
+            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
+            // 也可以用 startValue设置起始值
+            start: 29,
+            end: 36,
+            width: 12,
+            height: 210,
+            // 组件的背景颜色
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            // 选中范围的填充颜色
+            fillerColor: '#00FFFF',
+            // 边框颜色
+            borderColor: '#0094E9',
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 控制手柄的尺寸
+            handleSize: 16,
+            // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
+            showDataShadow: false,
+          },
+          {
+            type: 'inside',
+            yAxisIndex: [0],
+            start: 29,
+            end: 36,
+            // 不按任何功能键，鼠标滚轮能触发缩放
+            zoomOnMouseWheel: false,
+            // 不按任何功能键，鼠标移动能触发数据窗口平移
+            moveOnMouseWheel: true
+          }
+        ],
+          yAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff',
+                width: 3,
+              },
+            },
+            nameLocation:'start',
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 15,
+              padding: [0, 0, 20, 100],
+            },
+            inverse:true,
+            axisLabel: {
+              show:false,
+              textStyle: {
+                color: '#fff',
+                padding: [10, 0, 0, 0],
+                fontSize: 15,
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: seriesData,
+          },
+        ],
+          series: [
+          {
+            name: '柱1',
+            type: 'bar',
+            barWidth: barWidth,
+            z: 11,
+            label: {
+              show: true,
+              position: [0,labelPositionY],
+              formatter:['{bb|{b}  }','{cc|{c}}'].join(''),
+              rich:{
+                bb:{
+                  color:'#d4f1ff',
+                  fontSize: 10,
+                  fontFamily: 'agencyr',
+                },
+                cc:{
+                  color:'#fff',
+                  fontSize: 10,
+                  fontFamily: 'agencyr',
+                }
+              }
+            },
+            data: seriesDatas,
+          },
+          {
+            name: '顶1',
+            type: 'pictorialBar',
+            symbol: 'diamond',
+            symbolSize: [barWidth / 2, barWidth],
+            symbolOffset: [barWidth / 4, 0],
+            symbolPosition: 'end',
+            z: 12,
+            data: seriesDatasRight,
+          },
+          {
+            name: '底',
+            type: 'pictorialBar',
+            symbol: 'diamond',
+            symbolSize: [barWidth / 2, barWidth],
+            symbolOffset: [-barWidth / 4, 0],
+            z: 1,
+            data: seriesDatasLeft,
+          },
+        ]},
 				option && myChart.setOption(option);
 			},