Vue中使用echarts实现柱状图（双柱）

原创

已于 2022-03-14 11:08:52 修改 · 置顶 · 8.3k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #javascript #vue.js #前端 #echarts

于 2020-10-21 09:08:14 首次发布

实现效果：
在这里插入图片描述

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

option配置：

option = {
   
   
              tooltip: {
   
   
                trigger: 'axis',
                axisPointer: {
   
   
                  type: 'cross',
                  crossStyle: {
   
   
                    color: '#999'
                  }
                }
              },
              legend: {
   
   
                icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 10,  // 设置宽度