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

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

第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: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'none', // 设置点击时是否有背景阴影,默认为直线，可选为：'line' | 'shadow' | 'none' | 'cross'
          },
          hideDelay: 3000,
          formatter: data => {
            const orderNum = this.orderList[data[0].dataIndex];
            return `营业额: ￥${data[0].data}<br />订单数: ${orderNum}`; // 拼接点击柱状图后的提示内容
          },
        },
        dataZoom: [
          {
            type: 'inside', // 横向滑动设置
            xAxisIndex: [0],
            start: 0, // 初始化开始位置
            end: 30, // 初始化结束为止
            zoomLock: false,
          },
        ],
        series: [{
          type: 'bar',
          name: '营业额',
          stack: '营业额',
          barWidth: 27,
          data: [],
          itemStyle: {
            normal: {
              color: data => {
                let itemColor = '#FFE6D0';
                if (data.name === '今天') {
                  itemColor = '#FF8115'; // 设置'今天'柱状图的的颜色
                }
                return itemColor;
              },
              barBorderRadius: [4, 4, 0, 0],
            },
          },
        }],

最后

以上就是典雅衬衫为你收集整理的vue中简单使用echarts柱状图的一些配置的全部内容，希望文章能够帮你解决vue中简单使用echarts柱状图的一些配置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。