# ucharts

whycq

2023-10-11 64fb01245ae8a309bd3cbda6e7aba10d8dd9fb5e

 pages/index/index.vue

@@ -25,13 +25,19 @@
            </view>
         </view>
      </view>
		
      <view class="charts-box">
        <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn4" :background="red"/>
      </view>
   </view>
</template>

<script>
   import demodata from '@/mockdata/demodata.json';
   export default {
      data() {
         return {
            chartsDataColumn4:{},
            title: 'Hello',
            mainItem: [
               {
@@ -64,14 +70,26 @@
               {name: '李世豪3级',performance:'200万元'},
               {name: '李世豪1级',performance:'112万元'}
            ],
            bgs: ['bg-blue','bg-red']
            bgs: ['bg-blue','bg-red'],
            red: '#aaffff'
            
         }
      },
      onLoad() {
         this.backGroundRepeat()
      },
      onReady() {
        //模拟从服务器获取数据
        this.getServerData()
      },
      methods: {
         getServerData() {
           setTimeout(() => {
              //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
              //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
              this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
           }, 1500);
         },
         backGroundRepeat() {
            let len = this.bgs.length
            let i = 0
@@ -89,6 +107,10 @@
</script>

<style scoped>
   .charts-box {
      height: 300px;
      margin: 8px;
   }
   .content {
      display: flex;
      flex-direction: column;