<!--
 * @Author: your name
 * @Date: 2021-10-16 13:57:58
 * @LastEditTime: 2021-10-16 14:16:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
-->
<template>
    <div class="cpt-outter">
        <v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
        <div class="cpt-inner">
            <div class="cpt-item" v-for="(item,index) in list" :key="index">
                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
                <div class="d1">
                    <v-echarts :opt="item.drawOpt"></v-echarts> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
export default {
    name: "comparisonOfPositiveTopicsInTheForum",
    data() {
        return {
           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
          list: [
              {
                  name: '奥迪',
                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
              },
              {
                  name: '宝马',
                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
              },
              {
                  name: '奔驰',
                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
              },
              {
                  name: '吉利',
                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
              },
              {
                  name: '大众',
                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
              },
              {
                  name: '别克',
                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
              }
          ] 
        }
    }
}
</script>

<style lang="less" scoped>
.cpt-outter {
    width: 100%;
    height: 412px;
    .cpt-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .cpt-item {
            width: 100%;
            height: 100%;
            .s1 {
                padding-left: 16px;
                display: block;
                height: 40px;
                line-height: 40px;
                color:#fff;
                font-size: 18px;
            }
            .d1 {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
    }
}
</style>
