@10yun/cv-mobile-ui 0.5.55 → 0.5.57

package/other/qiun-data-charts_2.5.0-20230101_example/pages/layout/layout.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="在swiper中使用"/>
+    <swiper style="height: 330px;" :indicator-dots="true">
+      <swiper-item>
+        <view class="charts-box">
+          <qiun-data-charts type="line" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperida" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="charts-box">
+          <qiun-data-charts type="column" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperidb" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
+        </view>
+      </swiper-item>
+      <swiper-item>
+        <view class="charts-box">
+          <qiun-data-charts type="area" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperidc" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    
+    <qiun-title-bar title="在scroll-view中使用"/>
+    <scroll-view style="height: 400px;" :scroll-y="true">
+      <view class="charts-box">
+        <!-- 如果您的scroll-view可能和我这个一样，既有页面滚动，还有scroll-view滚动，这种情况下，需要动态传入offsetTop的值为页面滚动条滚动的距离 -->
+        <qiun-data-charts type="column" :chartData="chartsDataColumn1" canvasId="scroll-viewid" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
+      </view>
+      <view style="height: 300px;background: #1890FF;">
+        
+      </view>
+    </scroll-view>
+    
+    
+    <qiun-title-bar title="父元素fixed定位"/>
+    <view class="botton-box">
+      <button class="uni-button" type="default" @click="openfixed">点击显示弹出层</button>
+    </view>
+    
+    
+    <qiun-title-bar title="组件套组件示例(尽量别这么用)"/>
+    <test-charts :pageScrollTop="pageScrollTop"/>
+    
+    
+    
+    <qiun-title-bar title="使用v-for生成图表"/>
+    <view class="charts-box" v-for="(item, index) in listA" :key="item.id">
+      <!-- 建议循环使用时，加上key值 -->
+      <qiun-data-charts :key="item.id" :type="item.type" :chartData="item.chartData" :animation="false"/>
+    </view>
+    <qiun-title-bar title="使用v-for生成图表2"/>
+    <view class="charts-box" v-for="(item, index) in listB" :key="item.id">
+      <!-- 建议循环使用时，加上key值 -->
+      <qiun-data-charts :key="item.id" :type="item.type" :chartData="item.chartData" :canvas2d="true" :canvasId="item.id" :animation="false"/>
+    </view>
+    
+    
+    <view class="fix-class" v-if="fixedzt">
+      <view class="fix-bottom">
+        <view class="close-title" @click="openfixed">点击此处关闭弹窗</view>
+        <qiun-title-bar title="父元素fixed定位"/>
+        <view class="charts-box">
+          <qiun-data-charts type="area" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="fixedcanvasid" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
+        </view>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+export default {
+  data() {
+    return {
+      chartsDataColumn1: {},
+      pageScrollTop:0,
+      fixedzt:false,
+      absolutezt:false,
+      listA:[],
+      listB:[]
+    };
+  },
+  onReady() {
+    //模拟从服务器获取数据
+    this.getServerData()
+    
+    //模拟v-for数据变化
+    setTimeout(() => {
+      this.listA=[
+        {id:"xlsldkfjiw1",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Column))},
+        {id:"docldkfjiw2",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
+        {id:"pptldkfjiw3",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))}
+      ]
+      this.listB=[
+        {id:"xlsldkfjiw4b",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Column))},
+        {id:"docldkfjiw5b",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
+        {id:"pptldkfjiw6b",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))}
+      ]
+    },5000)
+  },
+  onPageScroll(e) {
+    this.pageScrollTop = e.scrollTop
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
+        
+        this.listA=[
+          {id:"xlsldkfjiw1",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
+          {id:"docldkfjiw2",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))},
+          {id:"pptldkfjiw3",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Line))}
+        ]
+        
+        this.listB=[
+          {id:"xlsldkfjiw4b",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
+          {id:"docldkfjiw5b",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))},
+          {id:"pptldkfjiw6b",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Line))}
+        ]
+      }, 1500);
+    },
+    openfixed(){
+      this.fixedzt = !this.fixedzt
+    },
+    openabsolute(){
+      
+    }
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+.botton-box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+}
+.fix-class{
+  position: fixed;
+  top:0;
+  height: 100vh;
+  width: 100vw;
+  background: rgba(0,0,0,0.3);
+}
+.fix-bottom{
+  position: fixed;
+  bottom:0;
+  height: 400px;
+  width: 100vw;
+  border-radius: 15px 15px 0px 0px;
+  background: #FFFFFF;
+}
+.close-title{
+  border-bottom: 1px solid #999999;
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+}
+</style>

