Echarts 柱状图横向排版颜色渐变---实现效果详解(vue+Echarts实现)

Posted 2021-08-02 黑木令

此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo (Echarts 柱状图横向排版颜色渐变效果)示例展示; 如有疑问或者不清楚的欢迎随时提问 。

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 使用 echarts 版本: “echarts”: “^4.3.0”

2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S

3. 在 main.js 入口文件中全局引入:

import* Vue *from* 'vue'

import* Echarts *from* 'echarts' *// 引入Echarts*
  
Vue.prototype.$echarts = Echarts

4. echarts 配置文件( 文件名 echartsMould.js )

1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。

2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 

3. 这样的处理方式也方便组件化的实现。

5. 封装 Echarts 文件 echartsMould.js 具体配置代码

import echarts from 'echarts'

/**
 * 2. 拥堵路段--carJam.vue
 */
var option_carJam = {
  title: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    textStyle: { // 设置提示框的对齐方式
      align: 'left'
    }
  },
  legend: {
    show: false
  },
  grid: {
    left: '3%',
    right: '2%',
    top: '5px',
    bottom: '0',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: { // 去除背景网格线
      show: false
    },
    axisTick: { // 刻度
      show: false // 不显示刻度线
    },
    axisLine: { // 设置轴线
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      data: ['xx路', 'yyy路', 'zz路', 'w路'],
      axisTick: { // 刻度
        show: false // 不显示刻度线
      },
      axisLine: { // 设置轴线
        show: false
      },
      axisLabel: {
        formatter: function (data) {
          let valueTxt = ''
          if (data.length > 3) {
            valueTxt = data.substring(0, 4) + '...'
          } else {
            valueTxt = data
          }
          return valueTxt
        },
        textStyle: {
          fontFamily: 'MicrosoftYaHei',
          fontSize: '12',
          color: '#CBD9FF',
        }
      }
    },
    {
      type: 'category',
      data: [0.3,0.23,0.75,0.88],
      axisTick: { // 刻度
        show: false // 不显示刻度线
      },
      axisLine: { // 设置轴线
        show: false
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'ArialMT',
          fontSize: '12',
          color: '#86A5C3' // 坐标值的具体的颜色
        }
      }
    }
  ],
  series: [
    {
      name: '2019年',
      type: 'bar',
      data: [0.3,0.23,0.75,0.88],
      barWidth: 7,
      itemStyle: { // 柱状图的背景色
        normal: {
          // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            var index = params.dataIndex
            var colorList = [
              // 渐变颜色的色值和透明度
              // 透明度从0
              ['rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(13,94,208,0.3)', 'rgba(255,155,15,0)', 'rgba(253,103,96,0.3)'], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
              ['rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(13,94,208,0.6)', 'rgba(255,155,15,0.6)', 'rgba(253,103,96,0.6)']
            ]
            return {
              colorStops: [{
                offset: 0.3, // 颜色的开始位置
                color: colorList[0][index] // 0% 处的颜色
              },
              {
                offset: 0.6, // 颜色的结束位置
                color: colorList[1][index] // 100% 处的颜色
              }]
            }
          }
        }
      }
    }
  ]
}

6. 调用 Echarts 封装内容 .vue 文件具体配置代码

<template>
  <!-- 拥堵路段  -->
  <div class="jam-shel" ref="carjam" id="main" style="width:100%; height:calc(100% - 48px)"></div>
</template>

<script>
/**
 * 引入 echarts 模板
 */
import { option_carJam } from '@/tools/monitor/echartsMould.js'

export default {
  data () {
    return {
      resizeTimer: null,
      option: option_carJam,
      timerSetInterval: null,
    }
  },
  mounted () {
    let _this = this
    _this.getType()
    window.addEventListener('resize', function () {   //实现 echarts 图表, 随页面宽高变化, 而变化 。
      if (_this.resizeTimer) {
        clearTimeout(_this.resizeTimer)
      }
      if (_this.carjam) {
        _this.resizeTimer = setTimeout(function () {
          console.log('_this.carjam : ', _this.carjam)
          _this.carjam.resize()
        }, 100)
      }
    }),
    this.timerSetInterval = setInterval(() => {
      _this.getType()
    }, 5 * 60 * 1000);
    _this.destroyed()
  },
  // 清除定时器
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timerSetInterval);
  },
  methods: {
    async getType () {
      let _this = this
      /**
       * 此处的处理方式当时项目数据格式问题，需要处理的内容比较多；大家可以根据自己的业务需求以及后台返回的数据格式自己进行处理
       */
      // let dataNume = []
      // let dataNum = []
      // /**
      //  * URL
      //  */
      // const urlSum = {
      //   urlJam: '/congestRealTime/getRoadCongestIndexTopByArea.htm?areaId=' + _this.areaId    //拥堵路段
      // }
      // /**
      //  * 数据请求
      //  */
      // let resJam = await _this.$axios.getEig(urlSum.urlJam)   //拥堵路段
      // /**
      //  * 数据处理
      //  */
      // if (resJam.resultList.length < 6) {
      //   resJam.resultList.forEach(function (item) {
      //     dataNume.push(item.roadName)
      //     if (item.index === 1) {
      //       dataNum.push('1.00')
      //     } else {
      //       dataNum.push((Math.floor((item.index) * 100)) / 100)
      //     }
      //   })
      // } else {
      //   resJam.resultList = resJam.resultList.slice(0, 5)
      //   resJam.resultList.forEach(function (item) {
      //     dataNume.push(item.roadName)
      //     if (item.index === 1) {
      //       dataNum.push('1.00')
      //     }
      //     if (item.index !== 1) {
      //       // dataNum.push((Math.floor((item.index) * 100)) / 100)
      //       // console.log('------------: ', ((item.index) + '0.0000000').substring(0, 4))
      //       dataNum.push(((item.index) + '0.0000000').substring(0, 4))
      //     }
      //   })
      // }

      /**
       * 具体的赋值方式在这里，大家可以根据得到的数据格式来赋值。
       */
      // _this.option.yAxis[0].data = dataNume
      // _this.option.yAxis[1].data = dataNum
      // _this.option.series[0].data = dataNum
      /**
       * 初始化 echarts
       */
      let carjam = this.$echarts.init(this.$refs.carjam)    //初始化一个echarts
      _this.carjam = carjam
      carjam.setOption(this.option)                         //setOption 用 this.option 中的数据开始作图
    },
    destroyed () {
      window.removeEventListener('resize', this.carjam, 100)
    }
  }
}
</script>

<style scoped>
.jam-shel {
  margin-bottom: 15px;
}
</style>

7. Echarts 调用成功 gif 图片展示

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “Echarts 图表” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回关; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处)