Vue+iView+Echarts开发问题解决汇总

1. Echarts柱形图鼠标悬浮时的中线怎么去掉？

在Echarts柱形图中，当鼠标悬浮在柱子上时，会显示一条中线。这条中线有时候会影响数据的可读性。为了去掉它，可以设置如下代码：

series: [
  {
    type: 'bar',
    emphasis: {
      itemStyle: {
        borderColor: 'rgba(0,0,0,0)'
      }
    }
  }
]

2. created中改变props的值，组件watch监听不到是为什么？

当在created钩子函数中改变props的值时，组件的watch监听器可能无法捕获到这个变化。这是因为created钩子函数在组件挂载之前执行，而watch监听器在组件挂载之后执行。为了解决这个问题，可以将watch监听器放在mounted钩子函数中。

3. 数字类型的input明明有值，但是在form的非空校验中通不过怎么回事？

当input框的类型是数字类型时，即使输入了值，在form的非空校验中也可能通不过。这是因为input框的value属性是一个字符串，而form的非空校验器通常要求的是一个数字。为了解决这个问题，可以将input框的value属性转换为数字类型，如下代码所示：

<input type="number" v-model.number="value">

4. iView中如何禁用下拉框选项？

在iView中，可以通过设置disabled属性来禁用下拉框选项。如下代码所示：

<i-select v-model="value">
  <i-option value="1" disabled>选项1</i-option>
  <i-option value="2">选项2</i-option>
  <i-option value="3">选项3</i-option>
</i-select>

5. Echarts中如何设置饼图的中心位置？

在Echarts中，可以通过设置center属性来设置饼图的中心位置。如下代码所示：

series: [
  {
    type: 'pie',
    center: ['50%', '50%']
  }
]

6. Vue.js中如何使用iView的Message组件显示错误信息？

在Vue.js中，可以使用iView的Message组件来显示错误信息。如下代码所示：

this.$Message.error('错误信息');

7. Echarts中如何设置柱状图的间距？

在Echarts中，可以通过设置barGap和barCategoryGap属性来设置柱状图的间距。如下代码所示：

series: [
  {
    type: 'bar',
    barGap: 0.1,
    barCategoryGap: 0.2
  }
]

8. iView中如何设置表格的列宽度？

在iView中，可以通过设置width属性来设置表格的列宽度。如下代码所示：

<i-table :columns="columns">
  <i-column width="100px">列1</i-column>
  <i-column width="200px">列2</i-column>
  <i-column width="300px">列3</i-column>
</i-table>

9. Echarts中如何设置折线图的拐点形状？

在Echarts中，可以通过设置symbol属性来设置折线图的拐点形状。如下代码所示：

series: [
  {
    type: 'line',
    symbol: 'circle'
  }
]

10. iView中如何设置弹出框的标题？

在iView中，可以通过设置title属性来设置弹出框的标题。如下代码所示：

<i-modal title="标题">
  ...
</i-modal>