package/other/qiun-data-charts_2.5.0-20230101_example/pages/other/other.vue

@@ -0,0 +1,233 @@
+<template>
+  <view class="content">
+    <qiun-title-bar title="localdata渲染图表1+点击获取索引"/>
+    <view class="charts-box">
+      <!-- 只需绑定@getIndex即可获取点击索引 -->
+      <qiun-data-charts type="column" :localdata="chartsDatalocaldataA"  @getIndex="getIndex"/>
+    </view>
+    <qiun-title-bar title="localdata渲染图表2+禁用鼠标移动"/>
+    <view class="charts-box">
+      <qiun-data-charts type="pie" :localdata="chartsDatalocaldataB" :onmouse="false"/>
+    </view>
+    <qiun-title-bar title="渲染完成后显示自定义tooltip" />
+    <view class="charts-box"> 
+      <!-- 渲染完成后进行操作图表，需要绑定@complete事件，然后在@complete事件中进行操作 -->
+      <qiun-data-charts
+        type="column"
+        :chartData="chartsDataColumn1"
+        @complete="complete"
+      />
+    </view>
+    <qiun-title-bar title="跟手tooltip示例" />
+    <view class="charts-box" >
+      <!-- 开启onmovetip后，建议同时开启canvas2d模式（需要传canvasId），否则在小程序端会很卡。开启onmovetip功能的前提是需要开启ontouch，并且关闭图表滚动条，即:opts="{enableScroll: false}" -->
+      <qiun-data-charts
+        type="column"
+        :opts="{enableScroll: false}"
+        canvasId="canvas2dNeedId"
+        :chartData="chartsDataColumn1"
+        :canvas2d="true"
+        :ontouch="true"
+        :onmovetip="true"
+        @getTouchMove="getTouchMove"
+      />
+    </view>
+    <qiun-title-bar title="固定位置显示tooltip+禁用图例点击" />
+    <view class="charts-box">
+      <!-- 这个demo演示自定义tooltip的样式及增加额外的数据，例如换行等 -->
+      <qiun-data-charts
+        type="line"
+        :opts="{extra:{tooltip:{showArrow: false,borderWidth: 1,borderRadius:8,borderColor: '#FF0000',bgColor: '#FFFFFF',bgOpacity: 0.9,fontColor: '#000000',splitLine: false}}}"
+        :chartData="chartsDataColumn1"
+        :tapLegend="false"
+        :tooltipCustom="{x:2,y:2}"
+      />
+    </view>
+    <qiun-title-bar title="自定义tooltip(textList换行),内置方法" />
+    <view class="charts-box">
+      <!-- 需要关闭组件的tooltip，即:tooltipShow="false"，然后在@getIndex中调用uCharts的showTooltip方法，注意，APP端不能实现，其他端需要引用config-ucharts.js作为实例承载的中间件。 -->
+      <!-- 如果需要做跟手tooltip，需要在@getTouchMove事件中调用，注意需要添加防抖，可参考组件内防抖方法，否则会导致逻辑层与视图层频繁通信造成卡顿 -->
+      <qiun-data-charts
+        type="line"
+        :tooltipShow="false"
+        :chartData="chartsDataColumn1"
+        @getIndex="showMyTooltip"
+      />
+    </view>
+    <qiun-title-bar title="自定义tooltip(textList换行),opts参数" />
+    <view class="charts-box">
+      <!-- 需要关闭组件的tooltip，即:tooltipShow="false"，然后在@getIndex中改变opts来实现tooltip，注意，APP端不能实现，其他端需要引用config-ucharts.js作为实例承载的中间件。 -->
+      <qiun-data-charts
+        type="line"
+        :opts="optsTooltip"
+        :animation="false"
+        :tooltipShow="false"
+        :chartData="chartsDataColumn1"
+        @getIndex="showOptsTooltip"
+      />
+    </view>
+    <qiun-title-bar title="强制展示错误信息"/>
+    <button class="uni-button" type="default" @click="changeErrorMessage">点击展示错误信息</button>
+    <view class="charts-box">
+      <qiun-data-charts type="line" :chartData="chartsDataLine1" :errorMessage="errorMessage" :errorReload="false" @error="error"/>
+    </view>
+    <qiun-title-bar title="uCharts保存为图片"/>
+    <button class="uni-button" type="default" @click="createImage('createImageUCharts')">点击保存为图片</button>
+    <view class="charts-box">
+      <qiun-data-charts type="area" ref="createImageUCharts" :chartData="chartsDataLine1" @getImage="getImage"/>
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+//下面是uCharts的配置文件及qiun-data-charts组件的公用中转参数，可以从本配置文件中获取uCharts实例、opts配置、format配置（APP端因采用renderjs无法从此配置文件获取uCharts实例）
+//***并不是所有的页面都需要引用这个文件***引入这个configjs是为了获取组件的uCharts实例，从而操作uCharts的一些方法，例如手动显示tooltip及一些其他uCharts包含的方法及事件。
+//再说一遍，只能在H5内使用，APP不行，APP不行，APP不行（如果需要自定义tooltip，也可以通过opts中传递tooltip参数来实现模拟显示tooltip，详见showOptsTooltip方法）
+import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
+
+export default {
+  data() {
+    return {
+      //注意如果使用localdata数据格式，默认值的类型应该是数组
+      chartsDatalocaldataA:[],
+      chartsDatalocaldataB:[],
+      //注意如果使用localdata数据格式，默认值的类型应该是数组
+      chartsDataColumn1:{},
+      chartsDataLine1:{},
+      errorMessage:"自定义的错误信息，关闭点击重新加载",
+      //在opts中拼接tooltip
+      optsTooltip:{}
+    };
+  },
+  onLoad() {
+    //模拟从服务器获取数据
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDatalocaldataA=JSON.parse(JSON.stringify(demodata.localdata))
+        this.chartsDatalocaldataB=JSON.parse(JSON.stringify(demodata.localdataB))
+      	this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
+        this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+      }, 1500);
+    },
+    complete(e) {
+      console.log("渲染完成事件",e);
+      //uCharts.instance[e.id]代表当前的图表实例（除APP端，APP不可在组件外调用uCharts的实例）
+      console.log("uCharts实例",uCharts.instance[e.id]);
+      //uCharts.option[e.id]代表当前的图表的opts（除APP端，APP不可在组件外调用uCharts的实例）
+      console.log("uCharts的option",uCharts.option[e.id]);
+      //下面展示渲染完成后，通过实例调用uCharts的showToolTip方法，有了uCharts实例，您也可以在其他地方调用图表的方法及数据（除APP端，APP因采用renderjs，无法获取uCharts实例）
+      // #ifndef APP-PLUS
+      //如果需要tooltip换行显示，也可以参照本示例，关闭组件本身的tooltip功能，即:tooltipShow="false"，然后在@getIndex事件中，通过uCharts.instance[e.id].showToolTip()方法来自定义。
+      let textList = [
+        { text: '默认显示的tooltip', color: null },
+        { text: '类别1：某个值xxx', color: '#2fc25b' },
+        { text: '类别2：某个值xxx', color: '#facc14' },
+        { text: '类别3：某个值xxx', color: '#f04864' }
+      ];
+      //这里指定了changedTouches的x和y坐标，当指定index索引时，x值会被自动修正到正确位置，给0即可，主要是y的坐标值
+      uCharts.instance[e.id].showToolTip(
+        { changedTouches: [{ x: 0, y: 100 }] },
+        {
+          index: 3,
+          textList: textList
+        }
+      );
+      // #endif
+    },
+    getIndex(e){
+      console.log("获取点击索引事件",e);
+    },
+    //APP端因为拿不到uCharts的实例，只能通过opts传参的方法来实现tooltip
+    showOptsTooltip(e){
+      console.log("获取点击索引事件",e);
+      //先拿到点击索引，您可以根据索引拼接一下textList
+      let currentIndex = e.currentIndex.index;
+      if(currentIndex > -1){
+        let textList = [
+          {text:"我是一个自定义标题"+this.chartsDataColumn1.categories[currentIndex],color:null},
+          { text: '类别1：'+this.chartsDataColumn1.series[0].data[currentIndex], color: '#2fc25b' },
+          { text: '类别2：'+this.chartsDataColumn1.series[1].data[currentIndex], color: '#facc14' },
+        ];
+        this.optsTooltip={
+          tooltip:{
+            index:currentIndex,
+            offset:{
+              x:e.opts.chartData.xAxisPoints[currentIndex]+e.opts.chartData.xAxisData.eachSpacing/2,//这里的x坐标为了与x轴categories中的点位对齐，我调用的opts中的参数
+              y:e.event.y,//y坐标，用的是点击的点位的y值
+            },
+            textList:textList
+          },
+          update:true
+        }
+      }
+    },
+    //非APP端可以通过uCharts实例来调用uCharts方法来实现自定义tooltip
+    showMyTooltip(e){
+      console.log("获取点击索引事件",e);
+      //拿到canvasId后即e.id，可以通过uCharts.instance[e.id]代表当前的图表实例（除APP端，APP不可在组件外调用uCharts的实例）
+      console.log("获取uCharts实例",uCharts.instance[e.id]);
+      //uCharts.option[e.id]代表当前的图表的opts（除APP端，APP不可在组件外调用uCharts的实例）
+      console.log("uCharts的option",uCharts.option[e.id]);
+      //从option（opts）中获取数据
+      let categories = uCharts.option[e.id].categories;
+      let series = uCharts.option[e.id].series;
+      //e.currentIndex是点击的的点位索引值
+      let index = e.currentIndex.index;//注意v2.1.2版本后，e.currentIndex是对象，而e.currentIndex.index是索引值，如果是时间轴图表，index在多个series的情况下会是数组
+      //自行通过uCharts的实例调用showToolTip方法（APP端不能实现，无法通过renderjs获取到uCharts实例）
+      // #ifndef APP-PLUS
+      //如果需要tooltip换行显示，也可以参照本示例，关闭组件本身的tooltip功能，即:tooltipShow="false"，然后在@getIndex事件中，通过uCharts.instance[e.id].showToolTip()方法来自定义。
+      let textList = [{ text: categories[index] + "年收入情况", color: null }];
+      for (let i = 0; i < series.length; i++) {
+        textList.push({text: "自定义" + series[i].name + ":" + series[i].data[index] + "美元", color: series[i].color})
+      }
+      //changedTouches是点击的坐标值
+      uCharts.instance[e.id].showToolTip(
+        { changedTouches: [e.event] },
+        {
+          index: index,
+          textList: textList
+        }
+      );
+      // #endif
+      
+    },
+    getTouchMove(e){
+      console.log("获取TouchMove",e);
+    },
+    changeErrorMessage(){
+      this.errorMessage="自定义错误信息，关闭点击重新加载"+Math.floor(Math.random() * 1000)
+    },
+    createImage(refid){
+    	this.$refs[refid].getImage();
+    },
+    getImage(e){
+      console.log(e);
+    },
+    error(e){
+      console.log("组件传递过来的错误信息",e);
+      //TODO something 重新加载或者其他你想干的事
+    }
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/other/qiun-data-charts_2.5.0-20230101_example/pages/tab/tab.vue

