记录使用v-charts(echarts)的时候遇到的问题及解决方法

最近项目中需要用到v-charts,遇到的问题:

1.需要将不同列的柱子颜色设置成不一样的(如下图效果).我开始想的是在colors属性的数组列表中添加不同的颜色就可以了,发现并不起作用.

需要去给它在settings里面配置样式才行

<template>
    <VeHistogram :data="chartData" :settings="chartSettings"></VeHistogram>
</template>

<script>
export default {
  data() {
    this.chartSettings = {
      itemStyle: {
        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        color: function(params) {
          var colorList = ['#FBD95C', '#F2A7C2', '#4CD0DD', '#E386EE'];
          return colorList[params.dataIndex];
        }
      }
    };
  }
};
</script>

2.x轴的文字出现了显示不全的问题,测试了一下文字比较短时可以完整显示,猜测是文字过长导致的显示不全.

通过以下代码将文字设置成倾斜一定角度,将全部内容显示出来.

<template>
    <VeHistogram :data="chartData" :settings="chartSettings" :extend="chartExtend"></VeHistogram>
</template>
<script>
export default {
  data() {
    this.chartSettings={
       xAxis: {
        axisLabel: {
          margin: 15, // 刻度标签与轴线之间的距离
          interval: 0, // 坐标轴刻度标签的显示间隔
          rotate: 10, // 刻度标签旋转的角度
          align: 'center' // 文字水平对齐方式
        }
      }
    }
  }
};
</script>

3.修改柱状图的上下左距离容器的距离.

this.chartExtend={
   grid: {
        left: '5%',
        right: '5%',
        bottom: '3%',
        top: '10%',
        containLabel: true
    }  
}

 4.在el-tabs组件中的el-tab-pane引入echarts图表时,打开页面时图表无法显示,需要缩小浏览器框口才能显示.猜测可能是渲染的问题,联想到之前使用v-show的时候也遇到过类似的渲染问题,给图表添加了一个v-if,问题得到解决.

<el-tabs v-model="activeName">

<el-tab-pane label="构成比例" name="first">
      <VePie
        height="150px"
        :data="formChartData"
        :settings="formChartSettings"
        :tooltip-visible="false"
        legend-position="bottom"
        :extend="formChartExtend"
      ></VePie>
    </el-tab-pane>
    <el-tab-pane label="产值总览" name="second">
      <p class="title">各区县生产总值情况表</p>
      <VeHistogram
        v-if="activeName=== 'second' "
        height="200px"
        :data="productChartData"
        :extend="productChartExtend"
        :settings="productChartSettings"
        :legend-visible="false"
      ></VeHistogram>
    </el-tab-pane>
</el-tabs>

export default {
    data() {
      return {
        activeName: 'first'
      };
    }
  };

 5.使用柱形图时,有多簇柱形,需要设置每簇之间的间距.

每簇之间的间距:   barCategoryGap 

簇内每个柱之间的距离:  barGaps 

 

有一个问题就是使用barCategoryGap时不能同时使用barWidth来改变柱子的宽度,否则barCategoryGap无法生效.

 

6.只保留横向轴线和水平线

grid: {
    show: false
}
xAxis: {
    splitLine: {
        show: false
    }
}

 

7.vcharts实现堆叠柱状图

实现叠柱状图的核心是要在series里面设置stack属性,只要两个或者多个柱子的stack属性值是相同的就会堆叠在一个,否则就会并排放.

series: {
    stack: '适宜程度'
}

 

8.当横坐标数据过多时,内容会挤在一块,这时候需要给横坐标添加滚动条,添加滚动条相关的属性是dataZoom,但是这个属性与其他的属性不同,其他的属性只要引入了echarts后就可以直接使用了,dataZoom需要单独引入:

import 'echarts/lib/component/dataZoom';

 9.vcharts给柱状图等图表绑定点击事件:

<VeHistogram
        height="200px"
        :data="productChartData"
        :extend="productChartExtend"
        :settings="productChartSettings"
        :events="barClickEvent"
></VeHistogram>

<script>
export default {
    data() {
        this.barClickEvent = {
            click:function(e){
                console.log(e)
             }
        }
    }
}