农产品信息智能推荐平台(8)

农产品信息智能推荐平台(8)

使用v-chart做折线图，柱状图，饼状图。
首先使用el-checkbox组件作为城市的多选问题

<div class="monitor-cart-name-right-list"></div>
<!--                  <el-checkbox :indeterminate="ok" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
                  <div style="margin-top: 0px;">
                    <el-checkbox-group v-model="checkboxGroup5" size="mini" @change="changesj">
                      <el-checkbox label="济南" border></el-checkbox>
                      <el-checkbox label="青岛" border></el-checkbox>
                      <el-checkbox label="威海" border></el-checkbox>
                      <el-checkbox label="淄博" border></el-checkbox>
                      <el-checkbox label="济宁" border></el-checkbox>
                      <el-checkbox label="枣庄" border></el-checkbox>
                      <el-checkbox label="日照" border></el-checkbox>
                      <el-checkbox label="菏泽" border></el-checkbox>
                      <el-checkbox label="滨州" border></el-checkbox>
                      <el-checkbox label="泰安" border></el-checkbox>
                      <el-checkbox label="莱芜" border></el-checkbox>
                      <el-checkbox label="临沂" border></el-checkbox>
                      <el-checkbox label="东营" border></el-checkbox>
                      <el-checkbox label="潍坊" border></el-checkbox>
                      <el-checkbox label="烟台" border></el-checkbox>
                      <el-checkbox label="德州" border></el-checkbox>
                      <el-checkbox label="聊城" border></el-checkbox>
                    </el-checkbox-group>
                  </div>

效果如图：

然后使用el-radio组件进行图形的单选

</el-form-item >
    <div style="margin-top: 20px">
        <el-radio-group v-model="radio" size="small">                         	   
        <el-radio label="柱状图" border></el-radio>
        <el-radio label="折线图" border></el-radio>
        <el-radio label="饼状图" border></el-radio>
        </el-radio-group>
    </div>
<el-form-item >

接下来对其判断选择图形

<h1 v-if="nongchan.model==='折线图'">
              <ve-line :data="chartData" :settings="chartSettings"></ve-line>
              </h1>
              <h1 v-else-if="nongchan.model==='柱状图'">
                <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
              </h1>
              <h1 v-else>
                <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
              </h1>

结果如图：