Echarts柱状图篇——项目里使用过的柱状图（一）

我一会就去睡
3,650 阅读3分钟

前段时间公司需要重构大数据监管页面，一提到图表类页面，首先想到的就是echarts，记录一下项目里用到的柱图

准备

  • 技术栈使用vue + echarts，刚开始在echarts 和 vue-echarts 比较了一下，使用vue-echarts更易上手，但echarts功能更丰富，最后就使用了echarts
  • 通过对官网入门示例代码的改造，实现我们想要的效果
  • 本着先实现后优化的原则，开搞

官网示例：

最终的效果：

引入echarts

全局引入（简单粗暴）

  • npm i echarts --save
  • 在main.js配置：
  • import echarts from 'echarts'
  • Vue.prototype.$echarts = echart

按需引入（后面优化再说）

初始化报错：Cannot read property 'getAttribute' of undefined

  • 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的， 利用Vue中的ref和$refs来代替document.getElementById（）获取该图形容器对象

需求1：鼠标移上去显示自定义内容

需要使用echarts提示框组件：tooltip

tooltip: {
      //自定义显示内容--提示框浮层内容格式器，支持字符串模板和回调函数两种形式
      formatter: '',
      //坐标轴指示器配置项。
      axisPointer:{
        type:'cross'
      }
    }

附带官方文档：

tooltip:
提示框组件

tooltip.show | boolean
[default:true]
是否显示提示框组件，包括提示框浮层和 axisPointer。

tooltip.trigger | string
[ default: 'item' ]
- 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
- 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用,可以通过 axisPointer.axis 指定坐标轴。
- 'none' 什么都不触发。

tooltip.axisPointer | Object
坐标轴指示器配置项。
tooltip.axisPointer 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPinter 在简单场景下会更方便一些。
注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。

tooltip.axisPointer.type | string
[ default: 'line' ]
指示器类型。
- 'line' 直线指示器
- 'shadow'  阴影指示器
- 'none' 无指示器
- 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

需求2：自定义柱状图样式，使用渐变色，并把信息默认展示出来

需要使用:series组件

barWidth: "20px",
series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],

        label: {
          //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
          show: true, //是否显示
          position: "top", //标签的位置。
          formatte: "{b}: {@score}" //标签内容格式器 --自定义
        },
        itemStyle: {
          //声明渐变色
          //0,1,0,0从正下方向正上方渐变
          //1,0,0,1从右上方向左下方渐变
          //0,0,0,1用于配置渐变色的起止位置，分别对应右，下，左，上,0,0,0,1代表渐变色从正上方开始
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#37BBF8" },
            { offset: 1, color: "#3977E6" }
          ]),
          //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
          // barBorderRadius: [5, 5, 0, 0] （顺时针左上，右上，右下，左下）
          barBorderRadius: 30,
          //图形阴影的模糊大小，该属性配合shadowColor,shadowOffsetX,shadowOffsetY,一起设置图形的阴影效果
          shadowBlur: 4,
          //阴影颜色
          shadowColor: "rgba(0,160,221,1)"
        }
      }
    ]

附带官方文档:

series[i]:
系列列表，每个系列通过type决定自己的图表类型

需求3：改变坐标轴样式，隐藏刻度线

xAxis: {
  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  //坐标轴轴线相关设置
  axisLine: {
    lineStyle: {
      //轴线的颜色
      color: "rgba(255,255,255,0.12)"
    }
  },
  //坐标轴刻度线标签的相关设置
  axisLabel: {
    color: "#c1cadc",
    textStyle: {
      fontSize: 12
    }
  }
},
yAxis: {
  //坐标轴刻度线标签的相关设置
  axisLabel: {
    // formatter: "{value}",
    color: "gray"
  },
  //坐标轴轴线相关设置
  axisLine: {
    show: false
  },
  splitLine: {
    lineStyle: {
      color: "rgba(255,255,255,0.12)"
    }
  }
},

附带官方文档：

xAxis（x轴）:
直角坐标系grid中的x轴，一般情况下单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置 offset属性防止同个位置多个x轴的重叠

xAxis.name | string:坐标轴名称

xAxis.type | string ：坐标轴类型
[default:'category']
'value' 数值轴，适用于连续数据
'category' 类目轴,适用于离散的类目数据，为该类目时必须通过data设置类目数据
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- 'log' 对数轴。适用于对数数据。

xAxis.data[i] | Object
类目数据，在类目轴（type:'categor‘）中有效
如果没有设置type，但是设置了axis.data，则认为type是 'category'
如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

xAxis.data[i].value | string :
单个类目名称

yAxis基本类似
yAxis.type ｜ string
[ default: 'value' ]

需求4: x轴文本太长，显示不全

Echarts x轴文本内容太长的几种解决方案

完整代码：

 let option = {
    title: {
      text: "ECharts 入门示例"
    },
    tooltip: {},
    legend: {
      data: ["销量"]
    },
    // background
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      //坐标轴轴线相关设置
      axisLine: {
        lineStyle: {
          //轴线的颜色
          color: "rgba(255,255,255,0.12)"
        }
      },
      //坐标轴刻度线标签的相关设置
      axisLabel: {
        color: "#c1cadc",
        textStyle: {
          fontSize: 12
        }
      }
    },
    yAxis: {
      //坐标轴刻度线标签的相关设置
      axisLabel: {
        // formatter: "{value}",
        color: "gray"
      },
      //坐标轴轴线相关设置
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.12)"
        }
      }
    },
    label: {
      show: true,
      position: "top",
      color: "gray"
    },
    barWidth: "20px",

    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],

        label: {
          //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
          show: true, //是否显示
          position: "top", //标签的位置。
          formatte: "{b}: {@score}" //标签内容格式器 --自定义
        },
        itemStyle: {
          //声明渐变色
          //0,1,0,0从正下方向正上方渐变
          //1,0,0,1从右上方向左下方渐变
          //0,0,0,1用于配置渐变色的起止位置，分别对应右，下，左，上,0,0,0,1代表渐变色从正上方开始
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#37BBF8" },
            { offset: 1, color: "#3977E6" }
          ]),
          //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
          // barBorderRadius: [5, 5, 0, 0] （顺时针左上，右上，右下，左下）
          barBorderRadius: 30,
          //图形阴影的模糊大小，该属性配合shadowColor,shadowOffsetX,shadowOffsetY,一起设置图形的阴影效果
          shadowBlur: 4,
          //阴影颜色
          shadowColor: "rgba(0,160,221,1)"
        }
      }
    ]
  };
  myChart.setOption(option);

还剩下面几种柱图，放在下一篇继续

最后

Echarts官网上示例极其丰富，可以满足大多数的日常开发，写这篇文章的目的是记录一下经常用到的echarts组件，当看到UI设计图时，能知道这个效果是哪个组件实现的就可以啦

avatar
文章
阅读
粉丝