添加

package.json

@@ -13,6 +13,7 @@
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.4.3",
     "element-plus": "^2.4.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",

pnpm-lock.yaml

@@ -17,6 +17,12 @@ dependencies:
   crypto-js:
     specifier: ^4.2.0
     version: 4.2.0
+  default-passive-events:
+    specifier: ^2.0.0
+    version: 2.0.0
+  echarts:
+    specifier: ^5.4.3
+    version: 5.4.3
   element-plus:
     specifier: ^2.4.4
     version: 2.4.4(vue@3.3.13)
@@ -734,11 +740,22 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==, tarball: https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz}
     dev: true
 
+  /default-passive-events@2.0.0:
+    resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==, tarball: https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz}
+    dev: false
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==, tarball: https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz}
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /echarts@5.4.3:
+    resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.4.4
+    dev: false
+
   /element-plus@2.4.4(vue@3.3.13):
     resolution: {integrity: sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz}
     peerDependencies:
@@ -1074,6 +1091,10 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
+    dev: false
+
   /typescript@5.3.3:
     resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==, tarball: https://registry.npmmirror.com/typescript/-/typescript-5.3.3.tgz}
     engines: {node: '>=14.17'}
@@ -1181,3 +1202,9 @@ packages:
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==, tarball: https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz}
     dev: true
+
+  /zrender@5.4.4:
+    resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==, tarball: https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz}
+    dependencies:
+      tslib: 2.3.0
+    dev: false

src/components/echarts/MyEchart.vue

@@ -0,0 +1,88 @@
+<template>
+    <div ref="chartRef" class="my-chart" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import echarts from './echarts'
+import 'echarts/lib/component/dataZoom'
+
+const props = defineProps(['options'])
+const chartRef = ref<HTMLDivElement>()
+let chart: echarts.ECharts | null = null
+const resizeHandler = () => {
+    chart?.resize()
+}
+const initChart = () => {
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart.setOption({
+        tooltip: {
+            showContent: true,
+            trigger: 'axis',
+            backgroundColor: 'rgba(8,36,68,.7)',
+            axisPointer: {
+                // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+            color: '#ffff',
+            textStyle: {
+                color: '#ffff'
+            }
+        },
+        grid: {
+            top: '30px',
+            left: '40px',
+            right: '40px',
+            bottom: '40px',
+
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        color: [
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        ...props.options
+    })
+}
+onMounted(() => {
+    setTimeout(() => {
+        initChart()
+    }, 20)
+    window.addEventListener('resize', resizeHandler)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    chart?.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.my-chart {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/components/echarts/MyEchartMap.vue

@@ -0,0 +1,217 @@
+<!-- 地图组件 -->
+<template>
+  <div class="bars_w" :id="id"></div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, defineEmits } from 'vue'
+import * as echarts from 'echarts'
+// import cqMap from '../../views/ECharts/zg.json'
+import 'echarts/map/js/china.js'
+import axios from 'axios'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  datas: {
+    type: Array,
+    required: true
+  }
+  // cqMap: {
+  //   // type: String,
+  //   // required: true
+  // }
+})
+const myCharts = ref()
+const emit = defineEmits(['getRegionByRegionId'])
+
+onMounted(() => {
+  GetEchar()
+})
+const convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = geoCoordMap[data[i].name]
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      })
+    }
+  }
+  return res
+}
+
+const GetEchar = () => { 
+  nextTick(() => {
+    let chartDom = document.getElementById(props.id)
+    myCharts.value = echarts.init(chartDom)
+
+    axios.get(`./zg.json`).then((res) => {
+      echarts.registerMap('china', res.data)
+
+      let option = {
+        backgroundColor: '#001540',
+        geo: {
+          show: true,
+          map: 'china',
+          roam: true,
+          top: 0,
+          left: 0,
+          zoom: 1,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: 'rgba(147, 235, 248, 1)',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                  }
+                ],
+                globalCoord: false // 缺省为 false
+              },
+              shadowColor: 'rgba(128, 217, 248, 1)',
+              // shadowColor: 'rgba(255, 255, 255, 1)',
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10
+            },
+            emphasis: {
+              areaColor: '#389BB7',
+              borderWidth: 0
+            }
+          }
+        },
+        series: [
+          //地图？
+          {
+            type: 'map',
+            map: 'china',
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: '#031525',
+                borderColor: '#FFFFFF'
+              },
+              emphasis: {
+                areaColor: '#2B91B7'
+              }
+            },
+            animation: false
+          },
+          //地图点的动画效果
+          {
+            //  name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+
+            symbolSize: function (val) {
+              return val[2] / 10
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: '{b}',
+                position: 'right',
+                show: true
+              }
+            },
+            itemStyle: {
+              normal: {
+                shadowBlur: 10
+              }
+            },
+            zlevel: 1
+          }
+        ]
+      }
+      myCharts.value.setOption(option)
+    })
+
+    window.addEventListener('resize', function () {
+      myCharts.value.resize()
+    })
+
+    //设置默认选中高亮部分
+    let index = 11
+    myCharts.value.dispatchAction({
+      type: 'highlight',
+      seriesIndex: 0,
+      dataIndex: index
+    })
+
+    // 点击事件
+    myCharts.value.on('click', (e) => {
+      emit('getRegionByRegionId', e.data)
+      myCharts.value.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 0,
+        dataIndex: 0
+      })
+      if (e.dataIndex != index) {
+        myCharts.value.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: index
+        })
+      }
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: e.dataIndex
+      })
+      index = e.dataIndex
+    })
+    // 当鼠标离开时
+    myCharts.value.on('mouseout', function (e) {
+      myCharts.value.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: index
+      })
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/components/echarts/echarts.ts

