vue项目中使用ECharts柱状图并利用双Y轴给柱状图添加右边框

本篇讲述在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',// 在此处改变右上方图例的形状
         
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值