@10yun/cv-mobile-ui 0.5.63 → 0.5.65

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

@@ -1,174 +0,0 @@
-<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

@@ -1,233 +0,0 @@
-<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

@@ -1,115 +0,0 @@
-<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>