本篇讲述在vue项目中使用ECharts柱状图,并利用双Y轴给图表添加右边框
应项目要求,UI给的设计图给图表右边添加了右边框,而echarts中大多是无右边框,或是全部加上纵轴线,显示为网格样式,因此在这想到用双Y轴实现需求。
首先确保项目中已经安装echarts并且已经引入
HTML中放置一个容器即可:
<div id="myChart"></div>
在data中定义图表配置项,或者在函数中定义可以,我这里是直接在data中定义的
option: {
color: ['#5ba4f7','#00d1b1'],//分别对应两个柱状图的颜色
textStyle: {
color: '#828282'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
icon: 'square',// 在此处改变右上方图例的形状