carInsightSystem_wxapp/contrastPackages/eventRatio/weibo/index.wxml

<view class="chart_box">
    <view class="chart_title">微博信息量对比</view>
    <view class="table">
        <c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption}}" height="100%"></c-echars>
    </view>
</view>

<view class="chart_box">
    <view class="chart_title">微博互动人数</view>
    <view class="table">
        <c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption2}}" height="100%"></c-echars>
    </view>
</view>
<view class="chart_box">
    <view class="chart_title">微博大V对比</view>
    <view class="table">
        <c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption4}}" height="100%"></c-echars>
    </view>
</view>

<view class="event_distribution">
    <view class="chart_title">事件调性分布</view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件一</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{weiboDist[0].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{weiboDist[0].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件二</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{weiboDist[1].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{weiboDist[1].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
</view>

<view class="area_box">
    <view class="top-title">
        <view style="width: 45%;">活跃用户信息</view>
    </view>
    <view  wx:for="{{area}}"  wx:for-index='indedx'>
        <view style="margin:10px 32rpx 0 32rpx">{{indedx==0?"事件一":"事件二"}}</view>
        <view class="chart_box" style="margin-top:-60rpx;">
            <view style="float:left;width:342rpx;height:400rpx;">
                <c-echars showChart="{{showChart}}" canvasId="region-canvas1" chartId="regionbar1" chartOption="{{item.func[0]}}" height="100%"></c-echars>
            </view>
            <view style="float:right;width:342rpx;height:400rpx;">
                <c-echars showChart="{{showChart}}" canvasId="region-canvas1" chartId="regionbar1" chartOption="{{item.func[1]}}" height="100%"></c-echars>
            </view>
        </view>
    </view>
</view>
<view class="event_distribution">
    <view class="chart_title">微博用户性别对比</view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件一</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{sex[0].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{sex[0].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件二</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{sex[1].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{sex[1].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
</view>


<view class="event_distribution">
    <view class="chart_title">微博认证用户对比</view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件一</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{attestation[0].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{attestation[0].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
    <view style="width: 100%;display: flex; justify-content: space-between;" >
        <view class="table_pie">
        <view style="margin-left:32rpx;font-size: 32rpx;"> 事件二</view>
        <c-echars showChart="{{showChart}}" canvasId="wbtype-canvas" chartId="wbtype" chartOption="{{attestation[1].func}}" height="100%"></c-echars>
    </view>
    <view class="circle-data">
        <view wx:for="{{attestation[1].arr}}" wx:for-item="item" wx:key="name" style="margin-bottom: 64rpx;display: flex;justify-content: flex-start;margin-top: 60rpx;">
            <view class="circle-data-item">
                <view  class="colorTags" style="{{pieColor[index]}}"></view>
                <view class="circle-data-title">{{item.name}}</view>
            </view>
            <view class="circle-data-item">
                <view>数量</view>
                <view class="circle-data-title">{{item.value}}</view>
            </view>
            <view class="circle-data-item">
                <view>占比</view>
                <view class="circle-data-title">{{item.percent}}%</view>
            </view>
        </view>
    </view>
    </view>
</view>