最近项目中需要用到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';
使用dataZoom的时候如果要去掉滚动条左右两端的提示文字,可以设置以下属性
dataZoom:[
{
textStyle:false
}
]
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)
}
}
}
}
10.调整环形图指示文字与图形的距离
label: {
normal: {
padding: [0, 30], //文字和图的边距
},
},
11.饼状图,某些项的值都很小的时候,avoidLabelOverlap属性要让它默认未true,不能改为false,否则会出现lable重叠的情况
12.当走个坐标轴是人数时,不希望刻度出现小数时,要设置minInterval:1 ,如下:
yAxis : {minInterval:1},
13.环形图设置每段色块的距离,效果如下:
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},