vue中简单使用echarts柱状图的一些配置

最新推荐文章于 2024-08-30 16:24:48 发布

sjb云雨小月

最新推荐文章于 2024-08-30 16:24:48 发布

阅读量4k

点赞数

分类专栏： echarts简单使用文章标签： echarts 柱状图配置

本文链接：https://blog.csdn.net/weixin_42342975/article/details/84637451

版权

本文主要介绍了在Vue中使用ECharts绘制柱状图时的三个关键配置：1)通过自定义tooltip.formatter展示更丰富的提示信息；2)应用dataZoom进行区域缩放，解决大量数据导致的柱状图错乱问题；3)设置了两种柱状图背景色的设定方法，包括全局color数组和itemStyle.normal.color的个性化设定。

摘要由CSDN通过智能技术生成

这里重点说的是柱状图的三个配置点:

第1点: 点击柱状图后显示的提示(tooltip)的内容设置

默认显示的就是: x轴显示了几种数据,tooltip提示就会显示几种数据

echats的tooltip也提供了fomatter方法,可以自定义提示内容

第2点: dataZoom,用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

当柱状图数据过多,显示会错乱,有重叠现象,就可以配置dataZoom,使得柱状图可以横向滑动. 其中start,end可以设置数据窗口范围的大小,这样在初始化的时候,柱状图就只会显示全部数据的一部分,而不会造成错乱,重叠现象

第3点: 柱状图背景色的设置

方法一: 可以直接在option下设置color数组,echarts会自动渲染,如果color数组的长度不够,那么就会循环使用该数据渲染柱状图

方法二: 在itemStyle的normal中设置color,可以直接设置颜色('#ebebbe'),

或者可以使用它提供的方法 color: () => {return: '#ebebeb'},这样可以为特定某一项数据的柱状图添加不同的背景色

      grid: {
          left: 60,
          right: 15,
          top: 10,
          bottom: 45,
          containLabel: false,
          backgroundColor: '#ffffff',
        },
        title: {
          show: false,
        },
        tooltip: {
          tri