完成图表的渲染

src/router/hzyb/index.js

@@ -37,6 +37,11 @@ export const hzybRoutes=[
                 path:"search",
                 name:'hzybChartSearch',
                 component: () => import("@/views/hzyb/chart/Search.vue")
+            },
+            {
+                path:"positionanalysis",
+                name:'hzybChartPositionAnalysis',
+                component: () => import("@/views/hzyb/chart/positionAnalysis/Index.vue")
             }
         ]
     },

src/views/hzyb/chart/positionAnalysis/Index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import ChartBox from './components/ChartBox.vue'
+
+</script>
+
+<template>
+    <div class="chart-position-analysis-page">
+
+        <div class="chart-wrap">
+            <chart-box/>
+        </div>
+
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-position-analysis-page{
+    padding: 32px;
+}
+.chart-wrap{
+    width: 100%;
+    height: 90vh;
+}
+</style>

src/views/hzyb/chart/positionAnalysis/components/ChartBox.vue

@@ -0,0 +1,138 @@
+<script setup>
+import {ref,onMounted,watch,toRefs } from 'vue'
+import Highcharts from 'highcharts';
+import HighchartsMore from 'highcharts/highcharts-more'
+import HighchartszhCN  from '../../../utils/highcahrts-zh_CN'
+HighchartszhCN(Highcharts)
+HighchartsMore(Highcharts)
+
+//图表默认配置项
+const chartDefaultOpts={
+    chart: {
+		type: 'columnrange',
+        inverted:true,//xy轴换位置
+	},
+    title: {
+		text:''
+	},
+    //版权信息
+	credits: {enabled:false},
+    plotOptions:{
+        columnrange: {
+            grouping: false,//不分组 这样就能叠起来
+            dataLabels: {
+                enabled: true,
+                inside:true,
+                formatter:function(e){
+                    return this.point.options.isLabel
+                }
+            },
+            events: {
+                click: function (event) {
+                    console.log(event);
+                }
+            }
+        }
+    },
+    legend: {
+		enabled: false,//关闭图例
+	},
+    tooltip: {
+        enabled: false
+    },
+
+}
+
+
+//绘图
+function chartRender(){
+    let options={}
+    let xAxis={
+        categories: ['国泰君安', '中信期货', '华泰期货', '中财期货', '广发期货', '方正中期', '富国期货', '永安期货', '中信建投', '国投安信'],
+        tickWidth:1,
+        tickPosition:'outside',
+
+    }
+    let yAxis={
+        opposite:true,
+        gridLineWidth: 0,
+        endOnTick: false,
+        showLastLabel: true,
+        lineWidth: 1,
+        tickWidth:1,
+        tickPosition:'outside',
+        title: {
+          text: '',
+        },
+    }
+    let series=[
+        {
+            name: '总数',
+            data: [
+                {low:0, high:4890},
+                {low:0, high:0}
+            ],
+        },
+        {
+            name: '增长',
+            data: [
+                {low:4500, high:4890,isLabel:'4890 / +390'},
+                {low:0, high:0},
+            ],
+        },
+        {
+            name:'减少',
+            data:[
+                {low:0, high:0},
+                {low:0, high:497,isLabel:'0 / - 497'},
+            ]
+        }
+    ]
+    options.xAxis=xAxis
+    options.yAxis=yAxis
+    options.series=series
+    options={...chartDefaultOpts,...options}
+    console.log(options);
+    Highcharts.chart("chart-box",options)
+}
+onMounted(()=>{
+    chartRender()
+})
+
+
+</script>
+
+<template>
+    <div class="chart-render-box">
+        <div class="chart-content">
+			<img class="mark-img" src="../../../../../assets/hzyb/chart/mark.png" alt="">
+			<div class="chart-box" id="chart-box"></div>
+		</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-render-box{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .chart-content{
+        width: 100%;
+        height: 100%;
+        position: relative;
+		.mark-img{
+			position: absolute;
+			width: 58%;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%,-50%) rotate(90deg);
+			pointer-events: none;
+			z-index: 2;
+		}
+        .chart-box{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>