@@ -0,0 +1,115 @@
+<template>
+  <view class="content">
+    <view class="uni-tabs__header">
+    	<view class="uni-tabs__nav-wrap">
+    		<view class="uni-tabs__nav-scroll">
+    			<scroll-view class="uni-tabs__nav" :scroll-x="true">
+    				<block v-for="(item, index) in menus" :key="index">
+    					<view @click="switchTab(item.value)" :class="{'is-active':currentTab===item.value}" class="uni-tabs__item">{{item.text}}</view>
+    				</block>
+    			</scroll-view>
+    		</view>
+    	</view>
+    </view>
+    <view v-show="currentTab==='ucharts1'">
+      <!-- 如果tab切换的父容器使用了v-show来控制显示，组件上需绑定reshow属性用于强制重新渲染图表。如组件父元素没有v-show，则不必传此参数。-->
+      <qiun-title-bar title="基本柱状图"/>
+      <view class="charts-box">
+      <!-- 这里因为是页面初始化默认显示的，如果不给reshow也会显示，切换回来也不会变成白板，但切换到其他tab后，改变了窗口尺寸再切换回来后，没有reshow则不会根据改变后的窗口自动适应（除非在当前tab显示的情况下再变更窗口大小才会自适应），所以建议加上reshow属性 -->
+        <qiun-data-charts type="column" :chartData="chartsDataColumn1" />
+      </view>
+      <qiun-title-bar title="堆叠柱状图"/>
+      <view class="charts-box">
+        <!-- 这个图加了reshow属性，上图没加，可以对比一下差异 -->
+        <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartsDataColumn2" :reshow="currentTab==='ucharts1'"/>
+      </view>
+      
+    </view>
+    <view v-if="currentTab==='ucharts2'">
+        <!-- 第二个选项卡页面，用v-if控制则不需要加reshow，父元素使用v-if后，会导致组件重新加载，造成资源浪费 -->
+      <qiun-title-bar title="基本饼状图"/>
+      <view class="charts-box">
+        <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
+      </view>
+      <qiun-title-bar title="环形图"/>
+      <view class="charts-box">
+        <qiun-data-charts type="ring" :opts="{extra:{ring:{ringWidth: 60,linearType:'custom'}}}" :chartData="chartsDataRing1"/>
+      </view>
+    </view>
+    <view v-show="currentTab==='echarts1'">
+      <qiun-title-bar title="基本折线图"/>
+      <view class="charts-box">
+        <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" :reshow="currentTab==='echarts1'"/>
+      </view>
+      <qiun-title-bar title="基本柱状图" />
+      <view class="charts-box">
+        <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" :reshow="currentTab==='echarts1'"/>
+      </view>
+    </view>
+    <!-- ECharts如果父元素用了v-if，因renderjs与逻辑层通信不同步，可能会导致初始化时监听不到prop变化，不能成功初始化，虽然组件内使用延时200ms的方法返回逻辑层强制重新读取数据，但这不是正确的解决问题的办法，并且父元素使用了 v-if 会导致组件重新加载，造成资源浪费，强烈建议将v-if改成v-show！！！ -->
+    <view v-if="currentTab==='echarts2'">
+      <qiun-title-bar title="基本柱状图"/>
+      <view class="charts-box">
+        <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" :reshow="currentTab==='echarts2'"/>
+      </view>
+      <qiun-title-bar title="基本折线图" />
+      <view class="charts-box">
+        <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" :reshow="currentTab==='echarts2'"/>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
+import demodata from '@/mockdata/demodata.json';
+
+export default {
+  data() {
+    return {
+      chartsDataColumn1:{},
+      chartsDataColumn2:{},
+      chartsDataPie1:{},
+      chartsDataRing1:{},
+      chartsDataLine1:{},
+      chartsDataLine2:{},
+      menus:[{text:"uCharts图1",value:"ucharts1"},{text:"uCharts图2",value:"ucharts2"},{text:"ECharts图1",value:"echarts1"},{text:"ECharts图2",value:"echarts2"}],
+      currentTab: 'ucharts1',
+    };
+  },
+  onLoad() {
+    //模拟从服务器获取数据
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      setTimeout(() => {
+      	//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
+      	//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
+        this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
+        this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
+        this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
+        this.chartsDataRing1=JSON.parse(JSON.stringify(demodata.PieA))
+        this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
+        this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
+      }, 1500);
+    },
+    switchTab(tab) {
+    	this.currentTab = tab
+    },
+  }
+};
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
+}
+</style>