@@ -0,0 +1,84 @@
+import * as echarts from 'echarts/core'
+
+//引入需要的图表，需要什么就加什么
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  EffectScatterChart,
+  RadarChart,
+  GaugeChart
+} from 'echarts/charts'
+
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+  // 数据集组件
+  DatasetComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent
+} from 'echarts/components'
+
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
+
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption
+} from 'echarts/charts'
+
+import type {
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  ToolboxComponentOption,
+  DatasetComponentOption
+} from 'echarts/components'
+import type { ComposeOption } from 'echarts/core'
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | LegendComponentOption
+  | ToolboxComponentOption
+>
+
+// 注册必须的组件,上面引入的都需要在此注册
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  ToolboxComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  EffectScatterChart,
+  RadarChart,
+  GaugeChart
+])
+
+// 导出
+export default echarts

src/layouts/admin/components/aside.vue

@@ -27,8 +27,8 @@ const menuWidth = computed(() => config.menuWidth())
 <style scoped lang="scss">
 .layout-aside-Default {
     background: var(--ba-bg-color-overlay);
-    margin: 16px 0 16px 16px;
-    height: calc(100vh - 32px);
+    margin: 10px 0 10px 10px;
+    height: calc(100vh - 20px);
     box-shadow: var(--el-box-shadow-light);
     border-radius: var(--el-border-radius-base);
     overflow: hidden;

src/layouts/admin/components/navBar/default.vue

@@ -16,8 +16,8 @@ const config = useConfig()
 <style lang="scss" scoped>
 .nav-bar {
     display: flex;
-    height: 50px;
-    margin: 20px var(--ba-main-space) 0 var(--ba-main-space);
+    height: 40px;
+    margin: 10px var(--ba-main-space) 0 var(--ba-main-space);
     :deep(.nav-tabs) {
         display: flex;
         height: 100%;

src/styles/var.scss

@@ -2,7 +2,7 @@
 @use 'mixins' as *;
 
 // 后台主体窗口左右间距
-$main-space: 16px;
+$main-space: 10px;
 $primary-light: #3f6ad8;
 
 // --ba-background

src/utils/layout.ts

@@ -10,7 +10,7 @@ import { useConfig } from '@/stores/config'
 export function mainHeight(extra = 0): CSSProperties {
     let height = extra
     const adminLayoutMainExtraHeight: anyObj = {
-        Default: 70,
+        Default: 60,
         Classic: 50,
         Streamline: 60
     }

src/views/dashboard/components/echart.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <my-echart class="bars_w" :options="scatterOptions" />
+        <div class="">
+            <my-echart class="bars_w" :options="scatterOptions" />
+            <my-echart class="bars_w" :options="scatterOptions" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { reactive, ref } from 'vue'
+
+const scatterOptions = reactive({
+    title: {
+        text: '散点图',
+        // top: 'center',
+        left: 'center'
+    },
+
+    toolbox: {
+        feature: {
+            dataView: {
+                title: '数据视图',
+                readOnly: false
+            },
+            saveAsImage: {
+                title: '保存为图片',
+                name: '散点图'
+            } //图片下载功能
+        }
+    },
+    xAxis: {
+        scale: true
+    },
+    yAxis: {
+        scale: true
+    },
+    series: [
+        {
+            type: 'effectScatter',
+            symbolSize: 20,
+            data: [
+                [172.7, 105.2],
+                [153.4, 42]
+            ]
+        },
+        {
+            type: 'scatter',
+            // prettier-ignore
+            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+          [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+          [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+          [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+          [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+          [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+          [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+          [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+          [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+          [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+          [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+          [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+          [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+          [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+          [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+          [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+          [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+          [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+          [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+          [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+          [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+          [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+          [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+          [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+          [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+          [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+          [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+          [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+          [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+          [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+          [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+          [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+          [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+          [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+          [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+          [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+          [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+          [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+          [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+          [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+          [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+          [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+          [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+          [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+          [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+          [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+          [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+          [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+          [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+          [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+          [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+          [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+        ]
+        }
+    ]
+})
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+</style>

src/views/dashboard/index.vue

@@ -1,8 +1,21 @@
 <template>
-    123123
+    <el-tabs v-model="activeName" type="border-card">
+        <el-tab-pane label="图形" name="1">
+            <Echart />
+        </el-tab-pane>
+        <el-tab-pane label="表格" name="2">Config</el-tab-pane>
+    </el-tabs>
 </template>
 
-<script lang='ts' setup>
-
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+const activeName = ref('1')
+import Echart from '@/views/dashboard/components/echart.vue'
 </script>
-  
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+</style>