记录使⽤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%',
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给柱状图等图表绑定点击事件:
:data="productChartData"
:extend="productChartExtend"
:settings="productChartSettings"
:events="barClickEvent"
></VeHistogram>
<script>
export default {
data() {
this.barClickEvent = {
click:function(e){
console.log(e)
pane
}
}
}
}
10.调整环形图指⽰⽂字与图形的距离label: {
normal: {
padding: [0, 30], //⽂字和图的边距
},
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。